AngularJs-在按钮单击时注入不起作用，引发错误

Question

In my app, I am doing route, and injecting a method to call. when i click on button I requesting to call the method. instead of giving the result, it throws the error. I wondering the way which i injecting is correct or wrong here!

any one help me to sort this please?

my Js:

var locations = angular.module('location', ['ngRoute']);
locations.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'views/home.html'
        })
        .when('/inbox/:name', {
            controller: 'InboxController',
            templateUrl: 'views/inbox.html'
        })
        .when('/simpleInject',{
            controller:'injectController',
            templateUrl:'views/simpleInject.html'
        })
        .otherwise({redirectTo: '/'});
}]);
locations.controller('HomeController', ['$scope','$location', function($scope,$location){
    console.log('hi-HomeController', $location.url());
}]);

locations.controller('InboxController', ['$scope','$location', function($scope,$location){
    console.log('hi-InboxController',$location.url());
}]);
locations.factory('greeter', function(){
    return {
        greet : function(msg){
            alert(msg);
        }
    };
})
.controller('injectController', ['$scope', function($scope,greeter){
    $scope.sayHello = function(){
        greeter.greet('Hello!');
    }
}])

my location html file (where the ng-view nest): I use jade

doctype html
html(lang="en",ng-app='location')
    head
        title NG Totoal Referece Book Tutorials / Directives
        link(rel="stylesheet",href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css")
        link(rel="stylesheet",href="styles/style.css")
    body
        header
            h1 Header
        div.content
            div(ng-view) //ng-view is here!
        footer
            h5 Footer

        script(src='js/lib/angular/angular.js')
        script(src='js/lib/angular/angular-route.js')
        script(src='js/lib/underscore/underscore-min.js')
        script(src='js/app.js')

the template I am loading in to view is: (simpleInject.html)

<button ng-click="sayHello()">Hello</button>

any one correct me please? Thanks in advance!

Answer 1

The 'greeter' is missing in the array of the controller declaration, it should be like this:

.controller('injectController', ['$scope', 'greeter', function ($scope, greeter) {

The sequence of string (dependencies), should match the parameters of the controller factory.