什么是ui-router

  ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建)。它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的URL路由。

什么是ocLoayLoad

  ocLoayLoad是AngularJS的模块按需加载器。按需加载的对象

  简单说就是哪个页面需要什么资源,在加载哪个页面的时候在加载,而不是把所有的资源放在模板里。

三个主要文件

  1. <script src="angular/1.4.8/angular/angular.min.js"></script>
  2. <script src="angular/ui-router/release/angular-ui-router.min.js"></script>
  3. <script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>

推荐

  1:首先下载插件 可以百度搜索,这里我推荐在线测试的https://www.bootcdn.cn/angular-ui-router/

  2:github url :https://github.com/366065186/angularjs-oclazyload

   3:Angularjs https://code.angularjs.org/

html文件(部分代码)简单说明

1:首先页面引入上面三个文件

2:在a标签中写入 ui-sref='链接路径' 标签

2:在页面定义一块区域用于显示链接内容 <ui-view></ui-view>

js代码:

首先在module中注入

'ui.router', 'oc.lazyLoad'然后在通过config进行路由配置。
(function () {
    var app = angular.module("app", ['ui.router', 'oc.lazyLoad']) 

    // 配置路由
    app.config(function ($stateProvider) {
        $stateProvider
        // 个人中心主页
            .state('admin/index', {
                url: '/admin/index',
                templateUrl: "/admin/index",
                // 加载页面需要的js
                resolve: load(['/static/js/transfer/adminlte/index.js'])
            })
            // 分类管理列表
            .state('class/index', {
                url: '/class/index',
                templateUrl: "/class/index",
                resolve: load([
                    '/static/js/transfer/adminlte/classification/index.js'
                ])
            })
            // 轮播图列表
            .state('roll', {
                url: '/roll',
                templateUrl: "/roll",
                resolve: load([
                    '/static/js/transfer/adminlte/broadcat.js'
                ])
            })
            // 验证码列表
            .state('code', {
                url: '/code',
                templateUrl: "/code",
                resolve: load([
                    '/static/js/transfer/adminlte/code.js'
                ])
            })
            // 电影列表
            .state('movie', {
                url: '/movie',
                templateUrl: "/movie",
                resolve: load([
                    '/static/js/transfer/adminlte/movie/movie.js'
                ])
            })
            // 电影编辑
            .state('movie/edit', {
                url: '/movie/edit',
                templateUrl: "/movie/edit",
                resolve: load([
                    '/static/js/transfer/adminlte/movie/movieedit.js'
                ])
            })
    });

    // 在加载该模块的时候调用$state.go('admin/index');,以激活admin/index状态。
    app.run(function ($state) {
        $state.go('admin/index');
    });
/*         * 通过$ocLazyLoad加载页面对应的所需的JS数据         * 通过$q异步加载JS文件数据其中使用的是promise【保护模式】        */function load(srcs, callback) {    return {        deps: [            '$ocLazyLoad', '$q',            function ($ocLazyLoad, $q) {                var deferred = $q.defer();                var promise = false;                srcs = angular.isArray(srcs) ? srcs : srcs.split(/\s+/);                if (!promise) {                    promise = deferred.promise;                }                angular.forEach(srcs,                    function (src) {                        promise = promise.then(function () {                            angular.forEach([],                                function (module) {                                    if (module.name === src) {                                        src = module.module ? module.name : module.files;                                    }                                });                            return $ocLazyLoad.load(src);                        });                    });                deferred.resolve();                return callback ? promise.then(function () {                    return callback();                }) : promise;            }        ]    };}
})();

AngularJS路由设置对象参数规则:

属性 类型 描述
template string   在ng-view中插入简单的html内容
templateUrl string 在ng-view中插入html模版文件
controller string,function / array 在当前模版上执行的controller函数
controllerAs string 为controller指定别名
redirectTo string,function 重定向的地址
resolve object 指定当前controller所依赖的其他模块

效果图:

Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖的更多相关文章

  1. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  2. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  3. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  4. angular 引入ocLazyLoad实现js、controller懒加载

    项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...

  5. angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...

  6. angularjs的懒加载

    1.angularJS懒加载依赖模块 //设置 .config [ '$ocLazyLoadProvider' ($ocLazyLoadProvider) -> # We configure o ...

  7. AngularJS中多个ng-app(手动加载模块)

    1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...

  8. angular懒加载机制 刷新后无法回退解决方案

    今天在项目中遇到一个很奇怪的问题,使用oclazyload来懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无 ...

  9. Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

    刚开始用angularjs做项目的时候,我用的是ng-router,觉得加载并不好.所以就用了ui-router,考虑到在app上网页加载速度太慢,所以我就想到了用懒加载,看下是否能提升性能,提高加载 ...

随机推荐

  1. tornado django flask 跨域解决办法(cors)

    XMLHttpRequest cannot load http://www.baidu.com. No 'Access-Control-Allow-Origin' header is present ...

  2. 透透彻彻IoC(你没有理由不懂!)

    http://www.myexception.cn/open-source/418322.html 引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明 ...

  3. [笔记]--在Windows下配置Git

    安装就不多说了: 1.ls不能显示中文目录 解决办法:在git/etc/git-completion.bash中增加一行: alias ls='ls --show-control-chars --co ...

  4. -_-#【Dom Ready / Dom Load】

    Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...

  5. MyEclipse+Tomcat开发Web项目时修改内容不能及时显示问题解决方法

    问题描述:MyEclipse+Tomcat开发Web项目时,修改的内容不能从浏览器即时显示 原因:缓存问题 解决方法:开启Tomcat的Debug模式 点击如下图红色标记中的图标(Restart th ...

  6. SQLSERVER 中实现类似Mysql的 INSERT ON DUPLICATE KEY UPDATE

    通过SQLServer创建索引时,有一个IGNORE_DUP_KEY的选项,可以类似实现. IGNORE_DUP_KEY = { ON | OFF } 指定对唯一聚集索引或唯一非聚集索引执行多行插入操 ...

  7. EF 批量 添加 修改 删除

    1批量添加    db.T_Investigator.AddRange(list) 2批量删除    db.T_Investigator.RemoveRange(list) 3批量修改   for 循 ...

  8. Error response from daemon:###unable to delete ### (must be forced) - image is being used by stopped

    具体错误:Error response from daemon: conflict: unable to delete f2e2f7b8308b (must be forced) - image is ...

  9. 解析神奇的 Object.defineProperty

    这个方法了不起啊..vue.js是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了. 几行代码看他怎么用 var a= ...

  10. 使用Tortoise结合Git比较两个版本的差异

    1.右键项目,TortoiseGit -------> Diff with previous version 2.单击出分支选择弹窗,进行选择要比较的两个分支 3.比较同个分支的两个不同的版本 ...