Ionic 启动流程

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>

项目启动过程

1. 在单页应用的 index.html 中引入所需要的全部 js 和 css 文件，把 angular 中所有的模块都注册了一下，但是里面的方法还没有执行
2. 在body上有 ng-app 启动入口， 他就会去找相应的模块， 找到了 app.js
3. 从start模块引入，config，global，route等其他模块依赖
4. 在route模块中又引入了功能模块的子路由
5. 在子路由中又引入了controller
6. 在controller中又引入了 service
7. 通过返回，又回到了子路由，这个时候把子路由里面的config方法中的东西执行了一遍，我们定义了路由名称，路由地址，模板页面，控制器。现在整个单页应用中的路由表就有了一个子路由，整个spa一直监听着浏览器的锚记变化
8. 当所有的依赖都引入之后，要走默认的路由，之后项目就启动了

启动完成监听，页面渲染过程

1. 当浏览器锚记发生变化时候，能被监听到
2. 监听到就去路由表中去匹配路由，然后渲染我们的模板页面和控制器
3. 东西被渲染到 index.html 页面中的 ion-nav-view 组件中
4. 之后可以通过一些跳转方法继续切换页面