• angular中按需加载js


      按需加载估计是大家在使用angular之后最想解决的问题吧,因为angular的依赖机制,导致了必须在第一次加载的时候就加载所有js文件,小项目还好,稍大一点的项目如果有上百个js文件,不管是从效率还是写法都相当不好。所以这次我使用了$ocLazyLoad来实现懒加载。文档看这里

    1.引入js文件,并注入$ocLazyLoad服务

    <script src="lib/ocLazyLoad.min.js"></script>

    2.对$ocLazyLoad进行基础配置

    angular.module('starter')
    .config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
        function ($provide, $compileProvider, $controllerProvider, $filterProvider) {
            app.controller = $controllerProvider.register;
            app.directive = $compileProvider.directive;
            app.filter = $filterProvider.register;
            app.factory = $provide.factory;
            app.service = $provide.service;
            app.constant = $provide.constant;
        }
    ])

    3.根据模块配置路由

    $stateProvider
        .state('login', {
            url: '/login',    
            templateUrl: 'template/login/login.html',
            controller:'loginCtrl',
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load("template/login/login.js");
                }]
            }
        })

       关于第三方js文件ocLazyLoad就无能为力了,它是用来懒加载angular module的,而不是第三方的js库。所以如果考虑到这些可以使用requireJS来加载,之所以在这个项目中没有用过是因为ocLazyLoad比起来更小一些,压缩过后只有15k大小,而且requireJS移植性不好且侵入性高(其实我也不知道什么意思,哈哈哈)。还有一点主要的是这个一次配置不用处处引用,挺契合angular模块化的特点的。至于requireJS的使用,只有下次用过了再来补充吧。

    -----------------------------2016-12-15--------------------------------------

      上一次使用ocLazyLoad是在ionic项目中,这次在angularWEB项目中使用,搭建的时候出了angular is not defined的问题,怎么找也解决不掉问题,结果最后改变了一下ui-router和oclazyload的引入位置,问题解决~记住一定要先引入ui-router再引入oclazyload啊

  • 相关阅读:
    MySQL for Linux错误: ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
    Git SSH Key 生成步骤
    百度陆奇最新内部演讲:如何成为一个优秀的工程师?
    Apple使用Apache Mesos重建Siri后端服务
    剖析Elasticsearch集群系列第一篇 Elasticsearch的存储模型和读写操作
    ElasticSearch VS Solr
    聊聊基于Lucene的搜索引擎核心技术实践
    如何安全的存储用户密码?
    MySQL 性能管理及架构设计指南
    大牛是怎么思考设计MySQL优化方案
  • 原文地址:https://www.cnblogs.com/zmc-change/p/6072847.html
Copyright © 2020-2023  润新知