We Keep Coding

Loading modules in Angularjs

I have a problem trying to load some modules.
controller1.js:
angular.module('LPC')
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
And app.js:
var app = angular.module('mis_peliculas', []);
app.config(function($routeProvider){
$routeProvider
.when("/pagina_principal",{
templateUrl: "views/pagina_principal.html",
controller: "lista_peliculas_controller"
})
.when("/lista_peliculas",{
templateUrl: "views/lista_peliculas.html",
controller: "lista_peliculas_controller"
})
.when("/lista_series",{
templateUrl: "views/lista_series.html",
controller: "lista_series_controller"
})
.otherwise({
redirectTo: "/pagina_principal"
})
});
The console says that there is a problem with the injector.
Can you find the error?

You must add angular-route.js . Reference
The ngRoute module provides routing and deeplinking services and
directives for AngularJS apps.
How do you fix it?
var app = angular.module('mis_peliculas', ['ngRoute','LPC']);
And
angular.module('LPC', [])

Update your code to use right module name:
angular.module('mis_peliculas')
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
and if you want to use separate modules, you need to initiliaze it first and inject it into your main module
angular.module('LPC',[])
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
var app = angular.module('mis_peliculas', ['LPC']);
I assume your routing is already set correctly.

without the complete log of the error i can't be more precise, but i think that the injection error could be related to your module not being instantiated.
try to change
angular.module('LPC') //here you get a reference to a module, that could cause your error
to
angular.module('LPC', []) //here you instantiate a module

You need to pass in the 'LPC' Module to your app 'mis_peliculas' module for it use the 'lista_peliculas_controller' Controller which is in 'LPC' Module.
Try this code
angular.module('LPC',[])
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
This should be your controller1.js and should be defined before you define your app. Now the app.js should look like
var app = angular.module('mis_peliculas', ['LPC']);
app.config(function($routeProvider){
$routeProvider
.when("/pagina_principal",{
templateUrl: "views/pagina_principal.html",
controller: "lista_peliculas_controller"
})
.when("/lista_peliculas",{
templateUrl: "views/lista_peliculas.html",
controller: "lista_peliculas_controller"
})
.when("/lista_series",{
templateUrl: "views/lista_series.html",
controller: "lista_series_controller"
})
.otherwise({
redirectTo: "/pagina_principal"
})
});
This should remove all the errors and you should be able to use the controller from other module.
Hope it helps

Link module from external file in AngularJS

I'm working on new project and I want to use two modules placed in separated files. Unfortunetaly, when I try to declare second in my root one I receive an error
Uncaught Error: [$injector:modulerr]
So, here is my root file, app.js:
var beerMe = angular.module("beerMe", ["admin", "ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "../views/home/home.html",
controller: "MyCtrl"
})
.otherwise({
redirectTo: "/home"
})
}])
.controller("MyCtrl", ["$scope", function($scope) {
}]);
And second one, which I want to bind, admin.js:
var admin = angular.module("admin", ["firebase", "ngRoute"]);
admin.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/add.html",
controller: "AdminCtrl"
}).when ("/edit", {
templateUrl: "views/edit.html",
controller: "AdminCtrl"
}).otherwise({
redirectTo: "/"
})
}]);
admin.controller("AdminCtrl", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
// my code goes here
}]);
In admin.js I connnect to firebase and I want to have access to all data from my module "beerMe".
I'd be very grateful if you could help me to figure out why there's a problem with binding these two.

Change var admin = angular.module("admin", ["firebase", "ngRoute"]);
to var admin = angular.module("admin");
and change root module like this
var beerMe = angular.module("beerMe", ["admin", "ngRoute", "firebase"])

It looks like your dependencies are the wrong way round. Having admin as a dependency of beerMe will not make the beerMe module available in your admin module.
If you want your admin module to be able to access data from inside the beerMe module then beerMe should be a dependency of admin.
var admin = angular.module('admin', ['firebase', 'ngRoute', 'beerMe']);

How to inject $httpParamSerializer for use in templateUrl

