Question

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

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

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


</body>
</html>

Answer 1

最简单的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>

修改：关于什么是什么以及为什么这是（在我看来）一个最小的Hello World应用程序展示了AngularJS的强大功能的一些解释

需要包含AngularJS库

将自定义属性 ng-app 添加到角度应用程序的踢法中。该指令指示AngularJS自动引导应用程序

添加了 ng-controller 指令，它的关联javascript函数显示通过将对象分配给注入的$ scope
来公开对象
双括号表达式 {{helloWorld}} 显示AngularJS用于输出模型值的约定。

ng-model 指令用于绑定helloWorld对象并显示AngularJS双向数据绑定的强大功能

Answer 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>

Answer 3

在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>

在教一个初学者AngularJs时，你认为最简单的最小的AngularJs'Hello World'例子

3 个答案: