Angular-Meteor - Как включить шаблон ng в пакетный дизайн?

Question

У меня есть приложение Angular-Meteor. Я хотел бы упаковать угловые шаблоны и связанный с ними контроллер в пакет Meteor и вставить эти шаблоны в основное приложение, добавив этот пакет.

Что лучше всего подходит?

Обновление 2015-08-26 - Я выяснил, как добавить шаблон, задокументированный ниже. Но как иметь пакет Meteor, вставлять угловой контроллер шаблона в базовое приложение?

Ключевым элементом является Угловой UI-маршрутизатор.

У меня есть базовое приложение, которое включает мой пакет с именем packageprefix: packagename. Внутри этого пакета у меня есть мой код в корне папки пакета: myPackagedPage.ng.html - Угловая шаблон HTML myPackagedPage.js - ассоциированная Угловой контроллер

Из моего основного приложения, я попытался создать маршрут к мой Угловой шаблон так:

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

}]) 

Приложение успешно находит файл myPackagedPage.ng.html и делает его. Но как добавить контроллер?

Я попытался добавить это в свой пакет, но функции контроллера не вызываются.

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

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

Я получаю сообщение об ошибке:

Argument 'MyPackagedPageCtrl' is not a function, got undefined 

Answer 1

Я это работает. Вот такой подход, который работает для меня, чтобы ввести шаблон Angular Controller + в пакет Meteor, в содержащее приложение.

В моем package.js, у меня есть

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

Примечания вы должны экспортировать свой контроллер, так что родительское приложение может получить доступ к нему.

В моем пакете, называется ветхий: bigd-интересы, у меня есть эти файлы на корневом уровне: package.js, interests.ng.html и interests.js. интересов.js вводит угловой контроллер, маршрут UI-маршрутизатора Anguilar к шаблону и ссылку боковой панели в родительское приложение. Это достигается с помощью Метеорной сессии. Я играл с другими способами, но сеанс был единственным, что сработало. Просто будьте осторожны, чтобы правильно использовать имена переменных сеанса.

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

В приложение моего родительского приложения.JS, я динамически загружен контроллеры и маршруты из сеанса, как это:

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

Так что теперь, когда я создаю новый пакет Метеора, и следовать конвенции описаны выше, его контроллеры, маршруты и боковая панель ссылки получить загружается в основное приложение.