国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

angular按需加載的運(yùn)用

MRZYD / 1029人閱讀

摘要:是一個(gè)根據(jù)需要來(lái)加載文件的框架可避免不必要的文件加載提升網(wǎng)頁(yè)瀏覽速度。但是今天給大家介紹另外一個(gè)基于的插件,,同樣可以實(shí)現(xiàn)按需加載。

在用angular做一些比較大的項(xiàng)目的時(shí)候,如果像以前一樣,在首頁(yè)引入一大堆js文件話,無(wú)疑會(huì)造成首次加載消耗很多的時(shí)間,對(duì)用戶體驗(yàn)非常不好,所以按需加載就應(yīng)運(yùn)而生了,在需要用的時(shí)候才加載,這樣很高效。有些js框架可以實(shí)現(xiàn),比圖RequireJS ,seaJS。是一個(gè)根據(jù)需要來(lái)加載 js文件的 JavaScript框架,可避免不必要的js文件加載,提升網(wǎng)頁(yè)瀏覽速度。
但是今天給大家介紹另外一個(gè)基于angular的插件,ocLazyLoadjs,同樣可以實(shí)現(xiàn)按需加載。在angular中運(yùn)用ocLazyLoadjs實(shí)現(xiàn)按需加載,可以在一下幾個(gè)方面進(jìn)行運(yùn)用:
1)在ui-route路由配置中加載
    resolve:{
        deps:["$ocLazyLoad",function($ocLazyLoad){
             return $ocLazyLoad.load([所需加載的文件]);//路徑一定要正確
        }]
    }
2)在控制器中動(dòng)態(tài)加載,需要引入$ocLazyLoad
 $ocLazyLoad.load([所需加載的文件]);
3)依賴加載
angular.module("myapp", [[
    所需加載的文件
]])
4)在模板template中加載
$ocLazyLoadProvider.config({ modules: [{ name: "lazyload", files: [ "所需加載的文件" ] }] }) 下面結(jié)合一個(gè)dome,詳細(xì)說(shuō)說(shuō) 目錄如下:

index.html




   
Title



this is head!
{{num}}
this is footer!

main.js
在main.js中配置了目錄的路由,當(dāng)點(diǎn)擊目錄一時(shí),會(huì)加載目錄一的內(nèi)容,對(duì)應(yīng)的控制器,服務(wù)文件當(dāng)點(diǎn)擊目錄二的時(shí)候,會(huì)加載目錄二所對(duì)應(yīng)的模板,控制器,服務(wù)
基于uiRouter的resolve是在加載controller和template之前所執(zhí)行的一系列操作,它幫助我們初始化我們所要前往的那一個(gè)視圖。只有rsolved(操作完成),controller才會(huì)被實(shí)例化。因此,我們可以在resolve步驟里面加載我們所需要的controller,以及需要用到的服務(wù)。
目錄一對(duì)應(yīng)的控制器,服務(wù)是在路由配置里面加載的
目錄二對(duì)應(yīng)的控制器,服務(wù)是在模板中加載的

var menuCtr=function($scope){
$scope.menus=[
    {txt:"目錄1",sref:"menu1"},
    {txt:"目錄2",sref:"menu2"},
];
}
menuCtr.$injector=["$scope"];
var app=angular.module("app",["ui.router","oc.lazyLoad"]);
app.controller("menuCtr",menuCtr);
//ui—route的路由配置
app.config(["$stateProvider","$urlRouterProvider","$ocLazyLoadProvider",function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider){
$urlRouterProvider.otherwise("/");
$stateProvider.state("menu1",{
    url:"/menu1",
    templateUrl:"views/menu1.html",
      resolve:{
        deps:["$ocLazyLoad",function($ocLazyLoad){
             return $ocLazyLoad.load(["./controller/menuCtr1.js","./service/menu1Service.js"]);
        }]
    }
}).state("menu2",{
    url:"/menu2",
    templateUrl:"views/menu2.html",
})

$ocLazyLoadProvider.config({
modules: [{
    name: "lazyload",
    files: [
        "./controller/menuCtr2.js",
        "./service/menu2Service.js"
    ]
}]
})
}]);

首頁(yè)時(shí)加載的文件

當(dāng)點(diǎn)擊目錄一時(shí)的加載

當(dāng)點(diǎn)擊目錄二時(shí)加載

我們?cè)谀夸浺粚?duì)應(yīng)的控制中加載目錄一下的子目錄所對(duì)應(yīng)的路由,通過(guò)在控制器中動(dòng)態(tài)加載的方式

var menuCtr1=function($scope,$ocLazyLoad){
$scope.menuSon=[
    {txt:"二級(jí)目錄一",sref:"menu1.menuSon1"},
    {txt:"二級(jí)目錄二",sref:"menu1.menuSon2"}
];
$scope.flag="fath";
 $ocLazyLoad.load([
    "./route/router.js"http://注意此處的路徑是相對(duì)于main.js
]);
 $scope.$broadcast("msg", $scope.menuSon);
}
menuCtr1.$injector=["$scope","$ocLazyLoad"];
angular.module("app",[]).controller("menuCtr1",menuCtr1)

