Question

尝试按照教程，我无法让“Hello，world”示例正常工作。而是显示：“{{greeting.text}}，world”。使用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

谢谢

Answer 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

Answer 2

回答问题是什么，如果他们改变了什么。

AngularJs 1.2或更早版本：控制器可能是未定义到模块中的函数。就像问题一样。

控制器

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

Angular Version 1.3或更新版本：必须将控制器定义到模块中。就像答案一样。

控制器

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

Answer 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

Answer 4

接受的答案很好但我认为如果您正在寻找更好地了解Angular中的工作方式，我会找到一些有用的资源

Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
与Angular合作www.codeschool.com/courses/shaping-up-with-angular-js

两者都是完全免费的课程，因为egghead.io播放列表被分成不同概念的视频，它也是非常好的参考资料。

angular.js developer guide也非常有帮助！

AngularJS简单的“Hello，world”无法正常工作

4 个答案: