Ionic 启动流程
标签: ionic
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
ionic 样式文件包<script src="lib/ionic/js/ionic.bundle.js"></script>
将 ionic angular都引入了,在 bundle.js中集成了<script src="cordova.js"></script>
打包后会自动加进去的
<!-- ng-router 的坑 是 ng-view -->
<!-- 这里 UI-Router 封装了, 是ion-nav-view 路由组件, 理解为页面中的一个坑,匹配到路由,就把内容填进来了 -->
<ion-nav-view></ion-nav-view>
项目启动过程
- 在单页应用的 index.html 中引入所需要的全部 js 和 css 文件,把 angular 中所有的模块都注册了一下,但是里面的方法还没有执行
- 在body上有 ng-app 启动入口, 他就会去找相应的模块, 找到了 app.js
- 从start模块引入,config,global,route等其他模块依赖
- 在route模块中又引入了功能模块的子路由
- 在子路由中又引入了controller
- 在controller中又引入了 service
- 通过返回,又回到了子路由,这个时候把子路由里面的config方法中的东西执行了一遍,我们定义了路由名称,路由地址,模板页面,控制器。现在整个单页应用中的路由表就有了一个子路由,整个spa一直监听着浏览器的锚记变化
- 当所有的依赖都引入之后,要走默认的路由,之后项目就启动了
启动完成监听,页面渲染过程
- 当浏览器锚记发生变化时候,能被监听到
- 监听到就去路由表中去匹配路由,然后渲染我们的模板页面和控制器
- 东西被渲染到 index.html 页面中的 ion-nav-view 组件中
- 之后可以通过一些跳转方法继续切换页面