Контроллер AngularJS не работает, почему? (Простой пример контроллера)

-1

Я просто видел видео введение в AngularJS и использовать следующий примерКонтроллер AngularJS не работает, почему? (Простой пример контроллера)

Этот HTML:

<!DOCTYPE html> 
<html ng-app> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 

<body ng-controller="MainContrl"> 

    <h2>{{message}}</h2> 

<script src="bower_components/angular/angular.min.js"></script> 
<script src="js/test.js"></script> 
</body> 
</html>

В JS:

var MainContrl = function($scope){ 
    $scope.message = "Hello friend"; 
};

В пример, который я видел, эта структура работает, но когда я тестирую ее, она не работает. Консоль дает мне эту ошибку:

Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MainContrl&p1=not%20a%20function%2C%20got%20undefined

Может использоваться таким образом контроллер? Или это плохая практика

Пример в Plunker: Code example

источник

2015-04-01 chalo

Вам необходимо создать модуль, а затем подключить к нему контроллер, но вызвать 'module.controller ('MainContrl', MainContrl)' – Casey

возможный дубликат [Почему глобальные функции считаются «неправильными» в Angular 1.3] (http : //stackoverflow.com/questions/27232551/why-are-global-functions-considered-wrong-in-angular-1-3) –

Строка ошибки, которую вы показываете, буквально дает ссылку на страницу, описывающую, что это не используя функцию «MainControl», как описывает @emodendroket. Это может показаться немного очевидным, но это особенность, которую я, безусловно, люблю в отношении AngularJS как рамки. –

Я думаю, что это плохая практика

вам лучше использовать:

var myApp = angular.module('myApp', []); 

myApp.controller('MainContrl', ['$scope', function ($scope) { 
    // any code here 
]);

и использовать это в HTML :

<html ng-app="myApp"> 
    <body ng-controller="MainContrl"> 
     // any code here 
    </body> 
</html>

источник

2015-04-01 14:03:14 valverde93

Вы, возможно, потребуется определить свой угловой App первый:

var myApp = angular.module('myApp', []); 

myApp.controller('MainContrl', function ($scope) { 
    $scope.message = "Hello friend"; 
});

вот working example on Plunkr

источник

2015-04-01 14:05:13 Khalid

Я думаю, что вы должны иметь основное приложение.

В myapp.js

var yourApp = angular.module('myApp',[]);

В mainController.js (не следует называть test.js)

yourApp.controller('MainController',['$scope',function($scope){ 

    $scope.message = "Hello world"; 

}]);

В вашем index.html

<html ng-app="myApp"> 

    <body ng-controller="MainController"> 
     {{message}} 
    </body>' 
<script src="bower_components/angular/angular.min.js"></script> 
<script src="js/myapp.js"></script> 
<script src="js/mainController.js"></script> 
</html>

источник

2015-04-01 14:05:32 petur

Смените свой сценарий.JS в

var app=angular.module('myapp',[]); 

app.controller('MainContrl', ['$scope', function($scope){ 
    $scope.message = "Hello friend"; 
}]);

и в HTML-пут нг-приложения в теге тела и удалить нг-приложение из HTML

<body ng-app="myapp" ng-controller="MainContrl">

источник

2015-04-01 14:08:00 Anita

Сначала объявить приложение в HTML:

<html ng-app="myApp">

Второй определите свое приложение в js:

var app = angular.module('myApp', []);

Затем definewhatever контроллер в любых файлов JS (лучших sugests практике, что каждый контроллер имеет свой собственный файл):

var MainContrl = function($scope){ 
    $scope.message = "Hello friend"; 
};

Затем объявить контроллер и переменные в HTML:

<body ng-controller="MainContrl"> 
    <h2>{{message}}</h2> 
</body>

Не забудьте связать контроллер с приложением:

app.controller('MainContrl',MainContrl);

Я также могу видеть, что вы используете беседку, поэтому я предлагаю вам прочитать: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

источник

2015-04-01 14:13:34 Fourat

Этот код не работает. Я бы посмотрел на нее второй раз. – Casey

Вы правы Я забыл что-то: 'app.controller ('MainContrl', MainContrl);' Я отредактирую ответ, спасибо http://plnkr.co/edit/QvbbjeYubpXYa3ZtXQsN?p=preview – Fourat

Контроллер AngularJS не работает, почему? (Простой пример контроллера)

ответ

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