2017-01-29 4 views
0

У меня есть файл js на моем частичном изображении. Как загрузить его динамически, когда эта частичная загрузка будет загружена?Угловая ленивая загрузка js-файла с частичного представления

Моя структура каталогов

приложение

--- CSS

------ style.css

---- JS

- ------ app.js

------- appRotes .js

------- script.js

---- просмотров

------- 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> 

Мой ар p.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> 

ответ

0

можно использовать 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 install oclazyload --save

Смежные вопросы