AngularJS使用笔记

2 年 ago

科, 颖

33 minutes

在阅读《AngularJS应用程序开发指南》时所做的笔记。

你好世界

获取AngularJS

从官方网站下载 angular.min.js。

写 HTML

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="helloWorld.js"></script>
    </head>
    <body>
        <h1 ng-controller="HelloWorldController">{{message}}</h1>
    </body>
</html>

angular.min.js を読み込む。

ng-app ディレクティブを付けたタグの中が、 AngularJS のテンプレートとして処理される。

ng-controller ディレクティブを付けたタグの中が、指定したコントローラと紐付けられる。

{{}} という記法で文字列を埋め込むことができる。

写JavaScript

function HelloWorldController($scope) {
    $scope.message = 'Hello World!!';
}

ng-controller ディレクティブで指定したのと同じ名前の関数を定義する。
引数の $scope を介して、画面にデータ（モデル）を公開することができる。

用浏览器查看

显示文本

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <div ng-controller="SampleController">
            <p>{{simple}}</p>
            <p ng-bind="directive"></p>
        </div>
    </body>
</html>

function SampleController($scope) {
    $scope.simple = '簡易記法を使った方法';
    $scope.directive = 'ディレクティブを使った方法';
}

表示结果 – .
说明结果 – .
阐明结果 – .
展示结果 – .
表示成果 – .

使用两种表示方法的区别。

或

区分使用两种表示方法。

在使用{{}}这种语法时，有可能在屏幕初始显示时瞬间显示出{{}}的状态。然而，如果使用ng-bind，则不会发生这样的情况。

所以，在初始页面模板中使用 ng-bind，而在后续的模板中使用 {{}} 可为佳。

填写表格

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <form ng-controller="SampleController">
            <input type="text" ng-model="text" />

            <input type="checkbox" ng-model="checkbox" />

            <input type="radio" name="hoge" value="HOGE" ng-model="radio" />HOGE
            <input type="radio" name="hoge" value="FUGA" ng-model="radio" />FUGA

            <select ng-model="select">
                <option value="foo">Foo</option>
                <option value="bar">Bar</option>
            </select>
        </form>
    </body>
</html>

function SampleController($scope) {
    $scope.text = 'TextBox';
    $scope.checkbox = true;
    $scope.radio = 'FUGA';
    $scope.select = 'foo';
}

执行结果 (shí jié guǒ)

ng-model で入力項目とモデル（$scope）を紐付けできる。

事件处理

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <div ng-controller="SampleController">
            <button ng-click="click()">Button</button>
            <p>{{message}}</p>
        </div>
    </body>
</html>

function SampleController($scope) {
    $scope.click = function() {
        $scope.message = 'click button!';
    };
}

执行结果

点击下方的按钮

关于编写调用HTML函数的方面

这是对《AngularJS应用开发指南》中所述描述的概括?

在这本书中，大概是主张如果使用AngularJS，写一个将函数调用到HTML的风格（声明性的事件处理程序）更好！

迄今为止的常识是“不引人注意的JavaScript”。

谦和的 JavaScript。

总之，就是要将“文档结构放在HTML中，将处理逻辑放在JavaScript中严格分离起来。不要在HTML中写入onclick之类的内容”这种观念。

JavaScript不是谦虚的。

<html>
    <head>
        <title>控えめじゃないJavaScript</title>
        <script src="sample.js"></script>
    </head>
    <body>
        <button onclick="hoge()">Button</button>
    </body>
</html>

function hoge() {
    alert('click!!');
}

谦虚的 JavaScript

<html>
    <head>
        <title>控えめな JavaScript</title>
        <script src="sample.js"></script>
    </head>
    <body>
        <button id="button">Button</button>
    </body>
</html>

window.onload = function() {
    document.getElementById('button').onclick = function() {
        alert('aaa!!');
    };
};

首先，为什么“不显眼的JavaScript”是好的呢？

解释有很多种，但在大多数情况下，以下观点是共通的。

如果混合文档结构和行为，将会产生难以阅读和维护的代码！

分离事件处理器的声明真的是一件好事吗？

イベントハンドラの登録処理がコードのあちこちに散在してしまうことで、コードが複雑になっている。

从现在起，到2021年，这个“理由”依然适用吗？

既然有些浏览器不支持JavaScript，那么在HTML中写JavaScript代码是不允许的！

「キャハハハ」

在当今时代，由于几乎已经过时了，JavaScript不再受支持的说法几乎成为了过去的故事，因此不再适用。

有些用户可能会对依赖JavaScript的页面有不好的感觉！

携帯電話も進化したもので、デスクトップマシンと同様に JavaScript を実行できるようなっている。

换句话说，这也是在说这个故事已经成为了过去的事情。

每个浏览器的事件处理调用方法都不同，所以很危险！

イベントの表記は ng-<イベント名> でブラウザに関係なく共通しているので、この問題は発生しない。

事件处理程序必须在全局范围内声明，这样不太好！

イベントハンドラは、必ず何かしらのスコープ変数の中で宣言されるから。

混合文档结构和行为会导致代码难以阅读和维护！

宣言的なイベントハンドラの方がシンプルで読みやすいよ！

