Angular-Meteor - Wie kann ich ng-Vorlagen in paketbasiertes Design einfügen?

Question

Ich habe eine Angular-Meteor-Anwendung arbeiten. Ich möchte Angular-Vorlagen und den zugehörigen Controller in ein Meteor-Paket verpacken und diese Vorlagen in meine Hauptanwendung einfügen, indem ich dieses Paket hinzufüge.

Was ist der beste Ansatz?

Update 2015-08-26 - Ich habe herausgefunden, wie Sie eine Vorlage hinzufügen, die unten dokumentiert ist. Aber wie kann man mit einem Meteor-Paket den Angular-Controller der Vorlage in die Basisanwendung einfügen?

Eine wichtige Bindung ist Angular UI-Router.

Ich habe eine Basisanwendung, die mein Paket packageprefix enthält: Paketname. Innerhalb dieses Pakets ich meinen Code in der Wurzel des Paketordners habe: myPackagedPage.ng.html - das Angular HTML-Template myPackagedPage.js - der zugehörigen Winkelregler

Aus meiner Hauptanwendung habe ich versucht, einen Weg zur Schaffung mein Eckige Vorlage wie folgt:

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('/'); 

}]) 

die Anwendung findet erfolgreich die myPackagedPage.ng.html Datei und macht es. Aber wie fügt man den Controller hinzu?

Ich habe versucht, dies in meinem Paket hinzuzufügen, aber die Controller-Funktionen werden nicht aufgerufen.

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

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

Ich erhalte eine Fehlermeldung:

Argument 'MyPackagedPageCtrl' is not a function, got undefined 

Answer 1

ich jetzt diese Arbeit haben. Hier ist der Ansatz, der für mich funktioniert, ein Angular Controller + Template in ein Meteor-Paket in die enthaltene Anwendung zu injizieren.

In meinem package.js, ich habe diesen

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

Hinweis Sie Ihren Controller exportieren müssen, so dass die übergeordnete Anwendung auf sie zugreifen kann.

In meinem Paket, genannt marode: BigD-Interesse, habe ich diese Dateien auf der Root-Ebene: package.js, interests.ng.html und interests.js. interests.js injiziert den Angular-Controller, die Anguilar UI-Router-Route zur Vorlage und eine Sidebar-Verknüpfung in die übergeordnete Anwendung. Dies wird durch die Meteor Session erreicht. Ich spielte mit anderen Mitteln, aber Session war das einzige, was funktionierte. Seien Sie vorsichtig, wenn Sie die Namen der Sitzungsvariablen richtig definieren.

//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 meinen Eltern App-Anwendung.js, ich dynamisch geladen, die Controller und Routen aus der Sitzung wie folgt aus:

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

So, jetzt, wenn ich eine neue Meteor-Paket erstellen, und folgen Sie den Kongress oben beschrieben, seine Controller, Routen und Sidebar Links in die Hauptanwendung geladen.