AngularJS External Controller/View Files

Question

Idk if my subject is descriptive enough but i'll try my best to describe what I am doing. I really want to learn and understand Angular and I am coming from Backbone.js.

My set up is using RequireJS Angular and AngularAMD (http://marcoslin.github.io/angularAMD/)

I got my page set up fine using the routes that go out and get the different views from the view directories. HOWEVER, I am trying to pull out the navigation from the main page and put it in its own external view.

I have a feeling this is easy I am just not well versed enough in Angular to do it. I am thinking I need a navigationController but I am not understanding how I can load my external view like I can with the routes.

angular
.module('app', [
    'ngRoute',
])
.config(config)

config.$inject = ["$routeProvider"];
function config($routeProvider) {
    $routeProvider
        .when('/', angularAMD.route({
        templateUrl: 'views/home.html', 
        controller: 'homeController', 
        controllerUrl: 'controllers/home'
    }))
}

So that is pretty straight forward that when my url is / it will load the home.html template and the proper controller. How do I get a navigation template loaded in there so that its included on all pages?Am I going to have to use a factory or something?

Another way to do this is to create a directive to handle the navigation. Take a look at: https://github.com/marcoslin/angularAMD/blob/master/www/js/scripts/directive/navMenu.js — marcoseu, Dec 19 '14 at 10:06

score 1 · Answer 1 · answered Dec 18 '14 at 17:41

1

To get a navigation in all of your pages you have several options. The simplest is you can put it right into your main markup.

<body ng-app="app">
   <div ng-include="'views/nav.html'"></div>
   <div ng-view></div>
</body>

Another thing you can do is use ui-router, however that is going to be more work, but it could be worth it depending on your use case.

answered Dec 18 '14 at 17:41

Vadim

17,897
4
38
62

Yes I was using ng-include originally but I need the template tied to a controller as there will be login and user specific options within the nav bar.... so ui-router i'll take a look into that. – Banning Dec 18 '14 at 17:47
@Banning you can still have the template tied to a controller, just use the ng-controller directive – Vadim Dec 18 '14 at 17:48
I see.. so then how do I define the path to the controller? I am wanting to store all my controllers in a constrollers directory. Or am I stuck with having to write all of this within the app.js file? – Banning Dec 18 '14 at 17:56
@Banning well you could load the 'global' controllers when the app first starts. – Vadim Dec 18 '14 at 17:59
Idk I must not be thinking the angular way.. I would think this would be a common feature or things. Different view with different dynamically loaded content and what not. – Banning Dec 18 '14 at 18:09
@Banning it is, most people aren't using AngularAMD though. They're loading up the entire application. – Vadim Dec 18 '14 at 18:10
1

Please note that `ng-app` should not be used with angularAMD. – marcoseu Dec 19 '14 at 10:04

score 0 · Accepted Answer · answered Dec 31 '14 at 22:15

I just wanted everyone to know what I ended up doing was separating everything out into modules. Now I have a header, footer & navigation modules along with all sorts of other modules.

After ready here https://docs.angularjs.org/guide/module under "Recommended Setup" I feel this is probably the best approach for what I want to accomplish.

While the example above is simple, it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:
A module for each feature
A module for each reusable component (especially directives and filters)
And an application level module which depends on the above modules and contains any initialization code.

AngularJS External Controller/View Files

2 Answers2