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

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

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>

Что я делаю неправильно?

источник

2015-09-10 Halcyon

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

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

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

Demo

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

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

источник

2015-09-10 04:26:40

@Tushar Спасибо за демо codepen бхава :) –

Это имеет смысл. Вступление к угловому видео для версии 1.3, я считаю. Эти видео должны быть действительно обновлены. – Halcyon

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

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

и обеспечить, чтобы использовать MYAPP в вашем HTML, как это:

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

источник

2015-09-10 04:26:47

Вау, мы даже выбрали те же имена переменных – CollinD

@DavidL, о ком вы говорите? –

@BhojendraNepal вам следует добавить имя контроллера сначала. Тогда вторым параметром будет функция –

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.

источник

2015-09-10 04:27:33 CollinD

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

Сначала вы должны создать модуль и контроллер в Java Script

// 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/

https://docs.angularjs.org/tutorial

Вот некоторые хорошие учебники

источник

2015-09-10 04:32:53

<!DOCTYPE html> 
<html lang="en" ng-app="app"> 

    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Angular Demo</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 

    <script> 

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

    </script> 
    </head> 

    <body ng-controller="mainController as vm"> 
    <div > 
     <p>{{vm.message}}</p> 
    </div> 
    </body> 

</html>

источник

2015-09-10 05:02:59 salcad

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

ответ

Смежные вопросы