AngularJS使用ocLazyLoad實現(xiàn)js延遲加載
最近開發(fā)一個系統(tǒng)遇到了一個問題，用angular路由一個html片段，該片段需要使用一個js插件來實現(xiàn)一個富文本編輯器。關(guān)鍵問題在于必須要在片段加載后通過js與dom元素進(jìn)行綁定。一開始想當(dāng)然以為直接把js代碼寫在代碼段里不久ok了，然而經(jīng)過實驗，路由將html片段插入頁面時只能讀取css，無法解析并執(zhí)行js代碼。
google了半天發(fā)現(xiàn)了很多angular+requireJs的解決方案，但我覺得對于我這個場景并不適合，因為requirejs本質(zhì)是一個模塊加載器，按需加載只是他的副業(yè)，我們用它應(yīng)該主要是用它來做模塊化的，如果我們單純?yōu)榱税葱杓虞d卻要試用模塊化語法包裝我們的代碼(define)，感覺有點像用大炮打蚊子，對于我這種需求來說代價巨大。
最后決定使用ocLazyLoad來處理，因為此方案優(yōu)點是，簡單易行無侵入。同時這個方案有些缺點，比如每次動態(tài)加載需要的腳本、模版資源會有很多不必要的網(wǎng)絡(luò)開銷，路由定義比較復(fù)雜（多了一些配置項，其實不能算復(fù)雜，而是繁瑣），對于大型復(fù)雜業(yè)務(wù)應(yīng)用，路由眾多，耗費的精力不可忽視。但是用在我這個場景之中正合適。于是便在github上fork下js,引入到項目中。
<script src="js/ocLazyLoad.js"></script>
在需要用到的angular模塊里進(jìn)行配置
var app = angular.module('formCtrlParts', ['oc.lazyLoad']);
再向路由需要用到的控制器里面使用此服務(wù)進(jìn)行js文件的按需加載
app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){
$ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');
})
這樣基本就大功告成，ocLazyLoad有很多種加載方式，也可以配合路由，指令進(jìn)行加載。
以上所述是小編給大家介紹的AngularJS使用ocLazyLoad實現(xiàn)js延遲加載，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家?guī)硪黄狽odeJs——入門必看攻略。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
angular項目中bootstrap-datetimepicker時間插件的使用示例
這篇文章主要介紹了angular項目中bootstrap-datetimepicker時間插件的使用示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了angular2系列之路由轉(zhuǎn)場動畫的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Angularjs的鍵盤事件的綁定的相關(guān)資料,這里提供了兩種方法，1.ng內(nèi)置指令，2.自定義指令，并進(jìn)行比較，需要的朋友可以參考下2017-07-07
angular.js+node.js實現(xiàn)下載圖片處理詳解
這篇文章主要介紹了angular.js+node.js實現(xiàn)下載圖片處理的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
整理AngularJS框架使用過程當(dāng)中的一些性能優(yōu)化要點
這篇文章主要介紹了AngularJS框架使用過程當(dāng)中的一些性能優(yōu)化要點,Angular通常被用來制作大型單頁應(yīng)用,因而性能問題也是必須考慮的因素,需要的朋友可以參考下2016-03-03
深入淺析angular和vue還有jquery的區(qū)別
vue是一個漸進(jìn)式的框架, 是一個輕量級的框架而angular是一個mvc框架, 各有千秋，下面小編通過本文給大家介紹angular和vue還有jquery的區(qū)別，感興趣的朋友一起看看吧2018-08-08
AngularJS使用ng-app自動加載bootstrap框架問題分析
這篇文章主要介紹了AngularJS使用ng-app自動加載bootstrap框架問題,分析了前面文章中所述的ng-app自動加載bootstrap出現(xiàn)的錯誤原因與相應(yīng)的解決方法,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了詳解AngularJS中的表格使用,作為熱門的JavaScript框架,AngularJS中提供的表格功能十分強(qiáng)大,需要的朋友可以參考下2015-06-06
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09