我有一个Angular-Meteor应用程序正在运行。我想将Angular模板和关联的控制器打包到Meteor包中,并通过添加该包将这些模板注入我的主应用程序。
什么是最好的方法?
更新2015-08-26 - 我想出了如何添加模板,如下所示。但是如何让Meteor软件包将模板的Angular控制器注入基础应用程序?
关键搭配是Angular UI-router。
我有一个基本应用程序,其中包含名为 packageprefix:packagename 的程序包。在这个包中,我的代码位于包文件夹的根目录中: myPackagedPage.ng.html - Angular HTML模板 myPackagedPage.js - 关联的Angular控制器
在我的主应用程序中,我尝试创建一个指向Angular模板的路径,如下所示:
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
答案 0 :(得分:4)
我现在有这个工作。以下是将Meular包中的Angular Controller +模板注入到包含的应用程序中的方法。
在我的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")
});
请注意,您必须导出控制器,以便父应用程序可以访问它。
在我的名为 ramshackle:bigd-interest 的软件包中,我在根级别拥有这些文件: package.js , interests.ng.html < / strong>,和 interests.js 。 interests.js 将Angular控制器,Anguilar UI路由器路由注入模板,并将侧栏链接注入父应用程序。它通过使用Meteor Session实现了这一点。我玩过其他方式,但Session是唯一有效的方法。请注意正确确定会话变量名称的范围。
//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"};
在我的父应用程序 app.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);
}
现在,当我创建一个新的Meteor软件包并遵循上述约定时,其控制器,路由和侧边栏链接将加载到主应用程序中。