9

Ho 2 pagine (non uso lo angular di routing - Questo vincolo).Iniettare la dipendenza del modulo (come plug-in) solo se necessario AngularJS

In uno di essi voglio utilizzare la direttiva ui-grid come in questa demo:

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>

La mia domanda è se c'è un modo per non iniettare il ui-grid dipendenze al app in ogni caso, ma solo quando ne ho bisogno.

Qualcosa di simile:

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

Aggiornamento

ho cercato di fare:

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

Ma ho un errore:

Unknown provider: ui-gridProvider <- ui-grid

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

+0

Duplicato di http://stackoverflow.com/q/13724832? –

+0

@AT no non lo è. La mia domanda riguarda l'utilizzo di un altro modulo e le sue direttive in 'view' non nel' controller'. –

+0

Presumo anche un duplicato di http://stackoverflow.com/questions/29617903/condially-inject-angular-module-dependency e http://stackoverflow.com/questions/27721530/conditional-injection-of-a-service -in-angularjs. Nel caso di Mosh è una direttiva non un servizio – Tony

risposta

0

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

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

per completare il vostro caso d'uso:

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 
    } 
}); 

Per ulteriori informazioni si veda:

+0

Che se voglio usare '$ http' nel controller. La mia domanda è di iniettare un altro 'modulo' con le direttive. –

+0

Sì, '$ http' è solo un esempio. Sostituisci '$ http' con qualsiasi altro modulo ti piaccia. –

+0

_'.load 'è solo un'ipotesi, ovviamente leggi i tuoi documenti 'ui-grid' Non penso che tu possa inserire il modulo e usarlo in questo modo. Inoltre, viene generata un'eccezione (vedere l'aggiornamento della mia domanda) –

0

In angularJS per il modulo di iniettare la somministri non dopo il nome del modulo come avete fatto.

Ma avete pochi passi è possibile utilizzare per esso:

  1. installarlo con questo 2 vie npm o bower come di seguito:

    npm install angular-ui-grid

    bower install angular-ui-grid

  2. Quindi aggiungere a <script> nel tuo indice.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> 
    
    • Se si utilizza npm, si dovrebbe cambiare il percorso di origine per /node_modules/.

Dopo questa procedura ogni modulo si può avere accesso a voi modulo come di seguito:

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

+0

Grazie per la risposta, ma non è quello che ho chiesto. So come inserire il modulo nella mia app. La mia domanda riguarda ** l'iniezione ** dinamica. Per favore leggi di nuovo la domanda. –

+1

scusa a causa della mia mancanza di comprensione! puoi controllare [angularjs-requirejs-lazy-controller] (https: // github.com/matys84pl/angularjs-requirejs-lazy-controller). forse essere utile –

+0

Sembra carino! Lo saprò. Grazie.. –

1

Nel mio progetto ho eseguito il boot dinamico dei moduli angolari utilizzando angular.bootstrap(). Ho diverse pagine con diversi set di moduli.

Esempio:

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>

2

core API angolare invece fornisce questa funzionalità, è sufficiente utilizzare 'richiede' di proprietà del modulo @ sezione Proprietà @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 è anche una buona soluzione, ma suppongo che 'richiede' pro Perty risolverà il tuo problema senza molti sforzi.