Angular-Meteor - Come posso includere un modello in design basato su pacchetto?

Question

Ho un'applicazione Angular-Meteor funzionante. Vorrei impacchettare i modelli angolari e il controller associato in un pacchetto Meteor e iniettare questi modelli nella mia applicazione principale aggiungendo quel pacchetto.

Qual è l'approccio migliore?

Aggiornamento 2015-08-26 - Ho capito come aggiungere un modello, documentato di seguito. Ma come fare ad avere un pacchetto Meteor per iniettare il controller angolare del template nell'applicazione di base?

Un collegamento chiave è un router UI angolare.

Ho un'applicazione di base che include il pacchetto denominato pacchettoprefix: nome pacchetto. All'interno di questo pacchetto ho il mio codice nella radice della cartella del pacchetto: myPackagedPage.ng.html - il modello HTML angolare myPackagedPage.js - il regolatore angolare associata

Dal mio principale, ho cercato di creare un percorso per mio modello angolare in questo modo:

angular.module('parentModule',[ 
    'angular-meteor', 
    'ui.router', 
    'angularify.semantic.sidebar' 
]) 

.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', 
function($urlRouterProvider, $stateProvider, $locationProvider){ 
    console.log("app.js config!"); 
    $locationProvider.html5Mode(true); 

    $stateProvider 
     .state('home', { 
      url: '/', 
      templateUrl: 'client/views/home/home.ng.html', 
      controller: 'HomeCtrl' 
     }) 

     .state('myPackagedPage', { 
      url: '/myPackagedPage', 
      templateUrl: 'packageprefix_packagename/myPackagedPage.ng.html', 
      controller: 'MyPackagedPageCtrl' 
     }) 
    ; 

    $urlRouterProvider.otherwise('/'); 

}]) 

l'applicazione rileva correttamente il file myPackagedPage.ng.html e lo rende. Ma come aggiungere il controller?

Ho provato ad aggiungere questo nel mio pacchetto ma le funzioni del controller non vengono chiamate.

console.log("myPackagedPage.js loaded"); 
angular.module('parentModule') 

.controller('MyPackagedPageCtrl', ['$scope', 
    function($scope){ 
     console.log("MyPackagedPageCtrl"); 
    }]) 
; 

ottengo un errore:

Argument 'MyPackagedPageCtrl' is not a function, got undefined 

Answer 1

ho questo ora di lavoro. Ecco l'approccio che funziona per me, per iniettare un modello Angular Controller + in un pacchetto Meteor, nell'applicazione contenente.

Nei miei package.js, ho questo

Package.onUse(function(api) { 
    api.versionsFrom('1.1.0.3'); 
    api.use('angular:angular@1.4.4', 'client'); 
    api.use("urigo:angular@0.9.3", 'client'); 
    api.use("session@1.1.0", 'client'); 

    //api.use('angularui:angular-ui-router@0.2.15', 'client'); 
    api.addFiles('interests.js', 'client'); 
    api.addFiles('interests.ng.html', 'client'); 

    api.export("InterestsCtrl", "client") 
}); 

Nota è necessario esportare il controller, in modo che l'applicazione genitore può accedervi.

nel mio pacchetto, chiamato sgangherato: BigD-interessi, ho questi file al livello principale: package.js, interests.ng.html e interests.js. interest.js inietta il controller Angolare, la rotta del router UI Anguilar al modello e un collegamento barra laterale nell'applicazione padre. Compie questo usando la Sessione Meteor. Ho giocato con altri mezzi per farlo, ma Session è stata l'unica cosa che ha funzionato. Basta fare attenzione a regolare correttamente i nomi delle variabili di sessione.

//add controllers 
var controllers = Session.get("BIGD.controllers"); 
if (!controllers) controllers = {}; 

var interestsCtrlSpec = "'$scope', InterestsCtrl"; 

InterestsCtrl = function($scope){ 
    console.log("InterestsCtrl running"); 
}; 
controllers.InterestsCtrl = interestsCtrlSpec; 
Session.set("BIGD.controllers", controllers); 

//add routes 
var routes = Session.get("BIGD.routes"); 
if (!routes) routes = {}; 
routes.interests = { 
    url: '/interests', 
    templateUrl: 'ramshackle_bigd-interests_interests.ng.html', 
    controller: 'InterestsCtrl' 
}; 
Session.set("BIGD.routes", routes); 

//add sidebar links 
//the key determines sorting order 
var sidebar = Session.get("BIGD.sidebar"); 
if (!sidebar) sidebar = {}; 
sidebar["interests"] = { 
    url: '/interests', 
    templateUrl: 'ramshackle_bigd-interests_interests.ng.html', 
    controller: 'InterestsCtrl', 
    rank: 5 
}; 
Session.set("BIGD.sidebar", sidebar); 

var interestsItem = {label: 'Interests', link: '/interests', icon: "rocket"}; 

In app mia applicazione genitore.js, ho caricato in modo dinamico i controllori e gli itinerari della sessione come questo:

angular.module('bigdam',[ 
    'angular-meteor', 
    'ui.router', 
    'angularify.semantic.sidebar', 
    'nvd3', 
    'leaflet-directive', 
    'ui.router.history' 
]) 

    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', 
    function($urlRouterProvider, $stateProvider, $locationProvider){ 
     //console.log("app.js config!"); 
     $locationProvider.html5Mode(true); 

     //add a static state 
     $stateProvider 
      .state('home', { 
       url: '/', 
       templateUrl: 'client/views/home/home.ng.html', 
       controller: 'HomeCtrl' 
      }); 

     //add the dynamic routes/states from other Meteor packages 
     for (var stateId in routes) { 
      var route = routes[stateId]; 
      $stateProvider 
       .state(stateId, route); 
     } 

     $urlRouterProvider.otherwise('/'); 
    }]) 
; 

//Declare the controllers from plugins 
for (var controllerId in controllers) { 
    var controllerSpec = controllers[controllerId]; 
    var controllerSpecArray = eval("[" + controllerSpec + "]") 
    angular.module('bigdam').controller(controllerId, controllerSpecArray); 
} 

Così ora, quando creo un nuovo pacchetto Meteor, e seguo la convenzione sopra descritta, i suoi controllori, rotte e collegamenti della barra laterale ottengono caricato nell'applicazione principale.