Angular 从局部视图延迟加载 js 文件

Question

我的部分视图中有一个 js 文件。加载该部分时如何动态加载它？

我的目录结构是

app

---css

------style.css

----js

-------app.js

-------appRotes.js

-------script.js

----views

-------home.html

-------about.html

----index.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myapp">

<p><a href="#/">Main</a></p>

<a href="#about">Red</a>

<div ng-view></div>

<script src="js/app.js"></script>
<script src="js/appRoutes.js"></script>
</body>
</html>

我的app.js

angular.module("myapp", ["myapp.routes"]);

我的appRoutes.js

angular.module("myapp.routes",["ngRoute"]).
config(function($routeProvider, $locationProvider){
    $routeProvider.
        when("/",{
            templateUrl : "views/home.html"
        })
        .otherwise({
        redirectTo: '/'
    })
    .when("/b",{
            templateUrl : "views/about.html"
        })
        .otherwise({
        redirectTo: '/'
    });
      
    
});

我的about.html

<h1>About</h1>
<script src="script.js"></script>

Answer 1

可以使用oclazyload进行动态js文件加载使用 ngRoute

$routeProvider  

      .when('/time',
            {
                controller: 'timeController', 
                templateUrl: 'views/home.html', 
                resolve: {
                    lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load([{
                            name: 'myApp',
                            files: ['js/AppCtrl.js']
                        }]);
                    }]
                }
            })

使用ui router

$stateProvider.state('index', {
  url: "/", // root route
  views: {
    "lazyLoadView": {
      controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
      templateUrl: 'views/home.html'
    }
  },
  resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
      // you can lazy load files for an existing module
             return $ocLazyLoad.load('js/AppCtrl.js');
    }]
  }
});

你可以使用 bower 安装它

bower install oclazyload --save

Angular 从局部视图延迟加载 js 文件

Angular lazy load js file from partial view

html

javascript

lazy-loading

angularjs