CODEWITHSUNDEEP
angularjs
Marty Wallace
Marty Wallace

Reputation: 35734

Angular - simple controller understanding

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

Upvotes: 1

Views: 11627

Answers (3)

KayakDave
KayakDave

Reputation: 24676

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.'}
   ];
 });

Upvotes: 1

hjgraca
hjgraca

Reputation: 1714

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

Upvotes: 0

Kim T
Kim T

Reputation: 6426

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);
    });

Upvotes: 0

Related Questions