Dynamically set controller for view using ngRoute in AngularJS

Question

I'm using params to dynamically route URLs to different HTML.

Is there any way I can set different controllers for those views? Or I should separately route them and use controller and controllerAs to set controller?

Since all of the templates are totally functionally different, is it right to do in this way? I know in more general case, such a way is only used for the restful query. If no, is there a better way to route different URLs to the different template?

angular.module('application',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
    $routeProvider
        .when('/',{
           templateUrl: 'src/app/other/homepage.html'
        })
        .when('/:category/:page',{
            templateUrl: function(params) {
                return 'src/app/'+params.category+'/'+params.page+'.html';
            }
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

Shashank Agrawal · Accepted Answer · 2016-02-17 04:29:09Z

2

Instead of defining controller in your router mapping, just define them in your HTML using ng-controller.

Now, each view or the HTML will be responsible for initializing the controller.

Like for: src/app/fruit/apple.html (when you browse: /fruit/apple)

<div ng-controller="AppleController">
   <!-- Apple content -->
</div>

for: src/app/fruit/orange.html (when you browse: /fruit/orange)

<div ng-controller="OrangeController">
   <!-- Orange content -->
</div>

edited Feb 17, 2016 at 4:29

answered Feb 17, 2016 at 4:27

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shashank Agrawal Over a year ago

Yes, set controllers in the templates.

SmartFingers Over a year ago

Thank you very much! It really work! May I understand in this way: ngRoute will first include the template to the ng-view directive, and then all of other angularjs directive start working? And this is why the ng-app still works for the controller in templates?

Bear Vast · Accepted Answer · 2016-02-17 05:37:20Z

0

This is the best solution

http://ify.io/lazy-loading-in-angularjs/

And sample code is in github

https://github.com/ifyio/angularjs-lazy-loading-with-requirejs

answered Feb 17, 2016 at 5:37

Bear Vast

1501 silver badge8 bronze badges

Collectives™ on Stack Overflow

Dynamically set controller for view using ngRoute in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related