這篇文章主要介紹了Angular-Ui-Router+ocLazyLoad動態(tài)加載腳本的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計開發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗，各類網(wǎng)站都可以開發(fā)，品牌網(wǎng)站制作，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計，建網(wǎng)站費用，建網(wǎng)站多少錢，價格優(yōu)惠，收費合理。

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

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

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

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

使用它很簡單：

依次載入文件

跟平常寫路由一樣只是需要多一層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/h2.html', 
      controller: 'H2Ctrl' 
    } 
  }, 
  resolve: { 
    loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { 
      return $ocLazyLoad.load(['components/header/H2.js', 
        'components/header/header.js', 
        'components/header/h4.js', 
        'components/header/header1.css']); 
    }] 
  } 
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular-Ui-Router+ocLazyLoad動態(tài)加載腳本的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!