AngularJS простой "Привет, мир" не работает

Пытаясь следовать учебнику, я не могу заставить работать "Hello, world". Вместо этого он отображает: "{{greeting.text}}, мир". Использование Chrome и AngularJS 1.3.1.

index.html

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="angular.js"></script>
        <script src="app.js"></script>
        <!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />-->
    </head>
    <body>
        <div ng-controller='HelloController'>
            <p>{{greeting.text}}, world </p>
        </div>
    </body>
</html>

app.js

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

Структура моей папки

root/
    angular.js
    app.js
    index.html

Спасибо

Ответ 1

Надеюсь, это поможет.

index.html

<!DOCTYPE html>
<html ng-app="appname">

  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <link href="style.css" rel="stylesheet"/>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="appCtrl">
      <p>{{greeting.text}}, world </p>
    </div>
  </body>

</html>

script.js

var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.greeting = { text: 'Hello' };
}]);

http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview

Ответ 2

Отвечая на вопрос о том, что не так, и если они что-то изменили.

AngularJs Версия 1.2 или старше: Контроллер может быть функцией, не определенной в модуле. Как в вопросе.

контроллер

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

Angular Версия 1.3 или новее: контроллер должен быть определен в модуле. Как в ответе.

контроллер

var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.greeting = { text: 'Hello' };
}]);

Ответ 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        Enter text:
        <br />
        <input type="text" ng-model="hellomodel" />
        <br />
        <br />
        <h1>
            {{hellomodel}}</h1>
        <script language="javascript">
            var myapp = angular.module("myApp", []);
            myapp.controller("myCntrl", function ($scope) {
                $scope.hellomodel = "Hello World!";
            });
        </script>
    </div>
</body>
</html>

http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx

Ответ 4

Принятый ответ хорош, но я подумал, что воспользуюсь некоторыми ресурсами, которые я нашел полезными, если вы ищете лучшее понимание того, как все работает в Angular

Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
Формирование с помощью Angular www.codeschool.com/courses/shaping-up-with- angular -js

Оба являются совершенно бесплатными курсами и потому, что плейлист egghead.io разделен на видео для отдельных концепций, он также действительно хороший справочный материал.

angular.js руководство разработчика также очень полезно!