angularjs 路由异步加载js

angularjs 异步加载js 有两种方法

第一种使用$q 和 requireJS 加载

这个问题首要出现在当我把require 引入项目中是，希望做到点击路由时加载相应的页面html和 js.

起初我是将 route 的 controller 设置为 require（‘controller.js’）来异步加载，

当然，问题是不可能这么简单的，肯定要出现一些问题。

这样就出现一个问题，当我路由子页面中出现与数据相关的初始化时，第一次跳转是正常的，此时跳到其他页面，再跳回该页面时 controller的数据却无法获取。

导致页面空白。

$routeProvider.when('/quick_set', {
           templateUrl: 'layout/quick_set.html',
           controller: require('quick_set')
  })

关于这个问题的解决我也看了很多的博客，找到了以下的解决方案。

利用 angularjs 内置的 $q 服务，类似于 es6 中的 promise，即创建异步加载，在加载完成后返回 promise ，通过promise 来判断是否成功加载js，成功加载之后再赋给controller，

程序写在 route 的 resolve 里。

1 $routeProvider.when('/quick_set', {
2                 templateUrl: 'layout/quick_set.html',
3                 controller: 'quick_set',
4                 resolve: {
5                     loadController: app.asyncJS('quick_set')  //在这里 加入 异步请求
6                 }
7             })

 1 app.asyncJS = function (js) {
 2   return function ($q) {
 3     　　var deferred = $q.defer();
 4      　require([js], function (controller) {
 5               $controllerProvider.register(js, controller);      //由于是动态加载的controller，所以要先注册，再使用
 6               deferred.resolve(); //将 返回的promise标记为 resolve 状态，即 成功状态，reject 问拒绝状态。
 7         });
 8        return deferred.promise;
 9   }
10 }

这样就成功的解决了这个问题。

第二种使用ocLazyLoad.js 配合 ui-router 加载。

首先在页面引入 ocLazyLoad.js 、ui-router.

然后建立 module

var app = angular.module('myapp', ['ui.router', 'oc.lazyLoad']);

    function asyncJS(js) { // 此处可以将路由 异步加载js 提到 公共部分。
        return ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load('/luci-static/resources/modules/controllers/' + js + '.js'); //此为 加载路径
        }]
    }

    $urlRouterProvider.when('', '/quickSet');

    $stateProvider.state('quickSet', {
        url: '/quickSet',
        templateUrl: '/luci-static/resources/layout/quickSet.html',
        controller: 'quickSet', //此处函数名与加载的函数名一致。
        resolve: {  //在resolve 中 调用 
            loadController: asyncJS('quickSet')
        }
    })

这样当路由执行时，才加载子页面的controller。

子页面的controller 必须以重新绑定 app的congtroller 才会生效。

此为子页面controller 的头部

angular.module('myapp', []).controller('quickSet', ['$scope', '$http', '$log', function ($scope, $http, $log) {}

angularjs 路由 异步加载js

angularjs 路由异步加载js