换句话说，如果你使用AngularJS，最好使用声明性事件处理器！

循环处理

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <ul ng-controller="SampleController">
            <li ng-repeat="item in items">{{item.key}} : {{item.value}}</li>
        </ul>
    </body>
</html>

function SampleController($scope) {
    $scope.items = [
        {key: 'hoge', value: 'HOGE'}
        ,{key: 'fuga', value: 'FUGA'}
        ,{key: 'piyo', value: 'PIYO'}
    ];
}

图像显示

ng-repeat ディレクティブを指定したタグが、繰り返し処理される。

获取当前循环索引

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <ul ng-controller="SampleController">
            <li ng-repeat="item in items">{{$index}}</li>
        </ul>
    </body>
</html>

表示的画面

$index で現在のループ回数が取得できる（0 始まり）

切换封面和隐藏

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <div ng-controller="SampleController">
            <div ng-show="true">
                Visible
            </div>
            <div ng-show="false">
                Invisible
            </div>
        </div>
    </body>
</html>

封面画面

ng-show の値が true の場合はその DOM が表示され、 false の場合は非表示になる。

指定CSS类

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
        <style>
            .red {
                color: red;
            }

            .blue {
                color: blue;
            }

            .solid-border {
                border: 1px solid black;
            }

            .dotted-border {
                border: 1px dotted black;
            }

            li {
                margin-top: 10px;
            }
        </style>
    </head>
    <body ng-controller="SampleController">
        <ul>
            <li ng-class="hoge">hoge</li>
            <li ng-class="['blue', 'solid-border']">fuga</li>
            <li ng-class="{'red': isRed, 'dotted-border': isDotted}">piyo</li>
        </ul>
    </body>
</html>

function SampleController($scope) {
    $scope.hoge = 'red solid-border';
    $scope.isRed = true;
    $scope.isDotted = true;
}

画面展示

ng-class ディレクティブを使う。値には Angular 式を指定する。
Angular 式の評価結果が、

「文字列」の場合、 CSS クラス名の列挙（空白区切り）として処理される。
「配列」の場合、 CSS クラス名の配列として処理される。
「オブジェクト」の場合、各プロパティを CSS クラス名 : 有効かどうかの boolean と判断し、 true の CSS クラスだけが適用される。

自分が試した限りでは、配列やオブジェクトのキーは「文字列」にしないとうまく動作しなかった。

在中文中，将src属性和href属性绑定数据

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <img ng-src="./{{imageFileName}}" />
        <a ng-href="{{url}}">link</a>
    </body>
</html>

function SampleController($scope) {
    $scope.url = 'http://www.google.co.jp';
    $scope.imageFileName = 'hoge.png';
}

图像呈现

src 属性や href 属性に {{}} を使いたい場合は、それぞれ ng-src、と ng-href ディレクティブを使う。
なぜなら、 image タグなどは画面が表示されると同時に、 AngularJS のデータバインディングが実行される前に src 属性の URL にアクセスしてしまうため。

将模型的更改反映到视图中

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <h1>{{message}}</h1>

        <button ng-click="change()">change!!</button>
    </body>
</html>

function SampleController($scope) {
    $scope.message = 'hoge'

    $scope.change = function() {
        $scope.message = 'change!!'
    }
}

画面表达

点击下方按钮

$scope を通じてビューに表示している場合、 JS 側でその値が変われば、自動的に変更が画面に反映される。

使用 $watch 函数来监视变化。

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        hoge : <input type="number" ng-model="hoge" /><br />
        fuga : <input type="number" ng-model="fuga" /><br />
        <p>合計 : {{sum}}</p>
    </body>
</html>

function SampleController($scope) {
    $scope.hoge = 0;
    $scope.fuga = 0;
    $scope.sum = 0;

    $scope.$watch('hoge + fuga', 'sum = hoge + fuga');
}

画面表现

输入值到hoge。

请在fuga中输入一个值。

第一引数（watchFn）：監視する値を返す Angular 式（文字列）、または関数。
第二引数（watchAction）：値が変化した時に実行される Angular 式、または関数。
第三引数（deepWatch）：boolean 値を指定。 true を指定した場合、第一引数で指定した式（関数）が返した値のプロパティの変化も監視するようになる。

前面的例子使用了 Angular 表达式，但如果使用函数的话，将会是以下的方式。

function SampleController($scope) {
    $scope.hoge = 0;
    $scope.fuga = 0;
    $scope.sum = 0;

    $scope.$watch(
        function() {
            return $scope.hoge + $scope.fuga;
        },
        function() {
            $scope.sum = $scope.hoge + $scope.fuga;
        }
    );
}

定义模块

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <h1>{{message}}</h1>
    </body>
</html>

(function() {
    var myModule = angular.module('myModule', []);

    myModule.controller('SampleController', function($scope) {
        $scope.message = 'module';
    });
})();

图像呈现

ng-app の値に定義したモジュールの名前を渡す。

定义并加载多个模块

<html ng-app="myModule">
  <head>
    <script src="angular.min.js"></script>
    <script src="sample.js"></script>
  </head>
  <body>
    <h1>{{message}}</h1>
  </body>
