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

双方向データバインディングを示す最も単純な 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

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 に答える
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 に答える