Angular-Meteor - Jak dodać szablon ng do projektu opartego na pakietach?

Question

Mam działającą aplikację Angular-Meteor. Chciałbym spakować szablony kątowe i powiązany kontroler do pakietu Meteor, i wprowadzić te szablony do mojej głównej aplikacji, dodając ten pakiet.

Co jest najlepszym rozwiązaniem?

Aktualizacja 2015-08-26 - Wymyśliłem, jak dodać szablon, udokumentowany poniżej. Ale w jaki sposób mieć pakiet Meteor wstrzyknąć kontroler kątowy szablonu do bazy?

Kluczowym węzłem jest Angular UI-router.

Mam aplikację bazową, która zawiera mój pakiet o nazwie packageprefix: nazwa_pakietu. Wewnątrz tego pakietu Mam kod w głównym folderze pakietu: myPackagedPage.ng.html - kątowej HTML szablonu myPackagedPage.js - powiązany kątowa kontrolera

Z moim głównym aplikacji, próbowałem tworząc drogę do Mój szablon kątowy:

Aplikacja pomyślnie znajduje plik myPackagedPage.ng.html i wyświetla go. Ale jak dodać kontroler?

Próbowałem dodać to w moim pakiecie, ale funkcje kontrolera nie są wywoływane.

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

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

pojawia się błąd:

Argument 'MyPackagedPageCtrl' is not a function, got undefined 

Answer 1

mam ten pracuje teraz. Oto podejście, które działa dla mnie, aby wprowadzić szablon Angular Controller + w pakiecie Meteor, do aplikacji zawierającej.

W moich package.js, mam ten

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

Uwaga należy wyeksportować swój kontroler, dzięki czemu aplikacja rodzic może go otworzyć.

W moim pakiecie, zwany zdezelowany: bigd-interesy, mam te pliki na poziomie root: package.js, interests.ng.html i interests.js. interests.js wstrzykuje kontroler Angular, ścieżkę Anguilar UI-router do szablonu i link paska bocznego do aplikacji nadrzędnej. Osiąga to, wykorzystując sesję Meteorytów. Grałem z innymi sposobami, ale Sesja była jedyną rzeczą, która działała. Po prostu zachowaj ostrożność, aby odpowiednio zawęzić nazwy zmiennych sesji.

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

w mojej aplikacji macierzystej aplikacji.js, dynamicznie ładowane kontrolerów i tras z sesji tak:

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

Więc teraz, gdy tworzę nowy pakiet Meteor i postępuj konwencja opisano powyżej, jej sterowniki, trasy i linki bocznym dostać ładowane do głównej aplikacji.