I am trying to inject $httpParamSerializer for use in templateUrl but I am having some issues. There isn't any good documentation and examples of how to use $httpParamSerializer.
Example code:
angular.module('myApp', ['ngRoute']).config(
function($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/data/dashboard', {
templateUrl: function(params) {
//NEED TO USE IT HERE
}
})
})
Things that didn't work, placing it like this:
function($routeProvider, $locationProvider, $httpProvider,$httpParamSerializer ) {
Also in the moduler, like this:
angular.module('myApp', ['ngRoute', '$httpParamSerializer']).config(
Any insight why this isn't working would help.

Since you're in the config you need to get it from the provider itself. That is, inject the provider and call $get
angular.module('myApp', ['ngRoute']).config(
function($routeProvider, $locationProvider, $httpProvider, $httpParamSerializerProvider) {
// get the serializer from the provider
var paramSerializer = $httpParamSerializerProvider.$get();
console.log(paramSerializer({a:1})); // test it
$routeProvider.when('/', {
templateUrl: function(params) {
// you can use paramSerializer(here
}
});
});
Working version of your jsfiddle: http://jsfiddle.net/kh9oeq1y/16/

This forum suggests it's a problem with your angular version. Check that you're using at least 1.4.0.

Angular minification with grunt results in 'Failed to instantiate module' error

I am aware of setting up a controller, service, model etc for prepping for minification. I have about 20 controllers, models and services as individual files and I want to minify and concat them all into one JS file for production.
To get an idea of how I have these files setup, here is an example:
VforumJS.controller('MainController', ['$scope', '$location', '$sce', 'MainModel', 'LogModel', 'MainDebug', 'timecode', 'Idle', function($scope, $location, $sce, MainModel, LogModel, MainDebug, timecode, Idle)
{
...
}]);
After minification, I get the error
Failed to instantiate module VforumJS due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=a
If I click the error link, it says Unknown provider: a
Here is where my module gets created
var VforumJsConfig = function($routeProvider, $locationProvider, localStorageServiceProvider)
{
localStorageServiceProvider.setPrefix('vforumdesktop');
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
...
})
.otherwise({
...
});
};
var VforumJS = angular.module('VforumJS', ['ngRoute','LocalStorageModule', 'ngTouch', 'ui-rangeSlider','base64','ngIdle'])
.config(['$routeProvider', '$locationProvider', 'localStorageServiceProvider', VforumJsConfig])
.constant('LogTypes', {
LOGIN: 1,
IDLE_LOGOUT: 2,
MANUAL_LOGOUT: 3,
VFORUM_OPEN: 4,
VFORUM_CLOSE: 5
})
.constant('SendLogs', false)
.constant('MainDebug', true);
Am I maybe not doing the proper minification prep in the above code where the module is created?
Here is my Gruntfile.js
'use strict';
module.exports = function(grunt)
{
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
all_src: {
options: {
sourceMap: true,
sourceMapName: 'source.map'
},
src: 'resources/js/**/*.js',
dest: 'composite.all.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};

Your .config is definitely one of the issues. Double check and make sure that everywhere in your code that you are injecting a service/provider that you are using the in-line minification.
This is what a config injecting one provider (just $logProvider for this example) will look like after minification:
.config(function(a){
console.log("Never gets here, but a is", a);
})
When really it should look like this:
.config(['$logProvider', function(a){
console.log("a is", a);
}])
Here is a codepen: http://codepen.io/troylelandshields/pen/xGjKGV

Your VforumJsConfig line is the issue
var VforumJsConfig = function($routeProvider, $locationProvider, localStorageServiceProvider)
The function parameters get minified, and angular doesn't know where to inject them from. You need to supply them as strings ( just like your other functions ), as strings won't be altered during minification.
From the docs:
https://docs.angularjs.org/tutorial/step_05#a-note-on-minification
So you will need to add after the definition of VforumJsConfig:
VforumJsConfig.$inject = ['$routeProvider', '$locationProvider', 'localStorageServiceProvider']

Use the array syntax for VforumJsConfig so that the dependencies are defined explicitly rather than implied by the parameter names which will be minified. Instead of:
var VforumJsConfig = function($routeProvider, $locationProvider,
localStorageServiceProvider)
{
localStorageServiceProvider.setPrefix('vforumdesktop');
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
...
})
.otherwise({
...
});
};
Try:
var VforumJsConfig = ['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider, localStorageServiceProvider)
{
localStorageServiceProvider.setPrefix('vforumdesktop');
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
...
})
.otherwise({
...
});
}];

AngularJS dynamic routing

I currently have an AngularJS application with routing built in.
It works and everything is ok.
My app.js file looks like this:
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });
$routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });
$routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });
$routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });
$routeProvider.otherwise({ redirectTo: '/' });
}]);
My app has a CMS built in where you can copy and add new html files within the /pages directory.
I would like to still go through the routing provider though even for the new dynamically added files.
In an ideal world the routing pattern would be:
$routeProvider.when('/pagename', { templateUrl: '/pages/pagename.html', controller: CMSController });
So if my new page name was "contact.html" I would like angular to pick up "/contact" and redirect to "/pages/contact.html".
Is this even possible?! and if so how?!
Update
I now have this in my routing config:
$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })
and in my CMSController:
function CMSController($scope, $route, $routeParams) {
$route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];
This sets the current templateUrl to the right value.
However I would now like to change the ng-view with the new templateUrl value. How is this accomplished?

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/page/:name*', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.name + '.html';
},
controller: 'CMSController'
});
}
]);
Adding * let you work with multiple levels of directories dynamically.
Example: /page/cars/selling/list will be catch on this provider
From the docs (1.3.0):
"If templateUrl is a function, it will be called with the following
parameters:
{Array.} - route parameters extracted from the current
$location.path() by applying the current route"
Also
when(path, route) : Method
path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.

