Develop Reference

Meteor helpers not available in Angular template

I am learning Meteor and I'm trying to add internationalization support with the tap:18n package. Unfortunately, the template helper function _ is not availble inside Angular modules. For example
<div>{{_ "foo"}}</div>
works, but does not when using it inside a module template :
> index.html
<div ng-app="app" ng-include="'foo.ng.html'">
> foo.ng.html
<div ng-app="bar">
<div>{{_ "bar"}}</div>
</div>
note: app is declared inside foo.js as angular.module('app', ['angular-meteor']);, in the project root level.
Is it possible to make helpers available inside Angular modules?
(note: see referenced issue.)
** Edit **
Same thing happens when trying to render package templates inside another template :
> index.html
<section ng-app="users"
ng-include="'users/usersession.ng.html'">
</section>
> users/usersession.ng.html
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}} <!-- here -->
</ul>
Then I get Syntax Error: Token '>' not a primary expression at column 1 of the expression [> loginButtons] starting at [> loginButtons].
Note: the module users is defined and everything works fine without the {{> loginButtons}} expression.

You can use meteor templates inside angular. Try something like:
<meteor-include src="myTemplate"></meteor-include>
Your template would be something like:
<template name="myTemplate">
<div>{{_ "foo"}}</div>
</template>
Remember when naming .html files, the angular templates will be name.ng.html and the meteor templates will just be name.html

Dynamically generated navbar and AngularJS

I could not find an easy way to explain the following, so I apologize if it is not clear enough.
I have a navigation bar where each item is a category of articles. The navigation item are read from database and can be modified from the back-office.
I get the categories via a AngularJS controller :
app.controller('ApiController', ['$scope', '$http', function($scope, $http) {
$http.get('/categories')
.success(function(categories) {
$scope.categories = categories;
});
}]);
<div class="collapse navbar-collapse" id="target-navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="category in categories">
<% category.name %>
</li>
</ul>
</div>
In the body of the page, I am using another controller to get articles of a given category but I can't find a way to make the navbar communicate with the articles controller and pass the category of the clicked button.
Thanks for help

I think what you want for the API is a service not a controller. Generally in Angular controllers aren't meant to be sending a bunch of data between each other. Central sets of calls and communications that multiple controllers depend on are put into services. If you were to extract your API calls to a service you could inject that service into that controllers that need to deal with it as necessary. But without seeing more of the code in question it's hard to recommend a good way to do that.

dummy data not being displayed in ng-repeat

New to angular, and did the codeschool course + the angular video from railscasts.
so this is my controller in the html file
<div ng-controller="ProviderDataCtrl">
<ul>
<li ng-repeat="entry in entries">
{{entry.name}}
</li>
</ul>
</div>
and this is the javascript file holding the controller
(function(){
app.controller('ProviderDataCtrl',function($scope){
$scope.entries = [
{name:"test"}
{name:"test2"}
{name:"test3"}
]
}]);
})();
for some reason in my html file, it just shows as {{entry.name}} and only 1 of it.
I cant seem to figure out the problem. Did i define the controller wrong in the js file??
Thanks

app is undefined
First define your angular app before using it
var app = angular.module('test',[]);
Demo Plunkr

Using routeProvider when not on site root

Sorry if I'm missing something obvious, very new to Angular.
I'm running an application on this page: //hosted.demo.ca/md/SitePages/Home.aspx
I'm trying to set up the routing on the application but the page is just rendering blank with no errors in console.
routeProvider:
var spApp = angular.module('spApp', [])
.config(function($routeProvider){
$routeProvider.when('/userView',
{
templateUrl: 'partials/userView.html',
controller: 'userCtrl'
})
});
and my html like such:
<div id="mdContainer" ng-cloak>
<!-- Navigation -->
<div id='mdSidebar'>
<ul>
<li id="menuHome"><a href='#'><span>Home</span></a></li>
<li id="menuUsers"><a href='#/userView'><span>Users</span></a></li>
<li id="menuGroups"><a href='#'><span>Groups</span></a></li>
<li id="menuSites"><a href='#'><span>Sites</span></a></li>
<li id="menuReports"><a href='#'><span>Reports</span></a></li>
</ul>
</div>
<!-- Main view -->
<ng-view></ng-view>
</div>

Have you added the route module? Please try using something like:
var spApp = angular.module('spApp', ['ngRoute'])
See here for more information about this. In newer versions of Angular the route functions were moved to a separate module.
Also I can tell you from personal experience that it is very easy to forget to add the angular-route.js file into your html file using something like:
<script src="path/to/angular-route.js">
If you use bower you can easily set this up with:
bower install angular-route

Dynamically load modules angular

I'm looking for a way to load a module (js, css and html) with just one directive anytime during the app life.
<my-module id="contacts"></my-module>
And the template of this directive generates
<my-module id="contacts">
<link type="stylesheet" href="modules/contacts/contacts.css">
<script type="text/javascript" src="modules/contacts/contacts.js"></script>
<ng-include src="modules/contacts/contacts.html"></ng-include>
</my-module>
And the .js file creates a new angular module
// modules/contacts/contacts.js
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });
And the '.html' uses a controller in this module
// modules/contacts/contacts.html
<ul ng-controller="ContactsCtrl">
<li ng-repeat="contact in contacts">{{ contact.name }}</li>
</ul>
It wont work because the page's module <html ng-app="my-app"> does not depends on my-contacts module. So I would like every module to inject itself as a my-app dependency.
I've found every module (object returned by angular.module) contains a requires array with it's dependencies. I've injected my-contacts into that array and this works:
// modules/contacts/contacts.js
angular.module('my-app').requires.push('my-contacts');
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });
But I can't find this property on the documentation. Is it standard or it can change anytime? anyone knows?
Update
To be clear, this is not to load a single module with a single component, this is meant to load a entire application, imagine it like a launcher (like MacOS dockbar or Ubuntu's unity sidebar) with dynamically added icons and when one of this icons are clicked it should run the module. But I don't know at the webpage start which apps this launcher should be able to launch and I need to add more applications dynamically. As each app can has it's own directives and services I use angular modules as apps.
<body ng-app="my-app">
<ul>
<li ng-repeat="module in modules">
<button ng-click="selectedApp = module.id">{{ module.name }}</button>
</li>
</ul>
<my-module id="{{ selectedApp }}"></my-module>
</body>

I'm not sure you're trying to abstract the code so much.
What you should be able to do:
Make a module
Put a directive in the module with your contacts list
Inject the module into your page. And use the contact list.

Dependencies are usually the second argument of a module definition. i.e:
angular.module('my-app', ['my-contacts']);
Is this what you were referring to? The dependencies and how to inject them correctly?