</html>

angular
.module('hogeModule', [])
.service('hogeService', function() {
    this.method = function() {
        return 'hoge service';
    };
});

angular
.module('myModule', ['hogeModule'])
.run(function($rootScope, hogeService) {
    $rootScope.message = hogeService.method();
});

画面展示

angular.module() の第一引数は定義するモジュールの名前。第二引数はロードするモジュールの名前を配列で指定する。

在多个文件中跨模块定义相同模块的配置。

<html ng-app="myModule">
  <head>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <script src="HogeService.js"></script>
    <script src="FugaService.js"></script>
  </head>
  <body>
    <h1>{{hoge}}</h1>
    <h1>{{fuga}}</h1>
  </body>
</html>

angular
.module('myModule', [])
.run(function($rootScope, hogeService, fugaService) {
    $rootScope.hoge = hogeService.method();
    $rootScope.fuga = fugaService.method();
});

angular
.module('myModule')
.service('hogeService', function() {
    this.method = function() {
        return 'hoge service';
    };
});

angular
.module('myModule')
.service('fugaService', function() {
    this.method = function() {
        return 'fuga service';
    };
});

画面呈现

module(<モジュール名>, []) はモジュールの定義を上書きしてしまうので注意。
モジュールがまだ定義されていない状態で module(<モジュール名>) を使用するとエラーになる。

可以参考

モジュール | AngularJS 1.2 日本語リファレンス | js STUDIO

注入依赖实例（服务）

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <h1>{{message}}</h1>
    </body>
</html>

(function() {
    var myModule = angular.module('myModule', []);

    myModule.service('sampleService', SampleService);

    myModule.controller('SampleController', function($scope, sampleService) {
        $scope.message = sampleService.method();
    });

    function SampleService() {
        this.method = function() {
            return 'sample service';
        };
    }
})();

画面所展示的景象

第一引数は、サービスの名前。
第二引数は、サービスのコンストラクタ関数。

コントローラの引数に、登録したサービス名と同じ名前の変数を定義すると、その変数にサービスのインスタンスがインジェクションされる。
サービスインスタンスの生成が複雑な場合は、 factory() メソッドを使う。

通过factory()方法注册服务

(function() {
    var myModule = angular.module('myModule', []);

    myModule.factory('sampleService', function() {
        return {
            method: function() {
                return 'sample service created by factory.'
            }
        };
    });

    myModule.controller('SampleController', function($scope, sampleService) {
        $scope.message = sampleService.method();
    });
})();

画面展示

编译（压缩）策略

AngularJS通过根据控制器和服务的参数名称来进行依赖注入。

但是，当压缩源代码时，根据工具和设置的不同，变量名可能会被更改为像 a 这样的短名称。

如果这样的话，就无法进行 “根据名称的注入”，在运行时会发生错误。

在AngularJS中，为了应对这个问题，已经提供了一种明确指定依赖关系名称的方法。

var module = angular.module('myModule', []);

module.controller('SampleController', ['$scope', function(s) {
    s.message = 'hoge';
}]);

在控制器和服务定义时，将函数传递给一个数组。

然后，按照顺序列举参数的名称，最后放置函数体。

只要这样做，函数主体参数的名称可以是任何名称，并且在压缩后也可以正常运行。

使用过滤器来指定显示格式

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <h1>{{money | currency}}</h1>
    </body>
</html>

function SampleController($scope) {
    $scope.money = 1000;
}

画面展示

{{value | filter}} というふうに記述することで、表示形式を指定することができる（フィルターと呼ぶ）。

currency は、お金の表示（デフォルトはドル表記）。
フィルターには引数を渡せるものがあり、 {{value | filter:param1:param2}} というふうにコロン : 区切りで渡す。
フィルターのパラメータには Angular 式が使える。

标准过滤器

过滤器

{{ filter_expression | filter : expression : comparator }}

配列から条件に一致した要素だけを抽出するフィルター。

传递一个字符串给表达式

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <pre>{{array1 | filter:"g" | json}}</pre>
        <pre>{{array2 | filter:"h" | json}}</pre>
    </body>
</html>

function SampleController($scope) {
    $scope.array1 = ["hoge", "fuga", "piyo"];
    $scope.array2 = [
        "hoge",
        "fuga",
        {a: "hoge"},
        {a: "fuga"},
        {b: {c: "hoge"}},
        {b: {c: "fuga"}},
    ];
}

表示成果/表示结果

指定した文字列を含む文字列要素。
指定した文字列を含む文字列をプロパティの値として持つオブジェクト要素。

expression の文字列の先頭に ! をつけると条件を否定できる（指定した文字列を含まない要素を抽出できる）。

将一个对象传入表达式。

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <ul>
            <li ng-repeat="physicist in physicists | filter:{firstName:'e', lastName: 'l'}">
                {{physicist.firstName}} {{physicist.lastName}}
            </li>
        </ul>
    </body>
</html>

