Geek Answers Handbook

Angular Route - call function at boot

I use $routeProvider to redirect all the pages of my applications to controllers correlation, but when two routes use the same controllers (ie / blog and / blog: id), how can I initialize the split function depending on the current route .

So, if the route / blog, I want to initialize $ scope.loadPosts () when loading the route. If the route is / blog: id, I want to initialize $ scope.loadPost ($ id) when loading the route.

+6
source share
2 answers

Here you can do a few things, but my suggestion was to pass the initialization function through the route solution. You can do something like this:

 angular.module('test', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/blog', { controller: 'BlogController', template: '<h1>Blog</h1>', resolve: { init: function() { return function() { console.log('Loading Blog'); } } } }) .when('/blog/:id', { controller: 'BlogController', template: '<h1>Blog ID</h1>', resolve: { init: function() { return function($route) { console.log('Loading Blog Article ' + $route.current.params.id); } } } }); } ]) .controller('BlogController', ['$scope', '$route', 'init', function($scope, $route, init) { init($route); } ]); 
 <!DOCTYPE html> <html ng-app="test"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <script src="https://code.angularjs.org/1.4.6/angular-route.js"></script> </head> <body> <a href="#/blog">Go to Blog</a> <a href="#/blog/2">Go to Article 2</a> <div ng-view></div> </body> </html>

Some other options:

  • Repair any indicator that you can turn on in the initialization functions inside the controller.
  • If you are loading a blog route, allow the undefined object, if you are loading the blog: id route, allow the actual element that you are loading for this route.

Hope this code gets you started on the right path with what you decide.

edit Here is a link to the plunker , the code fragment looks strange with interruptions

+4
source

An easy way to do this is by using ng-init in the appropriate template .

 angular.module('demo', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/linkOne', { controller: 'LinkController', template: '<h1 ng-init="functionOne()">Hello world</h1>' }) .when('/linkTwo', { controller: 'LinkController', template: '<h1 ng-init="functionTwo()">Hello Stackoverflow</h1>' }); }]) .controller('LinkController', ['$scope', function($scope) { $scope.functionOne = function(){ console.log("Hello"); } $scope.functionTwo = function(){ console.log("Hello world"); } }]);

HTML code:

  <!DOCTYPE html> <html ng-app="demo"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <script src="https://code.angularjs.org/1.4.6/angular-route.js"></script> </head> <body> <a href="#linkOne">Link One</a> <a href="#linkTwo">Link Two</a> <div ng-view></div> </body> </html>
+2
source

More articles:


All Articles