Angular-Ui-Router+ocLazyLoad動(dòng)態(tài)加載腳本示例

更新時(shí)間：2017年03月02日 10:29:32 作者：侞婼冇罪

本篇文章主要介紹了Angular-Ui-Router+ocLazyLoad動(dòng)態(tài)加載腳本示例，可以提高加載速度，使用戶(hù)體驗(yàn)更好，有興趣的可以了解一下。

在使用angular過(guò)程以前同事是采取一次性加載方式，在index頁(yè)面一次性加載所有的js跟css，這種加載方式只適合教學(xué)和小型項(xiàng)目中，中大型不建議使用，加載速度影響到用戶(hù)體驗(yàn)。

在使用了Ui-Router以后，我第一想法就是把每個(gè)功能組件化，在請(qǐng)求視圖的時(shí)候再去加載該頁(yè)面js和css，index頁(yè)面主要加載必須文件：angular.js

于是嘗試了下，這樣去寫(xiě)，但是發(fā)現(xiàn)angular報(bào)錯(cuò)，原因是控制器沒(méi)有注入主程序

后面在angular庫(kù)里面發(fā)現(xiàn)ocLazyLoad，這是一個(gè)為angular量身定制腳本加載器，它只有15K

使用它很簡(jiǎn)單：

依次載入文件

<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>

跟平常寫(xiě)路由一樣只是需要多一層resolve

路由在渲染之前會(huì)執(zhí)行resolve對(duì)象比如用來(lái)加載js和css，當(dāng)然還有其他用處

代碼：（不用擔(dān)心腳本重復(fù)加載，之前加載的腳本會(huì)在瀏覽器做緩存）

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']); 
    }] 
  } 
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
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)知識(shí)點(diǎn)與注意事項(xiàng),需要的朋友可以參考下
2017-07-07
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過(guò)示例代碼相信更能讓大家理解，有需要的朋友們下面來(lái)一起看看吧。
2016-09-09
什么是 AngularJS？AngularJS簡(jiǎn)介
這篇文章主要介紹了什么是 AngularJS？AngularJS簡(jiǎn)介,本文講解了AngularJS方方面面的基礎(chǔ)知識(shí),AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語(yǔ)言，通過(guò)擴(kuò)展HTML的語(yǔ)法，讓你能更清楚、簡(jiǎn)潔地構(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)存溢出的問(wèn)題解決
這篇文章主要介紹了angular 內(nèi)存溢出的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Angular Excel 導(dǎo)入與導(dǎo)出的實(shí)現(xiàn)代碼
這篇文章主要介紹了Angular Excel 導(dǎo)入與導(dǎo)出的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04