码迷,mamicode.com
首页 > Web开发 > 详细

Angularjs启动入口, splash画面,与加快启动的技巧

时间:2017-07-12 10:17:08      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:page   optional   div   dom   范围   roo   option   速度   let   

Angularjs启动入口, splash画面,与加快启动的技巧

Angularjs启动入口
* 自动响应DOMContentLoaded event
* 从ngApp指定的入口启动: 在angular.js执行后, 如果 document.readyState是‘complete‘, 则寻找并执行ngApp指定的root
*** load它指定的module
*** 建立app的injector
*** 编译DOM上ngApp指定的部分 (不一定是全部DOM),

* 用angular.bootstrap()启动,(不能与 ngApp混用)
*** 先load augular.js
*** 定义myApp及其模块
*** 启动
angular.bootstrap(document, [‘myApp‘]);

(如果不指定ngApp,则ionic就不自动启动,)


* 放在最后load, 以避免NG解释减慢DOM的加载
<body>
...
<script src="angular.js"></script>
</body>
* ng-strict-di配合ngapp,确保所有service都是正确annotated,例如:

ng-app="optionalModuleName" ng-strict-di

* 用ng-cloak来阻止显示原始的NG模板(特别是在loading过程中),建议多出小范围使用,代替1个大范围

* splash用非NG的,以加快显示速度
.splash {
display: none;
}

[ng-cloak].splash {
background-color: #428bca;
width: 100%;
text-align: center;
color: white;
display: block !important;
}

<div class="splash" ng-cloak="">
<p>Loading。。。</p>
</div>

 

* 测试WebApp打开的速度
https://developers.google.com/speed/pagespeed/insights/?url=show.udoido.cn

 

Angularjs启动入口, splash画面,与加快启动的技巧

标签:page   optional   div   dom   范围   roo   option   速度   let   

原文地址:http://www.cnblogs.com/GameEngine/p/7153555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!