基本介紹

基本架構

[Model] 模塊

主要指的是ng-app，定义了 AngularJS 应用。

[Controller] 控制器

主要指的是ng-controller，用于控制 AngularJS 应用。

[如何引用]

掛javascript檔案

開放的檔案:

Google : https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js
AngularJS :

基本指令

AngularJS 通过被称为指令的新属性来扩展 HTML。

通过 ng-directives 擴充HTML属性功能，带有前缀 ng-。

主要透過宣告以下幾種屬性在html的tag內

另外由於HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许自定义指令

[ng-app] (data-ng-app)

該指令初始化一个 AngularJS 应用程序。定義AngularJS 应用程序

在指定的區塊內宣告該屬性，開始處理AngularJS

ng-model和ng-bind的宣告都會在此元素(div)內

ng-app 指令告诉 AngularJS，div元素是 AngularJS 应用程序的"所有者"。

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

<div ng-app="">
  <input type="text" ng-model="firstName">
  <p>顯示 ng-model="firstName" = {{firstName}}</p>
  <p>也可以這樣顯示 <span ng-bind="firstName"></span></p>
</div>

html5用data擴充

<div data-ng-app="" data-ng-init="firstName='John'">
  <input name="firstName" data-ng-model="firstName">
  <p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>

[ng-model] (data-ng-model)

此指令把元素值（比如输入域的值）绑定到应用程序。

指定變數的設定

[ng-bind] (data-ng-bind)

對應na-model將變數輸出的view

顯示部分，可在tag內宣告此屬性，獲是直接數出{{變數}}

除了宣告屬性ng-bind外，也可以運用AngularJS表達式**宣告

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

  <p>也可以這樣顯示 <span ng-bind="firstName"></span></p>
  <p>顯示 ng-model="firstName" = {{firstName}}</p>

[ng-init]

此指令初始化应用程序数据。初始化(預設值)設定

針對變數的初始化，設定在ng-app宣告的同個dom

多變數用「;」區隔

使用 ng-init 不是很常见。

您将在控制器一章中学习到一个更好的初始化数据的方式。

<div ng-app="" ng-init="firstName='weiwei';phone='0911111111'">
  <input type="text" ng-model="firstName">
  <input type="text" ng-model="phone">
  <p>顯示 ng-model="firstName" = {{firstName}}</p>
  <p>也可以這樣顯示 <span ng-bind="firstName"></span></p>
  <p>顯示 ng-model="phone" = <span ng-bind="phone"></span></p>
</div>

[ng-controller]

定應控制的部分。透過script來進行操作

宣告app部分 : var MyApp = angular.module('ng-app的名稱', []);
呼叫method : MyApp.controller('ng-controller的名稱', function($scope) {});
透過$scope物件呼叫ng-model變數

<div ng-app="myApp" ng-controller="myCtrl">
  名: <input type="text" ng-model="firstName"><br>
  姓: <input type="text" ng-model="lastName"><br><br>
  姓名: {{firstName + " " + lastName}}
    <br>
  a: <input type="text" ng-model="a"><br>
  b: <input type="text" ng-model="b"><br><br>
    a + b = <span ng-bind="a + b"></span><br>
    a + b = {{a+b}} <br>
    a * b = <span ng-bind="a * b"></span><br>
    a * b = {{a*b}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
    $scope.a= 1;
    $scope.b= 1;
});
</script>

由於+也表示字串合併，所以當需要數值字串合併時，會有些狀況....(目前尚未找到解決辦法)

表達式

AngularJS 表达式写在双大括号内：**。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
與javascript的比較:
- 似JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
- 与JavaScript不同，AngularJS 表达式可以写在 HTML 中。
- 与JavaScript不同，AngularJS 表达式不支持条件判断(if)，循环(for)及异常
- 与JavaScript不同，AngularJS 表达式支持过滤器。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<div ng-app="" ng-init="quantity=1;cost=5">
    quantity:<input ng-model="cost" value=""><br>
    cost:<input ng-model="quantity" value=""><br>
    <p>quantity x cost = <span ng-bind="quantity * cost"></span></p>
</div>

[數值]

<div ng-app="" ng-init="a=11;b=2">
  a: <input type="text" ng-model="a"><br>
  b: <input type="text" ng-model="b"><br><br>
  <p>a * b = <span ng-bind="a * b"></span></p>
  <p>a / b = <span ng-bind="a / b"></span></p>
  <p>a % b = <span ng-bind="a % b"></span></p>
  <p>(被轉為字串了...)a + b= <span ng-bind="a + b"></span></p>
</div>

由於+也表示字串合併，所以當需要數值字串合併時，會有些狀況....(目前尚未找到解決辦法)

[字串]

運用 + 來連結字串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
  <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

[Object]

Object的設定同Javascript一樣，指定大括號{}，

呼叫方式一樣透過.

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    <input ng-model="person.lastName">
    <p>姓为 {{ person.firstName + " " + person.lastName }}</p>
</div>

[Array]

陣列(數組)同Javascript一樣，

不過目前不知道如何在ng-init內指定'a'=>'hihi'....

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    points['a'] = <input ng-model="points['a']"><br>
    points[2] = <input ng-model="points['2']"><br>
    <p>points[2] {{ points[2] }},{{points['2']}}</p>
    <p>points['a']= {{ points['a'] }}</p>
</div>

基本操作