AngularJS nested views & controllers

Question

Below is my application layout:

enter image description here

app.html code is below:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <title>My AngularJS App</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="/static/app/controllers.js"></script>
</head>
<body>
    <ul class="nav">
        <li><a href="#admin">Admin</a></li>
        <li><a href="#sales">Sales</a></li>
        <li><a href="#purchase">Purchase</a></li>
    </ul>

    <div ng-controller="AppCtrl" ng-include="view.url">
    </div>

</body>
</html>

/static/app/controllers.js is:

var app = angular.module('MyApp', []);

app.controller('AppCtrl', ['$scope', '$location',
    function ($scope, $location) {

        $scope.$watch(
            function () {
                return $location.path();
            },
            function (path) {
                var moduleName = path.split("/")[1];
                if (moduleName) {
                    $scope.view = { url: "/static/app/" + moduleName + "/" + moduleName + ".html" };
                }
            });

    } ]);

Now let say admin.html is:

<div>
    <p>Admin</p>
</div>

and sales.html, and purchase.html are just about the same. Then my app's navigation works just as expected; when admin link is clicked, admin.html is loaded and shown. But if admin.html is as follows:

<div>
    <p>Admin</p>
    <script src="/static/app/admin/controllers.js"></script>
    <div ng-controller="AdminCtrl" ng-include="subView.url">
    </div>
</div>

and /app/admin/controllers.js is

var admin = angular.module('MyApp.Admin', []);

admin.controller('AdminCtrl', ['$scope', '$location',
    function ($scope, $location) {


    } ]);

then when admin link is clicked, the following error is thrown in Google Chrome console:

Error: Argument 'AdminCtrl' is not a function, got undefined
    at Error (<anonymous>)

If I move AdminCtrl to /app/controllers.js, then it works; but I would prefer it to be in its own directory. Can someone help me with this? Also, next step is to display "subView", similar way as "view" is navigated. Any hint on this will be much appreciated.

Shai Reznik - HiRez.io · Accepted Answer · 2013-07-13 09:11:55Z

2

You need to connect your MyApp module (in its definition) with your MyApp.Admin modulelikes this:

angular.module('MyApp', ["MyApp.Admin"]);

But for a larger app, you might want to look at the UI-Router project instead...

answered Jul 13, 2013 at 9:11

Shai Reznik - HiRez.io

9,0082 gold badges37 silver badges34 bronze badges

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

4 Comments

shaunhusain Over a year ago

@synergetic make sure MyApp.Admin is declared before the MyApp module, you'll need to be sure your scripts are loaded in order.

Shai Reznik - HiRez.io Over a year ago

As a matter of fact, don't load just one controllers.js file in your head, because it gets loaded before every other file, and doesn't recognize yet the other modules... I would put them together, or load the app controllers file at the end of the file.. by the way, I think calling your conrtollers.js file something like admin.ctrl.js is preferable, hope it helps

shaunhusain Over a year ago

To add to the suggestions I have a folder for my html partials (called app/partials/), just helps to keep the HTML separated from the JS and keep everything organized.

Shai Reznik - HiRez.io Over a year ago

So.. did it help with your issue?

Collectives™ on Stack Overflow

AngularJS nested views & controllers

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related