Angular-Ui-Router+ocLazyLoad動態(tài)加載腳本示例
在使用angular過程以前同事是采取一次性加載方式，在index頁面一次性加載所有的js跟css，這種加載方式只適合教學(xué)和小型項(xiàng)目中，中大型不建議使用，加載速度影響到用戶體驗(yàn)。
在使用了Ui-Router以后，我第一想法就是把每個(gè)功能組件化，在請求視圖的時(shí)候再去加載該頁面js和css，index頁面主要加載必須文件：angular.js
于是嘗試了下，這樣去寫，但是發(fā)現(xiàn)angular報(bào)錯(cuò)，原因是控制器沒有注入主程序
后面在angular庫里面發(fā)現(xiàn)ocLazyLoad，這是一個(gè)為angular量身定制腳本加載器，它只有15K
使用它很簡單：
依次載入文件
<script src="framework/angular/angular.min.js"></script> <script src="framework/angular-ui-router.js"></script> <script src="framework/ocLazyLoad.min.js"></script> <script src="framework/app.js"></script>
跟平常寫路由一樣只是需要多一層resolve
路由在渲染之前會執(zhí)行resolve對象比如用來加載js和css，當(dāng)然還有其他用處
代碼：（不用擔(dān)心腳本重復(fù)加載，之前加載的腳本會在瀏覽器做緩存）
angular.module('myRouters', ['ui.router','oc.lazyLoad'])
.state('index', {
url: '/index',
title: ' | ！',
views: {
'A': {
templateUrl: 'components/header/header.html',
controller: 'headerCtrl'
},
'C@index': {
templateUrl: 'components/header/h1.html',
controller: 'H2Ctrl'
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(['components/header/H2.js',
'components/header/header.js',
'components/header/h3.js',
'components/header/header1.css']);
}]
}
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- angularjs ui-router中路由的二級嵌套
- AngularJS ui-router (嵌套路由)實(shí)例
- Angular2學(xué)習(xí)筆記——詳解路由器模型（Router）
- angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制
- Angular中使用ui router實(shí)現(xiàn)系統(tǒng)權(quán)限控制及開發(fā)遇到問題
- 淺析angularJS中的ui-router和ng-grid模塊
- Angularjs中UI Router的使用方法
- Angularjs中UI Router全攻略
- angularJS中router的使用指南
- 詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由
相關(guān)文章
Angular中innerHTML標(biāo)簽的樣式不起作用的原因解析
這篇文章主要介紹了Angular中innerHTML標(biāo)簽的樣式不起作用詳解 ,本文給出了解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解(下)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
這篇文章主要介紹了AngularJS使用攔截器實(shí)現(xiàn)的loading功能,結(jié)合完整實(shí)例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
AngularJS實(shí)現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)進(jìn)度條功能,結(jié)合具體完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)進(jìn)度條功能的原理、相關(guān)知識點(diǎn)與注意事項(xiàng),需要的朋友可以參考下2017-07-07
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過示例代碼相信更能讓大家理解，有需要的朋友們下面來一起看看吧。2016-09-09
這篇文章主要介紹了什么是 AngularJS？AngularJS簡介,本文講解了AngularJS方方面面的基礎(chǔ)知識,AngularJS 是一個(gè)為動態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下2014-12-12
AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法【路由嵌套】
這篇文章主要介紹了AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法,涉及AngularJS路由嵌套操作相關(guān)實(shí)現(xiàn)步驟與技巧,需要的朋友可以參考下2016-12-12
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
這篇文章主要介紹了Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了angular 內(nèi)存溢出的問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Angular Excel 導(dǎo)入與導(dǎo)出的實(shí)現(xiàn)代碼
這篇文章主要介紹了Angular Excel 導(dǎo)入與導(dǎo)出的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04