Angular - simple controller understanding

Question

I am trying to implement a simple controller to output navigation items:

in index.html I have the following:

   <nav ng-controller="Nav">
        <ul>
            <li ng-repeat="c in catalog">
                {{c.name}}
                <p>{{c.url}}</p>
            </li>
        </ul>
    </nav>

and in controllers.js I have:

'use strict';

/* Controllers */

angular.module('c.controllers', []).
  controller('MyCtrl1', [function() {

  }])
  .controller('MyCtrl2', [function() {

  }])
    .controller('Nav', function Nav($scope) {
        $scope.catalog = [
            {'name': 'Nav 1',
                'url': '#/view1'},
            {'name': 'Nav 2',
                'url': '#/view2'},
            {'name': 'Nav 3',
                'url': '#/view3'}
        ];
    });

It doesnt work though, the repeat dosnt work and i just get the following output:

    <nav  ng-controller="Nav">
        <ul>
            <li ng-repeat="c in catalog">
                {{c.name}}
                <p>{{c.url}}</p>
            </li>
        </ul>
    </nav>

Have have I done wrong, or havent done at all?

EDIT:

I have the following on my html tag:

<html lang="en" ng-app="myApp">

I can see the following error in the console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.controllers due to:
Error: [$injector:nomod] Module 'myApp.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

What is your error message in console?

user680786
– user680786

2013-10-22 21:54:08 +00:00
Commented Oct 22, 2013 at 21:54 — user680786
– user680786, Commented Oct 22, 2013 at 21:54
Do you have n-app with the name of the module?

hjgraca
– hjgraca

2013-10-22 21:56:32 +00:00
Commented Oct 22, 2013 at 21:56 — hjgraca
– hjgraca, Commented Oct 22, 2013 at 21:56
I have edited my question with more info

Marty Wallace
– Marty Wallace

2013-10-22 21:58:02 +00:00
Commented Oct 22, 2013 at 21:58 — Marty Wallace
– Marty Wallace, Commented Oct 22, 2013 at 21:58

KayakDave · Accepted Answer · 2013-10-22 22:15:13Z

1

Have you included ng-app somewhere (http://docs.angularjs.org/api/ng.directive:ngApp)?

For instance:

 <html ng-app='c.controllers'>

Often when the double curlys {{ }} show up it's because Angular hasn't seen an ng-app yet.

Edit: Here's an example of setting up a module and controller together (from http://docs.angularjs.org/tutorial/step_02)

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

 phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
    $scope.phones = [
    {'name': 'Nexus S',
    'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
    'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
   'snippet': 'The Next, Next Generation tablet.'}
   ];
 });

edited Oct 22, 2013 at 22:15

answered Oct 22, 2013 at 21:55

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

9 Comments

Marty Wallace Over a year ago

I added it to the html tag. Does the controller name have to match the app name? I thought you have different controllers under the same app?

KayakDave Over a year ago

The module names need to match. The name to focus on is "c.controllers" in your case: angular.module('c.controllers', []) Make sure that name matches your ng-app

KayakDave Over a year ago

And yes, you do want different controller names. You look good there, it's just the module name that's the issue.

Marty Wallace Over a year ago

I took this project skeleton from github: angular-seed. All i have done is add that controller

KayakDave Over a year ago

Ahh. That controllers.js can be confusing. Focus on app.js for the moment (github.com/angular/angular-seed/blob/master/app/js/app.js) That's the closer parallel to what you're trying to do right now

|

Kim T · Accepted Answer · 2013-10-22 21:56:54Z

0

Looks like you have named the module name incorrectly

<html ng-app="App">
    <div ng-controller="AppCtrl">

Would need a module called App with a controller inside called AppCtrl

angular.module('App', [])
    .controller('AppCtrl', function ($scope) {
        console.log('AppCtrl', this);
    });

answered Oct 22, 2013 at 21:56

Kim T

6,5782 gold badges63 silver badges85 bronze badges

Comments

hjgraca · Accepted Answer · 2013-10-22 21:59:42Z

0

Change this

<html lang="en" ng-app="myApp">

To this

<html lang="en" ng-app="c.controllers">

But in my opinion change the name of your current module to something better

answered Oct 22, 2013 at 21:59

hjgraca

1,7131 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular - simple controller understanding

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related