Angular-Meteor - How to include ng template in batch design?

Question

I have an Angular-Meteor app. I would like to pack the Angular templates and its associated controller into the Meteor package and paste these templates into the main application by adding this package.

What is the best approach?

Update 2015-08-26 - I figured out how to add the template described below. But how to install the Meteor package in the Angular template template in the base application?

Key enablement is an Angular UI router.

I have a basic application that includes my package named packageprefix: packagename . Inside this package, I have the code in the root of the package folder: myPackagedPage.ng.html - Angular HTML template myPackagedPage.js - linked Angular controller

In my main application, I tried to create a route to my Angular template as follows:

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

The application successfully finds the myPackagedPage.ng.html file and displays it. But how to add a controller?

I tried to add this to my package, but the controller functions are not called.

 console.log("myPackagedPage.js loaded"); angular.module('parentModule') .controller('MyPackagedPageCtrl', ['$scope', function($scope){ console.log("MyPackagedPageCtrl"); }]) ; 

I get an error message:

 Argument 'MyPackagedPageCtrl' is not a function, got undefined 

Answer 1

It works for me now. Below is an approach that works for me to add the Angular Controller + template to the Meteor package in the containing application.

In my .js package i have this

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

Please note that you must export your controller so that the parent application can access it.

In my package called ramshackle: bigd-interest , I have these files at the root level: package.js , interests .ng.html and interests .js . interest.js embeds the Angular controller, the Anguilar UI route in the template, and the sidebar link in the parent application. This is achieved through a meteor session. I played with other ways, but the session was the only one that worked. Just be careful to use session variable names correctly.

 //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 my parent app.js application , I dynamically loaded controllers and routes from the session as follows:

 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 now, when I create a new Meteor package and follow the agreement described above, its controllers, routes and sidebar links are loaded into the main application.