AngularJS使用ocLazyLoad實現js延遲加載
最近開發(fā)一個系統遇到了一個問題，用angular路由一個html片段，該片段需要使用一個js插件來實現一個富文本編輯器。關鍵問題在于必須要在片段加載后通過js與dom元素進行綁定。一開始想當然以為直接把js代碼寫在代碼段里不久ok了，然而經過實驗，路由將html片段插入頁面時只能讀取css，無法解析并執(zhí)行js代碼。
google了半天發(fā)現了很多angular+requireJs的解決方案，但我覺得對于我這個場景并不適合，因為requirejs本質是一個模塊加載器，按需加載只是他的副業(yè)，我們用它應該主要是用它來做模塊化的，如果我們單純?yōu)榱税葱杓虞d卻要試用模塊化語法包裝我們的代碼(define)，感覺有點像用大炮打蚊子，對于我這種需求來說代價巨大。
最后決定使用ocLazyLoad來處理，因為此方案優(yōu)點是，簡單易行無侵入。同時這個方案有些缺點，比如每次動態(tài)加載需要的腳本、模版資源會有很多不必要的網絡開銷，路由定義比較復雜（多了一些配置項，其實不能算復雜，而是繁瑣），對于大型復雜業(yè)務應用，路由眾多，耗費的精力不可忽視。但是用在我這個場景之中正合適。于是便在github上fork下js,引入到項目中。
<script src="js/ocLazyLoad.js"></script>
在需要用到的angular模塊里進行配置
var app = angular.module('formCtrlParts', ['oc.lazyLoad']);
再向路由需要用到的控制器里面使用此服務進行js文件的按需加載
app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){
$ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');
})
這樣基本就大功告成，ocLazyLoad有很多種加載方式，也可以配合路由，指令進行加載。
以上所述是小編給大家介紹的AngularJS使用ocLazyLoad實現js延遲加載，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了Angular實現搜索框及價格上下限功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
本篇文章主要介紹了AngularJS的ng-click傳參的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了angularjs學習筆記之簡單介紹的相關資料,需要的朋友可以參考下2015-09-09
angularjs ocLazyLoad分步加載js文件實例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
本文主要介紹AngularJS 表單,這里對AngularJS 表單知識做了詳細整理介紹,希望能幫助有需要的小伙伴2016-07-07
Angular應用tsconfig.json中的lib屬性示例解析
這篇文章主要介紹了Angular應用tsconfig.json中的lib屬性示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
angularJS與bootstrap結合實現動態(tài)加載彈出提示內容
這篇文章主要介紹了angularJS與bootstrap結合實現動態(tài)加載彈出提示內容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10
AngularJS在$scope變量中使用臟值檢查來實現了數據雙向綁定。和Ember.js數據雙向綁定中動態(tài)設施setter和getter不同，臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。2015-09-09
本文詳細介紹了AngularJS控制器之間的數據共享與通信，對angularjs共享數據及通信相關知識感興趣的朋友可以一起學習。2016-08-08
下面小編就為大家?guī)硪黄赼ngularJS的表單驗證指令介紹。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10