3

对于初学者来说，AngularJS 中最简单的“Hello World”是什么。到目前为止，我有这个：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <div data-ng-app="">
        {{'Hello World' }}
    </div>
    <script src="angular.js"></script>


</body>
</html>
4

3 回答 3

4

显示 2 路数据绑定的最简单的 Hello World

<!doctype html>
<html lang="en" ng-app>
<head>
    <title> Hello World </title>
</head>
<body ng-controller="MainCtrl">
    <h1>{{helloWorld}}</h1>
    <input type="text" ng-model="helloWorld"></input>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script type="text/javascript">
    function MainCtrl($scope){
        $scope.helloWorld = "Hello World";
    }
    </script>
</body>
</html>

编辑：解释一下这是什么以及为什么（在我看来）这是一个展示 AngularJS 强大功能的最小 Hello World 应用程序

  1. 需要包含 AngularJS 库
  2. 添加自定义属性ng-app以启动 Angular 应用程序。该指令指示 AngularJS 自动引导应用程序
  3. 添加了ng-controller指令，它的关联 javascript 函数显示通过将对象分配给注入的 $scope 来公开对象
  4. 双括号表达式{{helloWorld}}显示了 AngularJS 用于输出模型值的约定。
  5. ng-model指令用于绑定 helloWorld 对象并展示了 AngularJS 双向数据绑定的强大功能
于 2013-11-05T13:58:58.907 回答
2

最简单的 AngularJS 'Hello World' - “好方法”

<!doctype html>
<html data-ng-app="myApp">
    <head> 
        <!-- .... -->
    </head>
    <body>
        <div data-ng-controller="MyController">
            <input type="text" data-ng-model="name" />
            <p>Hello {{name}}</p>
        </div>
        <script src="angular.js"></script>
        <script>

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

            myApp.controller("MyController", ["$scope", function($scope) {
                $scope.name = "World";
            }]);
        </script>
    </body>
</html>
于 2013-11-05T15:40:59.140 回答
2

在 prettycode.org 上找到：

<!doctype html>
<html ng-app>
<head>
    <title> Hello World </title>
</head>
<body>
    Your name: <input type="text" ng-model="name"></input>
    <p ng-show="name">Hi, {{ name }}!</p>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
    </script>
</body>
</html>
于 2014-11-30T23:45:38.787 回答