How to seperate controllers to each files for each views

Question

Did some research before posting this, but couldn't find a solution yet.

I want to create separate controller files for each views, and load them on-demand (sort of). Is it possible? Like referencing controllers from respective view files?

app.js - main entry point

var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $locationProvider.hashPrefix('!');
    $routeProvider.when('/', {
        templateUrl: 'views/login.html', 
        controller: 'loginController'
});

index.html

<html>
    <head>
        <script src="js/angular.js"></script>
        <script src="js/angular-route.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ng-view>
        </div>
    </body>

views/login.html

<div>
<h1>{{greeting}}</h1>
</div>
<script src="js/controllers/loginController.js"></script>

loginController.js

myApp.controller('loginController',function($scope){
    $scope.greeting =  "Hello World!";
});

This may be some dumb idea (I definitely don't like refencing JS files in the head section). Any ideas?

the code you have written in login.html. Is it not working ? — Umair Farooq, Aug 31 '16 at 13:08
nope. I'm still getting 'Argument 'loginController' is not aNaNunction, got undefined' error — Giri, Aug 31 '16 at 13:10
@Giri You should have your controller register in app module before redirecting to route> I' say that you can think of to use `ocLazyLoading` in your route resolve function, you can [look here](https://oclazyload.readme.io/docs/with-your-router) for more detail — Pankaj Parkar, Aug 31 '16 at 13:12
No, that wont work. The dynamic loaded html views (from angular router or ui-router) will not also load the referenced scripts in that html. To verify you can see this in the browser debug tools if you look at loaded assets (ie. referenced files). — Igor, Aug 31 '16 at 13:13
@UmairFarooq I'm sorry didn't get you. Did you mean before the
tag? BTW, if we refer the loginController.js in the index.html, this will work like a charm. — Giri, Aug 31 '16 at 13:13
Possible duplicate of [Single page application - load js file dynamically based on partial view](http://stackoverflow.com/questions/15939913/single-page-application-load-js-file-dynamically-based-on-partial-view) — Igor, Aug 31 '16 at 13:15
Yes. That is what I mean. I have seen this requirement for the first time. I know when we include files in master view, it works correctly. If this doesn't work even including js file before div, then I don't think there is another way. You can try putting all the file references in an html file and then include that file through ng-include in head of the index.html page — Umair Farooq, Aug 31 '16 at 13:17
@UmairFarooq I know. I want just the opposite. Like Igor said, this facility might not be built-in to core. — Giri, Aug 31 '16 at 13:20
Somehow, there should be a solution for this. *pulls hair*.. This doesn't look like a "rare" requirement does it? :D — Giri, Aug 31 '16 at 13:26
Did you look at the SO duplicate link I posted above? That is how you can currently solve it. Or you can use RequireJS but its a PITA once the app starts getting big. In hind sight I would have rather used WebPack to reference our modules (we use requirejs at the moment). — Igor, Aug 31 '16 at 13:32
I'll give it a try with RequireJS. The no. of controllers will be large in my app though. Let me see how it goes. In Angular2 is it the same story? — Giri, Sep 01 '16 at 05:32

score 0 · Answer 1 · answered Aug 31 '16 at 13:32

You can do this with requireJS or any other Asynchronous Module Loader (ASM).

However, if you aren't very experienced my advice is to use a task or build runner like grunt or gulp.

If you used a generator like yeoman you get to have a project set up nicely from the start.

Try this generator for example: https://github.com/Swiip/generator-gulp-angular

I would highly recommend you follow the John Papa style guide: https://github.com/johnpapa/angular-styleguide which gives great guidance on how to break angularJS projects into an appropriate directory structure. Gulp or Grunt will then pipe your files as appropriate into your build.

I have used these before and projects done like this are a pleasure to work on. You also get to learn by example with some good coding practices already baked into the project.

How to seperate controllers to each files for each views

1 Answers1