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

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

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

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

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

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

后面在angular庫里面發(fā)現(xiàn)ocLazyLoad，這是一個為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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angularjs添加排序查詢功能的實例代碼
這篇文章主要介紹了Angularjs添加排序查詢功能的實例代碼,需要的朋友可以參考下
2017-10-10
AngularJS集合數(shù)據(jù)遍歷顯示的實例
下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細(xì)的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項,需要的朋友可以參考下
2016-11-11
Angular路由ui-router配置詳解
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯，具有一定得參考借鑒價值，需要的朋友參考下吧
2018-08-08
Angularjs中如何使用filterFilter函數(shù)過濾
這篇文章主要介紹了Angularjs中如何使用filterFilter函數(shù)過濾的相關(guān)資料,需要的朋友可以參考下
2016-02-02
Angular4項目中添加i18n國際化插件ngx-translate的步驟詳解
這篇文章主要跟大家介紹了關(guān)于Angular4項目中添加i18n國際化插件ngx-translate的步驟，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-07-07
基于AngularJS實現(xiàn)的工資計算器實例
這篇文章主要介紹了基于AngularJS實現(xiàn)的工資計算器,結(jié)合具體實例形式分析了AngularJS數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下
2017-06-06
淺談Angular 觀察者模式理解
這篇文章主要介紹了淺談Angular 觀察者模式理解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
Angular簡單驗證功能示例
這篇文章主要介紹了Angular簡單驗證功能,涉及AngularJS事件響應(yīng)、正則判定、頁面元素屬性動態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
angularjs下拉框空白的解決辦法
這篇文章主要為大家詳細(xì)介紹了angularjs下拉框空白的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06