Açısal-Meteor - Paket tabanlı tasarıma ng şablonunu nasıl ekleyebilirim?

Question

Angular-Meteor uygulamasına sahibim. Angular şablonlarını ve ilişkili denetleyiciyi bir Meteor paketine paketlemek ve bu şablonları ana paketimize bu paketi ekleyerek enjekte etmek istiyorum.

En iyi yaklaşım nedir?

Güncelleme 2015/08/26 - Ben aşağıda belgelenmiş bir şablon eklemek yolunu bulmuştur. Ancak bir Meteor paketi şablonun Açısal denetleyicisini temel uygulamaya nasıl enjekte eder?

Anahtar bağlantı, Açısal UI yönlendiricidir.

packageprefix adlı paketimi içeren bir temel uygulamam var: packagegename. Ben paket klasörün kök benim koduna sahip bu paket içinde: - Açısal HTML şablonu myPackagedPage.js - myPackagedPage.ng.html benim ana uygulamadan ilişkili Açısal kontrolör

, ben bir rota oluşturma çalıştı şöyle benim Açısal şablonu:

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

}]) 

uygulama başarıyla myPackagedPage.ng.html dosyasını bulur ve bu işler. Ama denetleyici nasıl eklenir?

Bunu paketimde eklemeye çalıştım ancak denetleyici işlevleri çağrılmadı.

Argument 'MyPackagedPageCtrl' is not a function, got undefined 

Answer 1

ben bu şimdi çalışma var:

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

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

bir hata alıyorum. İşte benim için çalışan bir yaklaşım, bir Meteor paketinde bir Açısal Denetleyici + şablonunu içeren uygulama içine enjekte etmektir. Benim package.js ise

, ben ana uygulama erişmek böylece siz, denetleyici dışa gereken bu

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

Not var. Benim pakette

denilen köhne: package.js, interests.ng.html ve interests.js: bigD-çıkarlar, ben kök seviyesinde bu dosyaları var. interests.js Angular denetleyicisini, Anguilar UI yönlendiricisini şablona ve ana uygulamaya bir kenar çubuğu bağlantısını enjekte eder. Meteor Session'ı kullanarak bunu başarır. Bunu yapmanın başka yollarıyla oynadım ama Oturum, çalışılan tek şeydi. Sadece oturum değişken adlarınızı doğru bir şekilde yansıtmaya dikkat edin. Benim ana uygulamanın uygulamasında

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

.Yeni bir meteor paketi oluşturmak ve izlediğinizde kongre yukarıda, bu kontrolörler, rotalarını ve kenar çubuğu bağlantıları olsun açıklanan Yani şimdi

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

: js, Dinamik denetleyicileri ve güzergahları oturumdan böyle yüklendi ana uygulamaya yüklendi.