function SampleController($scope) {
    $scope.physicists = [
        {firstName: 'Johannes', lastName: 'Kepler'},
        {firstName: 'Galileo',  lastName: 'Galilei'},
        {firstName: 'Thomas',   lastName: 'Young'},
        {firstName: 'Michael',  lastName: 'Faraday'},
        {firstName: 'Edward',   lastName: 'Morley'},
        {firstName: 'Niels',    lastName: 'Bohr'}
    ];
}

表示结果

expression にオブジェクトを渡した場合、指定した全てのプロパティにおいて、指定した文字列を含むオブジェクト要素だけが抽出される。

传递函数到表达式

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        {{[1, 2, 3, 4, 5] | filter:isEvenNumber}}
    </body>
</html>

function SampleController($scope) {
    $scope.isEvenNumber = function(number) {
        return number % 2 == 0;
    };
}

表示结果 shì jié guǒ)

expression で関数を指定した場合、配列の各要素が関数に渡され、関数が true を返した要素だけが抽出される。

在comparator 中定义匹配条件

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <p>{{["a", "A", "ab", "c"] | filter:"a":true}}
        <p>{{["a", "A", "ab", "c"] | filter:"a":false}}
        <p>{{["a", "A", "ab", "c"] | filter:"a":contains}}
    </body>
</html>

function SampleController($scope) {
    $scope.contains = function(actual, expected) {
        return actual.indexOf(expected) != -1;
    };
}

表示成果

関数を指定した場合は、その関数が true を返した場合に一致していると判断される。

货币

{{ currency_expression | currency : symbol }}

{{1000 | currency:"￥"}}

￥1,000.00

引数でシンボルを変更できる（デフォルトは $）。

数字 (shù zì)

号码 mǎ)

{{ number_expression | number : fractionSize }}

{{1000 | number:3}}

1,000.000

引数で、小数点以下のサイズを指定できる。

日期

{{ date_expression | date : format }}

{{date | date:"yyyy/MM/dd HH:mm:ss.sss"}}

2014/04/30 13:20:33.912

引数でフォーマットを指定できる（詳細は API ドキュメントを参照）。

JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于阅读和编写。它被广泛应用于Web应用程序中的数据传输和存储。JSON采用了简洁的文本格式来表示结构化数据，以键值对的形式进行保存。它支持简单的数据类型，例如字符串、数字、布尔值和数组等。JSON的使用方便灵活，成为了现代开发中不可或缺的组成部分。

{{ json_expression | json }}

<pre>{{json | json}}</pre>

$scope.json = {
    hoge: 'HOGE',
    fuga: {
        a: true,
        b: false
    },
    piyo: [1, 2, 3]
};

表示结果

JavaScript のオブジェクトを JSON 形式の文字列で表示する。

小写字母和大写字母

{{ lowercase_expression | lowercase }}
{{ uppercase_expression | uppercase }}

<p>{{"HOGE" | lowercase}}</p>
<p>{{"fuga" | uppercase}}</p>

hoge

FUGA

大文字小文字を切り替える。

限制于

{{ limitTo_expression | limitTo : limit }}

<p>{{[1, 22, 333, 4444] | limitTo:3}}</p>
<p>{{"aBcDeFg" | limitTo:4}}</p>
<p>{{[1, 22, 333, 4444] | limitTo:-3}}</p>
<p>{{"aBcDeFg" | limitTo:-4}}</p>

[1,22,333]

aBcD

[22,333,4444]

DeFg

配列や文字列の長さより大きい値を引数で指定した場合は、エラーにならず全ての要素（文字）が表示される。

数组可能与ng-repeat等结合使用。

<ul>
    <li ng-repeat="value in [1, 2, 3, 4, 5] | limitTo : 3">{{value}}</li>
</ul>

表示结果

按照顺序排列

{{ orderBy_expression | orderBy : expression : reverse }}

使用函数来表达

<ul>
    <li ng-repeat="value in values | orderBy:myFunction">{{value.name}}({{value.age}})</li>
</ul>

$scope.values = [
    {name: 'taro',    age: 15},
    {name: 'takeshi', age: 12},
    {name: 'takuya',  age: 17}
];

$scope.myFunction = function(value) {
    return value.age;
};

表明结果

関数に配列の各要素が渡されるので、渡された要素の中からソートの基準にしたい値（比較演算子で比較できるもの）を取得して返す。

传递字符串给表达式

<ul>
    <li ng-repeat="value in values | orderBy:'age'">{{value.name}}({{value.age}})</li>
</ul>

-age のようにすれば、ソート順を逆にできる。

将数组传递给表达式

<ul>
    <li ng-repeat="value in values | orderBy:['age', 'height']">
        {{value.name}}({{value.age}})({{value.height}} cm)
    </li>
</ul>

$scope.values = [
    {name: 'taro',    age: 15, height: 165},
    {name: 'takeshi', age: 12, height: 155},
    {name: 'taichi',  age: 15, height: 160},
    {name: 'takuya',  age: 17, height: 170}
];

表明結果 (Express the result)

配列の各要素は文字列または関数を指定する（それぞれの使い方は前述の通り）。

制作自己的过滤器

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <h1>{{"hoge" | myFilter:"<":">"}}</h1>
    </body>
</html>

var module = angular.module('myModule', []);

module.filter('myFilter', function() {
    return function(value, param1, param2) {
        return param1 + value + param2;
    };
});