源碼地址:https://github.com/hubingg/an...
本文如有不對(duì)的地方,歡迎指出來(lái)

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/83333.html

相關(guān)文章

  • angularjs+requirejs實(shí)現(xiàn)按需加載全面實(shí)踐

    摘要:想同時(shí)實(shí)現(xiàn)這些目標(biāo),就必須有一套按需加載的機(jī)制,頁(yè)面上展現(xiàn)的內(nèi)容和所有需要依賴的文件,都可以根據(jù)業(yè)務(wù)邏輯需要按需加載。最近都是基于做開發(fā),所以本文主要圍繞提供的各種機(jī)制,探索全面實(shí)現(xiàn)按需加載的套路。注意必須設(shè)置,否則變化以后,不截獲。 在進(jìn)行有一定規(guī)模的項(xiàng)目時(shí),通常希望實(shí)現(xiàn)以下目標(biāo):1、支持復(fù)雜的頁(yè)面邏輯(根據(jù)業(yè)務(wù)規(guī)則動(dòng)態(tài)展現(xiàn)內(nèi)容,例如:權(quán)限,數(shù)據(jù)狀態(tài)等);2、堅(jiān)持前后端分離的基本原則...

    TerryCai 評(píng)論0 收藏0
  • 前端優(yōu)化感想以及[譯]redux 教程 第一部分(共四部分

    摘要:自己英語(yǔ)一般,水平有限,獻(xiàn)上原文地址,還有我翻譯的中文地址,歡迎大家勘誤下面是自己的一點(diǎn)感想先說(shuō)一下,我們知道,前端優(yōu)化有這么幾步,第一步首先呢我們知道,一個(gè)應(yīng)用要依賴好多條文件,而瀏覽器加載完一條,要執(zhí)行完這條才加載下一條,所以呢,就很慢 自己英語(yǔ)一般,水平有限,獻(xiàn)上原文地址,還有我翻譯的中文地址,歡迎大家勘誤 下面是自己的一點(diǎn)感想 先說(shuō)一下webpack,我們知道,前端優(yōu)化有這么幾...

    snowell 評(píng)論0 收藏0
  • vue路由懶加載和組件按需加載

    摘要:懶加載也叫延遲加載,即在需要的時(shí)候進(jìn)行加載,隨用隨載。路由的懶加載按需加載的寫法效果按需加載會(huì)在頁(yè)面第一次請(qǐng)求的時(shí)候,把相關(guān)路由組件塊的添加上非按需加載則會(huì)把所有的路由組件塊的包打在一起。當(dāng)業(yè)務(wù)包很大的時(shí)候建議用路由的按需加載懶加載。 懶加載也叫延遲加載,即在需要的時(shí)候進(jìn)行加載,隨用隨載。在單頁(yè)應(yīng)用中,如果沒有應(yīng)用懶加載,運(yùn)用webpack打包后的文件將會(huì)異常的大,造成進(jìn)入首頁(yè)時(shí),需要...

    Lucky_Boy 評(píng)論0 收藏0
  • angularjs學(xué)習(xí)筆記——使用requirejs動(dòng)態(tài)注入控制器

    摘要:最近一段時(shí)間在學(xué)習(xí),由于覺得直接使用它需要加載很多的文件,因此想使用來(lái)實(shí)現(xiàn)異步加載,并動(dòng)態(tài)注入控制器。手動(dòng)啟動(dòng),特別說(shuō)明此處的不是那個(gè)框架,而是的一個(gè)手動(dòng)啟動(dòng)框架的函數(shù)中完成了各模塊的初始化,并且引入了。 最近一段時(shí)間在學(xué)習(xí)angularjs,由于覺得直接使用它需要加載很多的js文件,因此想使用requirejs來(lái)實(shí)現(xiàn)異步加載,并動(dòng)態(tài)注入控制器。簡(jiǎn)單搜索了下發(fā)現(xiàn)好多教程寫的都很復(fù)雜,所...

    王軍 評(píng)論0 收藏0
  • [譯] 關(guān)于 Angular 動(dòng)態(tài)組件你需要知道

    摘要:第一種方式是使用模塊加載器,如果你使用加載器的話,路由在加載子路由模塊時(shí)也是用的作為模塊加載器。還需注意的是,想要使用還需像這樣去注冊(cè)它你當(dāng)然可以在里使用任何標(biāo)識(shí),不過(guò)路由模塊使用標(biāo)識(shí),所以最好也使用相同。 原文鏈接:Here is what you need to know about dynamic components in?Angular showImg(https://se...

    lcodecorex 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<