Inject Modul Abhängigkeit (wie Plugin) nur bei Bedarf AngularJS

Question

Ich habe 2 Seiten (Ich verwende nicht die angular 's routing - Diese Einschränkung).

In einer von ihnen möchte ich die Richtlinie ui-grid wie in diesem Beispiel verwenden: ist

var app = angular.module('myApp', ['ui.grid']); 
 
app.controller('mainCtrl', function($scope) { 
 
    $scope.myData = [ 
 
    { 
 
     "firstName": "Cox", 
 
     "lastName": "Carney", 
 
     "company": "Enormo", 
 
     "employed": true 
 
    }, 
 
    { 
 
     "firstName": "Lorraine", 
 
     "lastName": "Wise", 
 
     "company": "Comveyer", 
 
     "employed": false 
 
    }, 
 
    { 
 
     "firstName": "Nancy", 
 
     "lastName": "Waters", 
 
     "company": "Fuelton", 
 
     "employed": false 
 
    } 
 
    ]; 
 
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> 
 
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script> 
 
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="mainCtrl"> 
 
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div> 
 
    </div> 
 
</div>

Meine Frage, ob es einen Weg gibt nicht die ui-grid Abhängigkeit der App zu injizieren auf jeden Fall aber nur wenn ich es brauche.

Etwas wie:

app.controller('mainCtrl', function($scope) { 
    app.$inject('ui-grid'); 
}); 

aktualisieren

Ich habe versucht zu tun:

var ui_grid = $injector.get('ui-grid'); 

Aber ich habe einen Fehler bekam:

Unknown provider: ui-gridProvider <- ui-grid

http://errors.angularjs.org/1.2.26/$injector/unpr?p0=ui-gridProvider%20%3C-%20ui-grid

Answer 1

Kern Angular API diese Funktion nicht zur Verfügung stellt . ocLazyLoad ist die beliebte Bibliothek zum verzögerten Laden von Modulen und Komponenten in Angular.

können Sie weitere Informationen auf ihrer Seite finden: https://oclazyload.readme.io

oder die GitHub-Repository: https://github.com/ocombe/ocLazyLoad

Answer 2

$injector is used to retrieve object instances as defined by provider, instantiate types, invoke methods, and load modules.

var $http = $injector.get('$http'); 

Um Ihren Anwendungsfall abzuschließen:

app.controller('mainCtrl', function($scope, $injector) { 
    $scope.myData = []; 
    if($scope.loadGrid) { 
     var ui_grid = $injector.get('ui-grid'); 
     ui_grid.load($scope.myData); //`.load` is just a guess, obviously read your docs 
    } 
}); 

Weitere Informationen finden Sie unter:

• https://docs.angularjs.org/api/auto/service/$injector
• https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

Answer 3

In einem AngularJS für Modul Injizieren Sie es nach dem Modulnamen wie du injizieren sollen.

Aber Sie haben nur wenige Schritte können es verwenden:

1. Installieren Sie es mit diesem 2-Wege npm oder bower wie unten:

   npm install angular-ui-grid

   bower install angular-ui-grid

2. Dann fügen a <script> zu Ihrem Index.html:

   <link rel="stylesheet" type="text/css"href="/bower_components/angularui-grid/ui-grid.css" /> 
   <script src="/bower_components/angular-ui-grid/ui-grid.js"></script> 
   

   • Wenn Sie npm, sollten Sie den Quellpfad zu /node_modules/ ändern.

Danach jedes Modul Schritte können Sie den Zugriff müssen Sie wie unten Modul:

angular.module('my.module', ['ui.grid']).

Answer 4

In meinem Projekt boote ich eckige Module dynamisch mit angular.bootstrap(). Ich habe mehrere Seiten mit verschiedenen Modulen.

Beispiel:

var app = angular.module('demo', []) 
 
.controller('WelcomeController', function($scope) { 
 
    $scope.greeting = 'Welcome!'; 
 
}); 
 
angular.bootstrap(document, ['demo']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-controller="WelcomeController"> 
 
    {{greeting}} 
 
</div>

Answer 5

Core-Angular-API diese Funktion nicht zur Verfügung stellen, verwenden Sie einfach 'erfordert' Eigenschaft des Moduls @ Abschnitt Eigenschaften @https://code.angularjs.org/1.4.7/docs/api/ng/type/angular.Module

var app = angular.module('myApp'); 

//Page 1 JS 
//change below statement as per requirement in different pages 
app.requires = ['ui.grid']; 
app.controller('mainCtrl1', function($scope) { 

} 

//Page 2 JS 
app.requires = ['ngResource', 'ui.bootstrap', 'ui.calendar']; 
app.controller('mainCtrl2', function($scope) { 

} 

ocLazyLoad ist auch eine gute Lösung, aber ich denke "erfordert" pro Perty wird Ihr Problem ohne viel Aufwand lösen.