表示成果

フィルターには、第一引数にフィルターを適用した値、第二引数以降にフィルターのパラメータが渡される。

将过滤器连接起来

<pre>{{["hoge", "fuga", "piyo"] | filter:"g" | json}}</pre>

[
  "hoge",
  "fuga"
]

パイプのノリで、フィルターを連結することができる。

在 JavaScript 代码中操作使用过滤器

angular
.module('myModule', [])
.run(function($filter) {
    var filter = $filter('json');
    var str = filter({name: 'Taro', age: 17});
    console.log(str);
});

{
  "name": "Taro",
  "age": 17
}

$filter() 関数にフィルター名を渡すと、そのフィルターの関数を取得できる。

更改区域设置

获取 i18n 文件

从官方网站下载 AngularJS 时，选择以 ZIP 格式下载，解压后会发现里面有一个名为 i18n 的文件夹。

从这些文件中找到所需的区域设置文件。

读取 i18n 文件

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="angular-locale_ja-jp.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <h1>{{date | date:"yyyy/MM/dd EEE"}}</h1>
    </body>
</html>

function SampleController($scope) {
    $scope.date = new Date();
}

表明的結果

在页面的某个部分动态加载模板。

准备一个网络服务器

若要尝试这个，请通过Web服务器访问页面，由于浏览器安全限制的原因。

所以，准备一个Web服务器。

使用Python的SimpleHTTPServer，或者使用Apache、Tomcat、Jetty等，或者您自己选择一个。

添加ngRoute模块

如果你正在使用 zip 文件下载 AngularJS，那么在存放 angular.min.js 的文件夹里也应该有 angular-route.min.js，所以请按照它的路径加载。

简单的例子 de

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="sample.js"></script>
        <style>
            .border {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <h1>sample.html</h1>
        <div ng-view class="border"></div>
    </body>
</html>

var module = angular.module('myModule', ['ngRoute']);

module.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'RootController',
        templateUrl: 'root.html'
    });
});

module.controller('RootController', function($scope) {
    $scope.message = 'message by RootController.';
});

<h1>Root Template</h1>
<p>{{message}}</p>

在Web浏览器中访问sample.html。

表示成果

root.html文件已加载并渲染到指定了ng-view指令的DOM中的sample.html中。

解释

启用ngRoute模块。

        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>

var module = angular.module('myModule', ['ngRoute']);

angular-route.min.js を読み込み、モジュールを定義するときに ‘ngRoute’ を読み込むようにする。

指定一个动态加载的位置

        <div ng-view class="border"></div>

ng-view ディレクティブを指定した DOM が、動的ページ切り換えのターゲットとなる。

为每个URL指定要显示的模板和控制器。

module.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'RootController',
        templateUrl: 'root.html'
    });
});

module.controller('RootController', function($scope) {
    $scope.message = 'message by RootController.';
});

$routeProvider の when() メソッドで、 URL ごとに読み込むテンプレートとコントローラを指定する。
コントローラの指定は、コンストラクタ関数を渡すこともできる。

翻页

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="sample.js"></script>
        <style>
            .border {
                border: 1px solid red;
                padding: 0 0 10px 10px;
            }
        </style>
    </head>
    <body>
        <h1>sample.html</h1>
        <div ng-view class="border"></div>
    </body>
</html>

var module = angular.module('myModule', ['ngRoute']);

module.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'first.html'
    })
    .when('/next', {
        templateUrl: 'second.html'
    })
    .otherwise({
        templateUrl: 'not-found.html'
    });
});

<h1>First Page</h1>
<a href="#/next">next</a>

<h1>Second Page</h1>
<a href="#/">back</a>
<a href="#/aaaa">not found</a>

<h1>Page Not Found</h1>

画面呈现

点击链接↑

点击未找到

$routeProvider の when() 関数はメソッドチェーンができる。
URL は Hashbang で指定する（ただし、デフォルトはバングに当たる部分 ! がない）。

otherwise() 関数で、その他の URL が指定された場合のルーティングを定義できる。

获取URL路径的一部分作为参数

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <div ng-view></div>
    </body>
</html>

var module = angular.module('myModule', ['ngRoute']);

module.config(function($routeProvider) {
    $routeProvider
    .when('/:param', {
        templateUrl: 'sub.html',
        controller: function($scope, $routeParams) {
            $scope.paramValue = $routeParams.param;
        }
    });
});

<h1>param = {{paramValue}}</h1>

使用浏览器访问 http://localhost/sample.html#/hoge。

画面表现

$routeProvider でルーティングを定義するときに、 :<パラメータ名> という形式でパスを定義すると、その部分をコントローラで取得することができる。
パスは、コントローラの引数に $routeParams を定義して、 $routeParams.<パラメータ名> で取得できる。

不使用Hashbang

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <a href="hoge">/angular/hoge</a>
        <div ng-view></div>
    </body>
</html>

angular
.module('myModule', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/angular/hoge', {
        templateUrl: 'template.html'
    });
});

<h1>Template</h1>

画面的意思是指通过绘画、摄影或其他视觉媒介来表达思想、感情或场景的方式。

