angular按需加载的运用

MRZYD 发布于2019-08-20 17:01 / 1168人阅读

摘要：是一个根据需要来加载文件的框架可避免不必要的文件加载提升网页浏览速度。但是今天给大家介绍另外一个基于的插件，，同样可以实现按需加载。

在用angular做一些比较大的项目的时候，如果像以前一样，在首页引入一大堆js文件话，无疑会造成首次加载消耗很多的时间，对用户体验非常不好，所以按需加载就应运而生了，在需要用的时候才加载，这样很高效。有些js框架可以实现，比图RequireJS ，seaJS。是一个根据需要来加载 js文件的 JavaScript框架,可避免不必要的js文件加载,提升网页浏览速度。
但是今天给大家介绍另外一个基于angular的插件，ocLazyLoadjs，同样可以实现按需加载。在angular中运用ocLazyLoadjs实现按需加载，可以在一下几个方面进行运用：
1）在ui-route路由配置中加载
    resolve:{
        deps:["$ocLazyLoad",function($ocLazyLoad){
             return $ocLazyLoad.load([所需加载的文件]);//路径一定要正确
        }]
    }
2）在控制器中动态加载，需要引入$ocLazyLoad
 $ocLazyLoad.load([所需加载的文件]);
3）依赖加载
angular.module("myapp", [[
    所需加载的文件
]])
4）在模板template中加载

 $ocLazyLoadProvider.config({
    modules: [{
        name: "lazyload",
        files: [
            "所需加载的文件"
        ]
    }]
})
下面结合一个dome,详细说说
目录如下：

index.html




   
Title




    this is head!
    {{num}}
        
            {{menu.txt}}
        
        
    
    this is footer!

main.js
在main.js中配置了目录的路由，当点击目录一时，会加载目录一的内容，对应的控制器，服务文件当点击目录二的时候，会加载目录二所对应的模板，控制器，服务
基于uiRouter的resolve是在加载controller和template之前所执行的一系列操作，它帮助我们初始化我们所要前往的那一个视图。只有rsolved(操作完成)，controller才会被实例化。因此，我们可以在resolve步骤里面加载我们所需要的controller,以及需要用到的服务。
目录一对应的控制器，服务是在路由配置里面加载的
目录二对应的控制器，服务是在模板中加载的

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"
    ]
}]
})
}]);

首页时加载的文件

当点击目录一时的加载

当点击目录二时加载

我们在目录一对应的控制中加载目录一下的子目录所对应的路由，通过在控制器中动态加载的方式

var menuCtr1=function($scope,$ocLazyLoad){
$scope.menuSon=[
    {txt:"二级目录一",sref:"menu1.menuSon1"},
    {txt:"二级目录二",sref:"menu1.menuSon2"}
];
$scope.flag="fath";
 $ocLazyLoad.load([
    "./route/router.js"//注意此处的路径是相对于main.js
]);
 $scope.$broadcast("msg", $scope.menuSon);
}
menuCtr1.$injector=["$scope","$ocLazyLoad"];
angular.module("app",[]).controller("menuCtr1",menuCtr1)

源码地址：https://github.com/hubingg/an...
本文如有不对的地方，欢迎指出来

GPU云服务器云服务器按需加载按需加载javascript webpack按需加载 python的运用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83333.html

angularjs+requirejs实现按需加载的全面实践

摘要：想同时实现这些目标，就必须有一套按需加载的机制，页面上展现的内容和所有需要依赖的文件，都可以根据业务逻辑需要按需加载。最近都是基于做开发，所以本文主要围绕提供的各种机制，探索全面实现按需加载的套路。注意必须设置，否则变化以后，不截获。在进行有一定规模的项目时，通常希望实现以下目标：1、支持复杂的页面逻辑（根据业务规则动态展现内容，例如：权限，数据状态等）；2、坚持前后端分离的基本原则...

TerryCai 2019-08-19 17:39 评论0 收藏0
前端优化感想以及[译]redux 教程第一部分（共四部分

摘要：自己英语一般，水平有限，献上原文地址，还有我翻译的中文地址，欢迎大家勘误下面是自己的一点感想先说一下，我们知道，前端优化有这么几步，第一步首先呢我们知道，一个应用要依赖好多条文件，而浏览器加载完一条，要执行完这条才加载下一条，所以呢，就很慢自己英语一般，水平有限，献上原文地址，还有我翻译的中文地址，欢迎大家勘误下面是自己的一点感想先说一下webpack，我们知道，前端优化有这么几...

snowell 2019-08-19 17:14 评论0 收藏0
vue的路由懒加载和组件的按需加载

摘要：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。路由的懒加载按需加载的写法效果按需加载会在页面第一次请求的时候，把相关路由组件块的添加上非按需加载则会把所有的路由组件块的包打在一起。当业务包很大的时候建议用路由的按需加载懒加载。懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要...

Lucky_Boy 2019-08-21 16:50 评论0 收藏0
angularjs学习笔记——使用requirejs动态注入控制器

摘要：最近一段时间在学习，由于觉得直接使用它需要加载很多的文件，因此想使用来实现异步加载，并动态注入控制器。手动启动，特别说明此处的不是那个框架，而是的一个手动启动框架的函数中完成了各模块的初始化，并且引入了。最近一段时间在学习angularjs，由于觉得直接使用它需要加载很多的js文件，因此想使用requirejs来实现异步加载，并动态注入控制器。简单搜索了下发现好多教程写的都很复杂，所...

王军 2019-08-19 18:07 评论0 收藏0
[译] 关于 Angular 动态组件你需要知道的

摘要：第一种方式是使用模块加载器，如果你使用加载器的话，路由在加载子路由模块时也是用的作为模块加载器。还需注意的是，想要使用还需像这样去注册它你当然可以在里使用任何标识，不过路由模块使用标识，所以最好也使用相同。原文链接：Here is what you need to know about dynamic components in Angular showImg(https://se...

lcodecorex 2019-08-26 11:53 评论0 收藏0