angular实现Controller和Template 按需加载

目前工作项目中遇到一个很大的问题，就是app首屏渲染速度过慢，app是原生webview嵌套angular（SPA单页应用）开发的。为了解决这个问题准备从三方面入手：

• 服务端压缩传输内容（利用javaweb Filter 实现gzip压缩）
• android端，自定义webview缓存，启动app时如果服务端未发生改变，直接从android本地加载html。
• 实现angular 按需加载Controller和Template

今天主要给大家说明如何实现angular按需加载。由于我们工作环境使用的是angular1 ，因此采用angular+angular-ui-router+angularAMD +requirejs来实现。

require.js 文档：我比较喜欢阮一峰老师的网站，链接如下：http://www.ruanyifeng.com/blog/2012/11/require_js.html

angular-ui-router：https://github.com/angular-ui/ui-router
angularAMD:https://github.com/marcoslin/angularAMD

下面具体工程结构如下：

image.png

其中index.html 使我们的SPA工程页面。js文件夹是我们需要的js类库文件，controller是我们的angular控制器目录，template使我们的angular模板目录。
由于浏览器的同源策略，为了展示我们的结果，需要安装：

npm install live-server -g

首先index.html如下,引入requirejs 来控制加载模块：

    
        
    
    
        

            
world
            首页
            第二页
             
        

    

main.js 配置进行requirejs。代码如下：

/** require js 入口 */
require.config({

    baseUrl: '',//根目录
    // 模块对应的路径
    paths:{
        'angular':'js/angular',
        'angular-route': 'js/angular-route',
        'angularAMD':'js/AMD/angularAMD',
        'angularUiRouter':'js/angular-ui-router'
    },
  // 不兼容模块，有些模块必须在前一个模块加载完成之后，才可加载
    shim:{
        'angular':{ exports: "angular" },
        'angularAMD':['angular'],
        'angular-route':['angular'],
        'angularUiRouter':['angular']
    },
    // 加载完成之后执行app.js
    deps:['app']

})

app.js 如下：

define([
    'angularAMD',
    'angularUiRouter'
], function(angularAMD) {
   
    var app = angular.module('webapp',['ui.router'])
    app.config(($stateProvider, $urlRouterProvider)=>{

        $urlRouterProvider.otherwise('/index')
        $stateProvider.state("index", angularAMD.route({
            url: "/index",
            templateUrl: "template/index.html",
            controllerUrl: "controllers/indexController.js"
        }))
        .state("index2", angularAMD.route({
            url: "/index2",
            templateUrl: "template/index2.html",
            controllerUrl: "controllers/indexController1.js"
        }))

    })

    // 初始化时进入index 状态
    app.run(function($state) {
            $state.go('index');
     });
    return angularAMD.bootstrap(app)
    
});

上面就是完成了配置，现在我们利用live-server来运行我们的网页：

image.png

打开谷歌浏览器，我们可以看到，我们只加载了index.html,indexController.js ,并没有加载我们路由中配置的indexController1.js，index2.html：

image.png

然后点击我们的第二页，这时发现我们才会加载indexController1.js，index2.html。实现了按需加载。

image.png