AngularJS External Controller/View Files

Question

AngularJS External Controller/View Files

664 Views Asked by Banning At 19 April 2025 at 03:51

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?

Original Q&A

There are 2 best solutions below

Vadim On 18 December 2014 at 17:41

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.

**Banning** · Accepted Answer

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

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in REQUIREJS

Related Questions in ANGULAR-AMD

Trending Questions

Popular # Hahtags

Popular Questions