2015-10-24 5 views
0

Я пытаюсь изучить Angular.js. Я создал простую страницу, в которой я хочу отобразить сообщение из моего файла сценария. Вот HTML структура:Не могу заставить Angular.js работать

<!DOCTYPE html> 
<html ng-app> 
<head> 
<script data-require="[email protected]*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script> 
<link href="style.css" rel="stylesheet" /> 
<script src="script.js"></script> 
</head> 

<body ng-controller="MainController"> 
    <h1>{{message}}</h1> 
</body> 

</html> 

И это мой script.js:

var MainController = function($scope){ 
    $scope.message = "my message"; 
}; 

Я должен видеть слова my message на странице, но вместо этого я вижу буквально {{message}}. Я попытался обернуть JS-код в функции самозавершения:

(function() { 
    var MainController = function($scope) { 
     $scope.message = "my message"; 
    }; 
}()); 

Но он не имел никакого результата.

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

+3

Вы, кажется, используете Angular v1.x, но добавили скрипт v2. Кроме того, последние версии Angular v1.x не позволяют глобальным функциональным контроллерам. Вам нужно зарегистрировать функцию контроллера явно с помощью '.controller' метода' angular.module' –

ответ

0

Это старый синтаксис, и вы не можете объявить контроллер таким. Теперь вам нужно зарегистрировать контроллер на своем модуле.

angular.module('anyModuleName',[]).controller('yourControllerName',function(){ 
}); 

, а также редактировать до ng-app="anyModuleName", где вы инициализируете свое приложение. В вашем случае <html ng-app="anyModuleName">

+0

это неправильное ни для углового 2, которое включил OP – charlietfl

+0

Да, попробовал это, и это сработало! Большое спасибо! Как ни странно, он работал на моем локальном хосте, но когда я пробовал этот код на Plunker.co, у меня появилось это сообщение об ошибке: 'ReferenceError: угловое не определено' – Igal

+0

@charlietfl Итак, что же? Только для записи я сделал это в функции self-envoking: '(function() { var myApp = angular.module (" myApp ", []); myApp.controller ('MainController', ['$ scope' , function ($ scope) { $ scope.message = 'мое сообщение'; }]) }()); ' – Igal

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