CODEWITHSUNDEEP
javascriptangularjs
bitoiu
bitoiu

Reputation: 7484

Angular sub-views

I google a bit about the topic but I couldn't get a clear answer on the subject, so apologies if this seems a pretty beaten down question. I've started with Angular not long ago, and I really want to be on the good path.

The application is bootstraped by app.js which defines the routes in the configuration. The index.html has a body with a ng-app directive an just a div inside with a ng-view.

  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainController'
    })
    .otherwise({
      redirectTo: '/'
    });

This main.html and controller are the bulk of the app, which is quite simple.

Now I wanted to have a header, which either shows Login or the information from the user. I though that should be another Controller and another View, since the header should encapsulate all that code instead of polluting the main view.

What should I do?

  1. I could remove the ng-app and create two different controllers for the header and the main app, but then I don't know how to associate each view to each ng-controller like the routeProvider is doing, although if I don't mind writing all the html inline, this should work. I would also lose routing which I don't really want to.

  2. I could just create a ng-controller=headerController inside the app and still have the code inline. Is there an option to associate a template with a controller without the route definition?

What I'm currently going to do until I have a better option is to add all of this logic to the mainController. I just feel that I'm building big blocks instead of small ones that I can just compose. Imagine I do three more routes that need a header. Using option 1) or 2) I would have to write the template html for the header again in those views.

I would appreciate any links or help for this matter, I'm really curious how to approach this in a module fashion.

Thank you in advance.

Upvotes: 1

Views: 1875

Answers (2)

musically_ut
musically_ut

Reputation: 34288

I could remove the ng-app and create two different controllers for the header and the main app, but then I don't know how to associate each view to each ng-controller like the routeProvider is doing, although if I don't mind writing all the html inline, this should work. I would also lose routing which I don't really want to.

You will just write two different modules which have the same routeConfig and things will probably work. However, I do not think that it is the best solution in this case.

To answer your second question:

I could just create a ng-controller=headerController inside the app and still have the code inline. Is there an option to associate a template with a controller without the route definition?

You can use ng-include to include the template:

<body ng-app="MyApp">
    <section ng-include="'header.html'" ng-controller="HeaderController"></section>
    <ng-view></ng-view>
</body>

Moreover, you can keep the template inline by using either the $templateCache or by using <script> tag.

Upvotes: 3

mlim1972
mlim1972

Reputation: 248

You can use ng-include to insert your template. I personally like to use ui-router

Upvotes: 0

Related Questions