2015-04-15 5 views
1

Моя задача - показать Hello, Angular! в браузере, используя AngularJS.Страница AngularJS не загружается новичком

Это мой HTML:

<!DOCTYPE html> 
<html ng-app> 
    <head> 
     <title>Introduction to AngularJS Application</title> 
     <script src="Scripts/MyScripts/Example01Scripts.js"></script> 
    </head> 
    <body ng-controller="MainController"> 
     <h1>{{message}}</h1> 
    </body> 
</html> 

Это мой JavaScript:

/// <reference path="../angular.js" /> 
var MainController = function ($scope) { 
    $scope.message = "Hello, Angular!"; 
}; 

И вот что я получаю:

<h1>{{message}}</h1>

Это мой ожидаемый результат :

<!DOCTYPE html> 
<html ng-app> 
    <head> 
     <title>Introduction to AngularJS Application</title> 
     <script src="Scripts/MyScripts/Example01Scripts.js"></script> 
    </head> 
    <body ng-controller="MainController"> 
     <h1>Hello, Angular!</h1> 
    </body> 
</html> 

Интерполяция не работает должным образом. Почему это и как я могу это исправить?

+0

где вы объявили модуль? что такое имя модуля? –

+2

Вы, кажется, не включаете в себя библиотеку angularjs. –

+0

@Sergiu: Я добавил angular.js в качестве ссылки в свой файл JavaScript –

ответ

0

Я взял свой код и обновили его. У вас не было имени приложения в ng-app. Нажмите Run code snippet, чтобы увидеть, как он работает.

angular.module('myApp', []).controller('MainController', function($scope){ 
 
    $scope.message = "Hello, Angular!"; 
 
});
<html ng-app="myApp"> 
 
<head> 
 
    <title>Introduction to AngularJS Application</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body ng-controller="MainController"> 
 
    <h1>{{message}}</h1> 
 
</body> 
 
</html>

0

В HTML-коде вам не хватает Угловой код и имя вашего приложения в директиве ng-app.

На JS вам не хватает декларации модуля.

HTML должно быть что-то вроде

<!DOCTYPE html> 
<html ng-app="MyApp"> 
<head> 
    <title>Introduction to AngularJS Application</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="Scripts/MyScripts/Example01Scripts.js"></script> 
</head> 
<body ng-controller="MainController"> 
    <h1>{{message}}</h1> 
</body> 
</html> 

и ваши Example01Scripts.js должно быть что-то вроде:

angular.module('MyApp', []).controller('MainController', function($scope){ 
    $scope.message = "Hello, Angular!"; 
}); 
+0

, хотя я бы предпочел разделить JS на myApp.js для объявления модуля и myApp.ctrl.js для объявления контроллера –

0

Похоже, модуль отсутствовал. Создали сценарий с небольшим сценарием, который будет делать то, что вы хотели.

Code example here

+0

Пожалуйста, разместите свой код в ответе, чтобы, если связь ломается, это не бесполезно. –

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