angularjs 路由异步加载js

这个问题首要出现在当我把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 }

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

angularjs 路由 异步加载js

猜你喜欢

angularjs 路由异步加载js