Создание контроллера для управления навигацией сайта angularjs

Question

Я пытаюсь использовать ng-repeat, чтобы легко управлять навигацией на моем сайте. Вот мой код для навигации:

HTML:

<div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="Navigation as AppNav"> 

    <ul class="nav navbar-nav"> 
     <li ng-repeat="appLinks in AppNav.appLinks"><a href={{AppNav.appLinks.Page}}>{{AppNav.appLinks.Page}}</a></li> 
    </ul> 
</div> 

Вот мой код контроллера Navigation.js:

'use strict'; 

(function(){ 
var app = angular.module('AppNav', [ ]); 
app.controller('Navigation', function(){ 
    this.appLinks = gems; 

    }); 
var gems = [ 
    { 
     Page: 'Home Page', 
     Link: '"#"' 
    }, 
    { 
     Page: 'About', 
     Link: '"#/about"' 
    }, 
    { 
     Page: 'Contact', 
     Link: '"#:' 
    } 
]; 
})(); 

Я получаю эту ошибку:

GET http://localhost:9000/scripts/controllers/navigation.js angular.js:11607 Error: [ng:areq] Argument 'Navigation' is not a function, got undefined http://errors.angularjs.org/1.3.14/ng/areq?p0=Navigation&p1=not%20a%20function%2C%20got%20undefined at REGEX_STRING_REGEXP (angular.js:63) at assertArg (angular.js:1580) at assertArgFn (angular.js:1590) at angular.js:8431 at angular.js:7599 at forEach (angular.js:331) at nodeLinkFn (angular.js:7586) at compositeLinkFn (angular.js:7078) at compositeLinkFn (angular.js:7081) at compositeLinkFn (angular.js:7081)

Я использую угловую версию v1.3.14. Как хедз-ап, я очень новичок в создании angular.js и приложений, поэтому, если вы можете помочь, сообщите мне, что я делаю неправильно вместе с образцом кода.

Благодарим вас за вашу помощь заранее!

содержание app.js:

'use strict'; 

/** 
* @ngdoc overview 
* @name testappApp 
* @description 
* # testappApp 
* 
* Main module of the application. 
*/ 
angular 
    .module('testappApp', [ 
    'ngAnimate', 
    'ngAria', 
    'ngCookies', 
    'ngMessages', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch' 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/about', { 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

Main.js:

'use strict'; 

describe('Controller: MainCtrl', function() { 

    // load the controller's module 
    beforeEach(module('testappApp')); 

    var MainCtrl, 
    scope; 

    // Initialize the controller and a mock scope 
    beforeEach(inject(function ($controller, $rootScope) { 
    scope = $rootScope.$new(); 
    MainCtrl = $controller('MainCtrl', { 
     $scope: scope 
    }); 
    })); 

    it('should attach a list of awesomeThings to the scope', function() { 
    expect(scope.awesomeThings.length).toBe(3); 
    }); 
}); 

Answer 1

WORKING DEMO

HTML:

<div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="Navigation as AppNav"> 

    <ul class="nav navbar-nav"> 
     <li ng-repeat="appLinks in AppNav.appLinks"><a ng-href={{appLinks.Link}}>{{appLinks.Page}}</a></li> 
    </ul> 
</div> 

Вы неправильно ссылались на атрибуты страницы и ссылки. Вот почему данные не показывались. В ng-repeat у вас есть appLinks in AppNav.appLinks, но внутри тегов li вы использовали AppNav.appLinks.Page, который указывает на массив. Вместо этого вы должны использовать appLinks.Page

Контроллер:

(function(){ 
    'use strict'; 

var app = angular.module('AppNav', [ ]); 
app.controller('Navigation', function(){ 
    this.appLinks = gems; 
    }); 



    var gems = [ 
    { 
     Page: 'Home Page', 
     Link: "/#" 
    }, 
    { 
     Page: 'About', 
     Link: "/#/about" 
    }, 
    { 
     Page: 'Contact', 
     Link: "/#" 
    } 
    ]; 

})();