Develop Reference

Dynamic page in Angular route

I am trying to have dynamic routing in Angular 1.3. Something similar to what it described here and here. The examples suggest something like this:
$routeProvider.when('/:group/:pagename', {
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
})
and then the controller will have access to group and pagename through $routeParams. That works
I am trying to make this routing a little more dynamic and have template and controller to be selected dynamically as well:
$routeProvider.when('/:group/:pagename', {
controller: $routeParams.group + 'Ctrl',
templateUrl: $routeParams.pagename + '.html'
})
When I put a breakpoint on when I can see that there is $get property with a function that has $routeParams as one of parameters. But I can't figure out how to retrieve its values.
The project is in very early stage - I can go with ui-router or with ng-router if any of them has this functionality.

For the dynamic templateUrl portion you could try:
$routeProvider.when('/:group/:pagename', {
controller: "SomeCtrl",
templateUrl: function(params){return params.pagename + '.html';}
})
Not sure if the same could be done with the controller however.

Instead of a direct value you can declare a function that will return a templateUrl string, i.e.:
$routeProvider.when('/:group/:pagename', {
controller: $routeParams.group + 'Ctrl',
templateUrl: function (routeParams) {
return routeParams.pagename + '.html';
}
});
I guess the same may be true for controller, but you have to test that one out, as I've never used it for controllers.
That being said, if you have so much dynamic logic in this place, maybe instead of treating this as different controllers, you could encapsulate those views as different directives and the ng-if certain directive depending on $routeParams which will be set in one wrapping controller?

AngularJS: Communication between controllers in different views

I have different views each created by a different controller. At a particular time only one of the views is visible.
I want to switch from one view to another view through a function of the controller of the first view and after that I want to call a method of the second view controller.
My problem is how should I call this method in an angular way?
I know the possiblity using $broadcast and $on but that smells a little bit.
The other choice ist to find the scope in the dom and calling the method via scope. But that is even more ugly.
What is the best solution?

You can use services to communicate between controllers. While you could create a generic shared service to have a central point to subscribe to and broadcast events, services are easier to maintain over time.

You can use Angular Routing
Check out the documentation. This is an excerpt from the documentation. You can make links like
Link
For the first route and so on.
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);

Okay it is done and simpler as expected.
The idea is to use a service used in both views (controllers), that contains a 'execution boolean'.
The first view set the boolean to true, the second set a watch on this boolean and therefore is called and can call the desired method.
In the service:
trigger: function(name) { model[name] = true; },
setTriggerWatch: function(scope, name, callback) {
scope.$watch(function value() {
return model[name];
}, function listener(newValue, oldValue) {
if (newValue) {
callback();
}
});
},
In the destination controller:
sessionData.setTriggerWatch($scope, 'createSession', function callCreateSession() {
_createSession();
});
In the source controller:
sessionData.trigger('createSession');

Angularjs routing not working correctly

angular.module('Stations', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/documents/:stationId', {
templateUrl: '/Scripts/Modules/checklist/views/index.html',
controller: 'checklistController'
})
.when('/documents/details', {
templateUrl: '/Scripts/Modules/checklist/views/details.html',
controller: 'checklistDetailsController'
})
});
Now if i type the url /stations#/documents/4, it jumbs to to the documents view and show all the documents in that station. But if i go to the url stations#/documents/details?Id=3&type=note, it still go to the documents main view and not the details view.
Could you please give me a hint on what i'm doing wrong?

Here the router beleives that details is a :stationId
So it matches the first route /documents/:stationId and affects the value details to the stationIdparameter.
You should change the route for the details page to
.when('/details', {
Or if you want to say that stationId must be a number, you can do that with angular ui-router :
https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters

Probably you should change the route to
.when('/documents/details/:id/:note', {... });
This would be useful to get the params using $routeParams in your controller etc.

Because first route matched is executed and details in that URL is considered as stationId.
Put second route first so that it is matched first. Like this.
angular.module('Stations', ['ngRoute']).config(function ($routeProvider) {
$routeProvider
.when('/documents/details', {
templateUrl: '/Scripts/Modules/checklist/views/details.html',
controller: 'checklistDetailsController'
})
.when('/documents/:stationId', {
templateUrl: '/Scripts/Modules/checklist/views/index.html',
controller: 'checklistController'
})
});
But this will mean, if your stationId by any chance is the word 'details', then it will be matched to first route and not to the second route. So consider avoiding this type of configuration.

You need to put in the params in the route:
.when('/documents/details:documentId', {
templateUrl: '/Scripts/Modules/checklist/views/details.html',
controller: 'checklistDetailsController'
});
See: https://docs.angularjs.org/api/ngRoute/service/$route

AngularJS: dynamic compile diretive

Here's the [plunker]:http://plnkr.co/edit/iPsyEAIQWxJIJuneZb8B?p=preview
What I want is when I click login, the auth directive should change template to 'logout.html' automatically , and then when logout clicked, switch to use 'login.html'.
But so far, I should refresh page manully to make directive to switch template.
How can I achieve this purpose?

Using routes.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.when('/logout', {
templateUrl: 'logout.html',
controller: 'logoutCtrl'
})
}]);
Then you do $location.path('/logout') or $location.path('/login')
Here is the tutorial:
http://docs.angularjs.org/tutorial/step_07

I've fixed a couple of bugs in your plunker. Check it out here
Your major error was the $watch expression. It should be scope.$watch('authed', function () {}); not scope.$watch(scope.authed, function () {});.
I've also played a bit with it and came up with this version. The idea is to separate logon/logout logic with cookie manipulation and get rid of explicit DOM manipulation, $compile() etc.

How do I get the angularJS routeProvider to perform an action before the route change?

Let's say I have this config:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/partials/index.html',
controller: 'defaultCtrl'
})
.when('/other', {
templateUrl: 'app/partials/other.html',
controller: 'errorCtrl'
})
.otherwise({
templateUrl: 'app/partials/404.html'
});
}
]);
I'm looking for a place to do some basic, common maintenance code before the router calls the route. Say I'd like to clear the console log via console.clear() every time the route is changed. How and where would be the best place in the code to do that?

The $route service raise events like $routeChangeStart which you can use to perform such tasks. You can implement them using the $scope.$on method. Someting like
$scope.$on('$routeChangeStart',function(angularEvent,next,current) {
//do you work here
});
Read the $route documentation to get idea on this and other such events.
Also $routeProvider configuration method when also can take a parameter resolve which actually is used to setup dependencies before the route is resolved. This resolve object map can also be used to achieve what you want to do.