Контроллер Angular.js не работает

Я новичок в Angular и просматриваю видеоролики Intro to Angular с сайта Angular. Мой код не работает, и я понятия не имею, почему. я получаю ошибку

Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined

Вот мой код.

<!DOCTYPE html>

<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
        function MainController($scope) {
            $scope.message = "Controller Example";
        }
    </script>
</body>
</html>

Что я делаю не так?


javascript html angularjs angularjs-controller angularjs-module
person Halcyon    schedule 10.09.2015    source источник

Ответы (4)


arrow_upward
4
arrow_downward

После угловой версии 1.3 объявление функции глобального контроллера отключено

Вам нужно использовать модульный подход, чтобы заставить его работать.

Сначала вы должны определить angular.module, а затем включить в него угловые компоненты.

Демо

angular.module('app', [])
    .controller('MainController', function ($scope) {
        $scope.message = "Controller Example";
    })

Затем измените ng-app, чтобы использовать этот модуль ng-app="app"

person Pankaj Parkar    schedule 10.09.2015
comment
Это имеет смысл. Я полагаю, что видео Intro to Angular предназначено для версии 1.3. Эти видео действительно должны быть обновлены. - person Halcyon; 10.09.2015

arrow_upward
2
arrow_downward

Просто определение функции не будет контроллером. Вам нужно использовать так:

var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
    $scope.message = "Controller Example";
}

И обязательно используйте myApp в своем html следующим образом:

<html lang="en" ng-app="myApp">
person Bhojendra Rauniyar    schedule 10.09.2015
comment
Вау, мы даже выбрали одинаковые имена переменных - person CollinD; 10.09.2015
comment
@DavidL, о каком параметре ты говоришь? - person Bhojendra Rauniyar; 10.09.2015
comment
@BhojendraNepal вы должны сначала добавить имя контроллера ... тогда вторым параметром будет функция - person Pankaj Parkar; 10.09.2015
comment
@BhojendraNepal Смотрите сами. Демо - person Tushar; 10.09.2015
comment
@Tushar Я не понимал. - person Bhojendra Rauniyar; 10.09.2015

arrow_upward
1
arrow_downward 

function MainController($scope) {
  $scope.message = "Controller Example";
}

должно быть что-то более похожее

var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
  $scope.message = "Controller Example";
}

А затем включите директиву ng-app="myApp" в свой html.

person CollinD    schedule 10.09.2015

arrow_upward
0
arrow_downward

Это не то, как вы должны создавать контроллер...

Сначала вы должны создать модуль и контроллер в java-скрипте.

// start angular module (app) definition
angular.module('myApp',[''])
 .controller('MainController', function($scope) {
 $scope.message = "Controller Example";
 });

Теперь в вашем HTML

<!DOCTYPE html>

<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>

Теперь он начнет работать

Я предлагаю вам сначала пройти несколько уроков

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

Это хорошие уроки

person Sumodh S    schedule 10.09.2015