Ok solved it.
Added the solution to GitHub - http://gregorypratt.github.com/AngularDynamicRouting
In my app.js routing config:
$routeProvider.when('/pages/:name', {
templateUrl: '/pages/home.html',
controller: CMSController
});
Then in my CMS controller:
function CMSController($scope, $route, $routeParams) {
$route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
$.get($route.current.templateUrl, function (data) {
$scope.$apply(function () {
$('#views').html($compile(data)($scope));
});
});
...
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];
With #views being my <div id="views" ng-view></div>
So now it works with standard routing and dynamic routing.
To test it I copied about.html called it portfolio.html, changed some of it's contents and entered /#/pages/portfolio into my browser and hey presto portfolio.html was displayed....
Updated
Added $apply and $compile to the html so that dynamic content can be injected.

I think the easiest way to do such thing is to resolve the routes later, you could ask the routes via json, for example. Check out that I make a factory out of the $routeProvider during config phase, via $provide, so I can keep using the $routeProvider object in the run phase, and even in controllers.
'use strict';
angular.module('myapp', []).config(function($provide, $routeProvider) {
$provide.factory('$routeProvider', function () {
return $routeProvider;
});
}).run(function($routeProvider, $http) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).otherwise({
redirectTo: '/'
});
$http.get('/dynamic-routes.json').success(function(data) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
// you might need to call $route.reload() if the route changed
$route.reload();
});
});

In the $routeProvider URI patters, you can specify variable parameters, like so: $routeProvider.when('/page/:pageNumber' ... , and access it in your controller via $routeParams.
There is a good example at the end of the $route page: http://docs.angularjs.org/api/ng.$route
EDIT (for the edited question):
The routing system is unfortunately very limited - there is a lot of discussion on this topic, and some solutions have been proposed, namely via creating multiple named views, etc.. But right now, the ngView directive serves only ONE view per route, on a one-to-one basis. You can go about this in multiple ways - the simpler one would be to use the view's template as a loader, with a <ng-include src="myTemplateUrl"></ng-include> tag in it ($scope.myTemplateUrl would be created in the controller).
I use a more complex (but cleaner, for larger and more complicated problems) solution, basically skipping the $route service altogether, that is detailed here:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Not sure why this works but dynamic (or wildcard if you prefer) routes are possible in angular 1.2.0-rc.2...
http://code.angularjs.org/1.2.0-rc.2/angular.min.js
http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js
angular.module('yadda', [
'ngRoute'
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/:a', {
template: '<div ng-include="templateUrl">Loading...</div>',
controller: 'DynamicController'
}).
controller('DynamicController', function ($scope, $routeParams) {
console.log($routeParams);
$scope.templateUrl = 'partials/' + $routeParams.a;
}).
example.com/foo -> loads "foo" partial
example.com/bar-> loads "bar" partial
No need for any adjustments in the ng-view. The '/:a' case is the only variable I have found that will acheive this.. '/:foo' does not work unless your partials are all foo1, foo2, etc... '/:a' works with any partial name.
All values fire the dynamic controller - so there is no "otherwise" but, I think it is what you're looking for in a dynamic or wildcard routing scenario..

As of AngularJS 1.1.3, you can now do exactly what you want using the new catch-all parameter.
https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5
From the commit:
This allows routeProvider to accept parameters that matches
substrings even when they contain slashes if they are prefixed
with an asterisk instead of a colon.
For example, routes like edit/color/:color/largecode/*largecode
will match with something like this
http://appdomain.com/edit/color/brown/largecode/code/with/slashs.
I have tested it out myself (using 1.1.5) and it works great. Just keep in mind that each new URL will reload your controller, so to keep any kind of state, you may need to use a custom service.

Here is another solution that works good.
(function() {
'use strict';
angular.module('cms').config(route);
route.$inject = ['$routeProvider'];
function route($routeProvider) {
$routeProvider
.when('/:section', {
templateUrl: buildPath
})
.when('/:section/:page', {
templateUrl: buildPath
})
.when('/:section/:page/:task', {
templateUrl: buildPath
});
}
function buildPath(path) {
var layout = 'layout';
angular.forEach(path, function(value) {
value = value.charAt(0).toUpperCase() + value.substring(1);
layout += value;
});
layout += '.tpl';
return 'client/app/layouts/' + layout;
}
})();