Angular Lazy Load Js-Datei von Teilansicht

Ich habe eine Js-Datei in meiner Teilansicht. Wie würde ich es dynamisch laden, wenn dieses Partial geladen ist?Angular Lazy Load Js-Datei von Teilansicht

Meine Verzeichnisstruktur ist

App

--- css

------ style.css

---- js

- ------ app.js

------- AppRotes Js

------- script.js

---- Ansichten

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

Meine ap p.js

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

Mein 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: '/' 
    }); 


});

Mein about.html

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

Quelle

2017-01-29 Kodanda Rama Durgarao poluri

oclazyload für dynamische js Datei Laden mit ngRoute

verwenden können

$routeProvider 

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

mit 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'); 
    }] 
    } 
});

Sie können es Bower mit installieren

bower install oclazyload --save

Quelle

2017-01-29 11:06:14

Angular Lazy Load Js-Datei von Teilansicht

Antwort

Verwandte Themen