点击下面的链接

when() で指定するルート（route）は、ベース URL を基準とした絶対パスで指定する。

然而，如果在點擊連結後的畫面上按下 F5，將會跳轉到404頁面。似乎需要進行mode_rewrite等相應的處理。

AngularJSのURLリロード問題をmod_rewriteで対応 | Webエンジニアブログ

动态更改页面标题

<html ng-app="myModule">
  <head>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="sample.js"></script>

    <title ng-bind="title + ' - Sample'"></title>
  </head>
  <body>
    <a href="#/hoge">hoge</a>

    <div ng-view></div>
  </body>
</html>

angular
.module('myModule', ['ngRoute'])
.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        title: 'Top Page',
        template: '<h1>top</h1>'
    })
    .when('/hoge', {
        title: 'Hoge Page',
        template: '<h1>hoge</h1>'
    });
})
.run(function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
});

画面表示：以图像的形式来表达或展示。

或

画面展示：使用图像呈现或展示。

点击下方↓

title タグに ng-bind ディレクティブでタイトルを設定する。

$routeProvider でルーティングを定義する際、 when() メソッドのパラメータで title オプションを設定する。

module の run() メソッドの中で、 $rootScope.$on(“$routeChangeSuccess”, callback) を使用してタイトルの変更を反映させる。

参考的东西

javascript – How to dynamically change header based on angularjs partial view? – Stack Overflow

服务器请求

用于确认操作的服务器端实施

package sample.angular;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.text.StrBuilder;

@WebServlet("/ajax/*")
public class SampleServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    public void service(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException {
        System.out.println("[URL] " + req.getRequestURL());
        System.out.println("[Method] " + req.getMethod());
        System.out.println("[Query String] " + req.getQueryString() + " " + this.decodeQueryString(req));
        System.out.println("[Request Body]");
        System.out.println(this.getRequestBody(req));

        String message;

        if (req.getRequestURI().contains("error")) {
            res.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            message = "Error!!";
        } else {
            res.setStatus(HttpServletResponse.SC_OK);
            message = "Success!!";
        }

        if (Boolean.valueOf(req.getParameter("array"))) {
            this.writeResponseAsArray(res, message);
        } else {
            this.writeResponseAsObject(res, message);
        }
    }

    private StrBuilder getRequestBody(HttpServletRequest req) throws IOException {
        StrBuilder sb = new StrBuilder();

        try (BufferedReader br = req.getReader()) {
            String line;
            while ((line = br.readLine()) != null) {
                sb.appendln(line);
            }
        }

        return sb;
    }

    private String decodeQueryString(HttpServletRequest req) throws UnsupportedEncodingException {
        if (req.getQueryString() != null) {
            return "(" + URLDecoder.decode(req.getQueryString(), "UTF-8") + ")";
        } else {
            return "";
        }
    }

    private void writeResponseAsObject(HttpServletResponse res, String message) throws IOException {
        this.writeResponse(res, String.format("{\\"message\\": \\"%s\\"}", message));
    }

    private void writeResponseAsArray(HttpServletResponse res, String message) throws IOException {
        this.writeResponse(res, "[" + message + "]");
    }

    private void writeResponse(HttpServletResponse res, String text) throws IOException {
        try (PrintWriter writer = res.getWriter()) {
            writer.println(text);
        }
        res.flushBuffer();
    }
}

/ajax/ で始まる URI にアクセスがあった場合に、そのリクエスト情報をコンソールに出力する。
URL に error が含まれる場合は、 Internal Server Error を返す。
リクエストパラメータに array=true が含まれる場合は、レスポンスを配列形式の JSON にする。それ以外はオブジェクト形式の JSON 。

基本

<html ng-app>
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <pre>{{response | json}}</pre>
    </body>
</html>

function SampleController($scope, $http) {
    var uri = 'ajax/test';
    var param = {params: {hoge: 'HOGE', fuga: 'ふが'}};

    $http.get(uri, param)
         .success(function(data, status, headers, config) {
             log('success', data, status, headers, config);
         })
         .error(function(data, status, headers, config) {
             log('error', data, status, headers, config);
         });

    function log(type, data, status, headers, config) {
        $scope.response = {
            type: type,
            data: data,
            status: status,
            headers: headers,
            config: config
        };
    }
}

将上述文件部署到Tomcat中，以angular作为上下文路径，并在Web浏览器中访问http://localhost:8080/angular/sample.html。

画面呈现

服务器控制台输出

[URL] http://localhost:8080/angular/ajax/test
[Method] GET
[Query String] fuga=%E3%81%B5%E3%81%8C&hoge=HOGE (fuga=ふが&hoge=HOGE)
[Request Body]

$http をコントローラやサービスにインジェクションする。

$http にはサーバーにリクエストを飛ばすためのメソッド（HTTP のメソッドと対応している）が用意されている。
サーバーから返された文字列が JSON 形式の場合、自動的にデシリアライズされる。

生成一个用于操作 REST 资源的类

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="angular-resource.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
    </body>
</html>

var module = angular.module('myModule', ['ngResource']);

module.controller('SampleController', function($resource, $q) {
    var Res = $resource('ajax/res');

    Res.get().$promise
    .then(function() {
        return Res.save().$promise;
    })
    .then(function() {
        return Res.delete().$promise;
    });
});

[URL] http://localhost:8080/angular/ajax/res
[Method] GET
[Query String] null
[Request Body]

[URL] http://localhost:8080/angular/ajax/res
[Method] POST
[Query String] null
[Request Body]

[URL] http://localhost:8080/angular/ajax/res
[Method] DELETE
[Query String] null
[Request Body]

ngResource モジュールを読み込み有効にする。

$resource 関数を実行すると、指定した URL に基本的な REST リクエストを送信するメソッドを持ったオブジェクトが返される。

$resource 関数が返すオブジェクトをリソースクラス。リソースクラスに定義されている REST リクエスト用のメソッドをアクションと呼ぶ。

默认情况下在资源类中定义的操作方法

メソッド名対応する HTTP メソッドサーバーから返されることを期待している JSON の型getGETオブジェクトsavePOSTオブジェクトqueryGET配列removeDELETEオブジェクトdeleteDELETEオブジェクト

资源类动作方法的参数

如果是GET请求

Resource.action([parameters], [success], [error])

Res.get({a: 10}, function() {/*success*/}, function() {/*error*/});

如果不是 GET 请求的情况下

Resource.action([parameters], postData, [success], [error]);

Res.save({a: 11}, {b: 'Bbb'}, function() {/*success*/}, function() {/*error*/});

将参数嵌入请求路径中。

var module = angular.module('myModule', ['ngResource']);

module.controller('SampleController', function($resource, $q) {
    var Res = $resource('ajax/res/:hoge/:fuga/:piyo', {hoge: 'Hoge'});

    Res.get({fuga: 'Fuga'});
});

[URL] http://localhost:8080/angular/ajax/res/Hoge/Fuga
[Method] GET
[Query String] null
[Request Body]

$resource 関数の URL に :<パラメータ名> という書式でパスを書くと、リクエスト時に値を埋め込むことができる。

$resource 関数の第二引数で、パラメータに埋め込む値のデフォルト値を指定できる（前述の例の :hoge）。
パラメータを定義したものの、リクエスト時に値を指定しなかった場合、リクエストの URL からそのパラメータの部分は除去される（前述の例の :piyo）。

将参数嵌入请求数据中。

var module = angular.module('myModule', ['ngResource']);

module.controller('SampleController', function($resource, $q) {
    var Res = $resource('ajax/res/:hoge/:fuga', {hoge: '@hoge', fuga: '@fuga'});

    var param = {hoge: 'HOGE'};
    var postData = {hoge: 'Hoge', fuga: 'Fuga'};

    Res.save(param, postData);
});

[URL] http://localhost:8080/angular/ajax/res/HOGE/Fuga
[Method] POST
[Query String] null
[Request Body]
{"hoge":"Hoge","fuga":"Fuga"}

主に非 GET メソッドで有用。

在操作方法的成功函数中，接收资源类的实例。

var module = angular.module('myModule', ['ngResource']);

module.controller('SampleController', function($resource, $q) {
    var Res = $resource('ajax/res');

    Res.get(function(res) {
        console.log('(res instanceof Res) = ' + (res instanceof Res));
        console.log('res.message = ' + res.message);
        res.hoge = 'HOGE';
        res.$save();
    });
});

(res instanceof Res) = true
res.message = Success!!

[URL] http://localhost:8080/angular/ajax/res
[Method] GET
[Query String] null
[Request Body]

[URL] http://localhost:8080/angular/ajax/res
[Method] POST
[Query String] null
[Request Body]
{"message":"Success!!","hoge":"HOGE"}

リソースインスタンスのアクションを実行すると、リクエストデータにリソースインスタンスが持つプロパティが設定される。

顺便提一下，动作方法返回的是与成功时传递的相同资源实例。

var module = angular.module('myModule', ['ngResource']);

module.controller('SampleController', function($resource, $q) {
    var Res = $resource('ajax/res');

    var a;

    var b = Res.get(function(res) {
        a = res;
    });

    b.$promise.then(function() {
        console.log(a === b); // true
    });
});

この仕組みを利用すると、単純にサーバーから非同期で取得した値を画面に描画するだけなら、コールバック関数を書く必要がなくなる（アクションメソッドの戻り値を、そのまま $scope のプロパティにセットしてしまえば、あとは AngularJS が値の変更を監視し、値がセットされた時点で表示を更新してくれる）。

资源实例的动作方法参数

instance.$action([parameters], [success], [error]);

res.$save({a: 11}, function() {/*success*/}, function() {/*error*/});

定义一个自己的动作方法

var module = angular.module('myModule', ['ngResource']);

module.controller('SampleController', function($resource, $q) {
    var Res = $resource('ajax/res', {}, {myAction: {method: 'PUT'}});

    Res.myAction(function(res) {
        res.$myAction();
    });
});

[URL] http://localhost:8080/angular/ajax/res
[Method] PUT
[Query String] null
[Request Body]

[URL] http://localhost:8080/angular/ajax/res
[Method] PUT
[Query String] null
[Request Body]
{"message":"Success!!"}

$resource 関数の第三引数で独自のアクションメソッドを定義できる。
アクションメソッドの定義で指定できるオプションについては API ドキュメントを参照。

定义拦截器

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
    </body>
</html>

var module = angular.module('myModule', []);

module.config(function($httpProvider) {
    $httpProvider.interceptors.push(function($q) {
        return {
            request: function(config) {
                console.log('request : ' + config.url);
                return config || $q.when(config);
            },

            requestError: function(rejection) {
                console.log('requestError');
                return $q.reject(rejection);
            },

            response: function(response) {
                console.log('response : ' + response.config.url);
                return response || $q.when(response);
            },

            responseError: function(rejection) {
                console.log('responseError : ' + rejection.config.url);
                return $q.reject(rejection);
            }
        };
    });
});

module.controller('SampleController', function($http, $q) {

    $q.when($http.get('ajax/success'))
    .then(success, error)
    .then(function() {
        return $http.get('ajax/error');
    })
    .then(success, error);

    function success() {
        console.log('success');
    }

    function error() {
        console.log('error');
    }
});

request : ajax/success
response : ajax/success
success
request : ajax/error
responseError : ajax/error
error

$httpProvider.interceptors にインターセプターのファクトリー関数を push する。
インターセプターには、以下の４つの関数を定義できる

request：リクエスト送信前に処理を挟む。

requestError：リクエストの送信に失敗した場合に処理を挟む。

response：レスポンスを受け取った直後に処理を挟む。

responseError：エラーのレスポンスを受け取った直後に処理を挟む。

ver1.1.3 までは別の方法でインターセプターを実装していたようだが、 1.1.4 からは非推奨になっている。

定义自己的指令

基本 (jī

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <h1 my-hoge>some string</h1>
    </body>
</html>

angular
.module('myModule', [])
.directive('myHoge', function() {
    return {
        template: '<u>message = {{message}}</u>'
    };
})
.controller('SampleController', function($scope) {
    $scope.message = 'hoge';
});

画面表明

directive() メソッドには、ディレクティブの名前とファクトリ関数を渡す。
ファクトリ関数は、ディレクティブの設定を持つオブジェクトを返すようにする。
特に指定しない場合、定義したディレクティブはタグの属性として使用できる。

template は、ディレクティブを設定したタグの内容を、指定したテンプレート文字列で置き換える。

关于指令名称

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <h1 my-hoge>some string</h1>
        <h1 my:hoge>some string</h1>
        <h1 my_hoge>some string</h1>
        <h1 data-my-hoge>some string</h1>
        <h1 data-my:hoge>some string</h1>
        <h1 data-my_hoge>some string</h1>
        <h1 x-my-hoge>some string</h1>
        <h1 x-my:hoge>some string</h1>
        <h1 x-my_hoge>some string</h1>
    </body>
</html>

视觉图像表述

ただし、 HTML5 などの仕様に合わせるため、 data- などの接頭辞を付けることもできる。

改变指令的形式

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <my-hoge></my-hoge>
        <h1 my-fuga></h1>
        <h1 class=my-piyo></h1>
        <h2 my-piyo></h2>
    </body>
</html>

angular
.module('myModule', [])
.directive('myHoge', function() {
    return {
        restrict: 'E',
        template: '<h1>hoge</h1>'
    };
})
.directive('myFuga', function() {
    return {
        restrict: 'A',
        template: 'fuga'
    };
})
.directive('myPiyo', function() {
    return {
        restrict: 'CA',
        template: 'piyo'
    };
});

画面表达

DOM结构

restrict でディレクティブの形態を指定できる。

A ：属性として定義する。

E ：要素として定義する。

C ：class 属性の値として定義する。

AE のように複数の形態をまとめて定義できる。
省略した場合は A を指定したのと同じになる。

使用指定的模板替换 DOM 元素

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <my-hoge />
    </body>
</html>

angular
.module('myModule', [])
.directive('myHoge', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>hoge</h1>'
    };
});

画面显示

DOM 结构

replace に true を指定すると、要素を置き換える。

指定别的文件作为模板。

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <div my-hoge></div>
    </body>
</html>

angular
.module('myModule', [])
.directive('myHoge', function() {
    return {
        templateUrl: 'template.html'
    };
})
.controller('SampleController', function($scope) {
    $scope.message = 'hoge';
});

<h1>template.html</h1>
<h2>message = {{message}}</h2>

画面表达

templateUrl で別のファイルをテンプレートとして読み込むことができる。
Chrome を使用している場合は、セキュリティの都合上 Web サーバー経由でテンプレートを取得しなければならない。

将模板嵌入HTML文件中。

<html ng-app="myModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="sample.js"></script>
    </head>
    <body ng-controller="SampleController">
        <div my-hoge></div>
    </body>
</html>

<script type="text/ng-template" id="hogeTemplate">
<h1>message = {{message}}</h1>
</script>

angular
.module('myModule', [])
.directive('myHoge', function() {
    return {
        templateUrl: 'hogeTemplate'
    };
})
.controller('SampleController', function($scope) {
    $scope.message = 'hoge';
});

画面展示

DOM 结构