angularjs- 快速入門

 

 

剛開始接觸時老是去wiki或各類百科以瞭解一番。
它們會告訴我一些MVVM、雙向數據綁定、依賴注入等等名詞，以爲這些名詞好上檔次，而後我極可能就不打算用這個東西了。

AngularJS是什麼?

徹底使用 JavaScript編寫的客戶端技術。同其餘歷史悠久的 Web技術（ HTML、 CSS 和JavaScript）配合使用，使Web應用開發比以往更簡單、更快捷。

不考慮那些名詞，本篇幫助你快速瞭解AngularJS的基本用法。

感謝 @myqianlan 菊苣提醒，本文用的AngularJS版本爲1.2.x，1.3.x中再也不用本文中提到的方式聲明controller。

 

---

先從這段開始：

<div ng-app="" data-ng-init="name='Kavlez'"> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> {{name}} {{6+8}} </div> 

 

• ng-app:定義一個AngularJS應用，被其包含的內容都屬於該應用。
• ng-init:初始化應用數據。
• ng-model:將數據綁定到當前應用。
• ng-bind:將應用中定義的變量在該標籤中顯示

AngularJS的指令都是以ng開頭，或者也可使用data-ng開頭。 AngularJS的表達式用兩個大括號表示:{{expression}}
這即是AngularJS最基本的功能：數據綁定。

咱們能夠對各類類型進行綁定並顯示：

• Number

  <div ng-app="" ng-init="quantity=1;cost=5"> <p>Total : ￥{{ quantity * cost }}</p> </div> 

• String

  <div ng-app="" ng-init="firstName='Kavlez';lastName='Jin'"> <p>The name is {{ firstName + " " + lastName }}</p> </div> 

• Object

  <div ng-app="" ng-init="person={firstName:'Kavlez',lastName:'Jin'}"> <p>The name is {{ person.lastName }}</p> </div> 

• Array

  PS: 可使用ng-repeat進行迭代

  <div ng-app="" ng-init="myArr=[0,2,4,6,8]"> <p ng-repeat="element in myArr"> {{ element }} </p> </div> 

 

Controllers

咱們用controller對一個AngularJS應用進行控制。
用ng-controller定義一個controller，聲明全部被它包含的元素都屬於這個控制器。

例如：

<div ng-app="" ng-controller="personController"> <h1>{{ person.name +' is a(an) '+person.job }}</h1> <h1>{{ person.sayHi() }}</h1> </div> <script> function personController($scope) { $scope.person = []; $scope.person.name='Kavlez' $scope.person.job='brogrammer' $scope.person.sayHi = function(){ return "Hi! I'm "+ $scope.person.name + ", I'm a(an) " + $scope.person.job; } } </script> 

固然，咱們應該使用更高效的組織方式。
AngularJS支持將Controller定義在其餘js文件中，好比上面的例子能夠改成：

<div ng-app="" ng-controller="personController"> <h1>{{ person.name +' is a(an) '+person.job }}</h1> </div> <script type="text/javascript" src="js/app.js"></script> 

 

Module

到目前爲止，定義一個Angular app都用ng-app=""的方式。
可行，可是這個app下的變量和函數都是global的，並且會形成controller污染(pollute)。
而一般，咱們用module把app組織起來。 咱們能夠經過ng-app="名稱"或angular.modele()來聲明一個module。
該方法有兩個參數：

1. 模塊的名稱
2. 依賴列表

好比，以前的例子能夠改成：

<div ng-app="myApp" ng-controller="fighterController"> <script> var myApp = angular.module("myApp",[]); myApp.controller("fighterController", function($scope) { //.. } </script> </div> 

若是將app和controller放到兩個文件分別定義，則：

<div ng-app="myApp" ng-controller="fighterController"> <script src="myApp.js"></script> <script src="myAppControllers.js"></script> </div> 

myApp.js：

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

 

myAppControllers.js:

myApp.controller("fighterController", function($scope) { //.. } 

 

Filter

這個東西能夠加在表達式裏面，改變表達式的輸出格式。
咱們能夠用如下Filters：

Filter	Description
uppercase	轉大寫
lowercase	轉小寫
currency	轉貨幣格式
orderBy	按指定屬性排序
filter	按指定關鍵字進行過濾

前3種能夠直接用在表達式中，好比：

{{name | uppercase}}
{{name | lowercase}}
{{total | currency}}

 

filter和orderBy一般用於數組：

<div ng-app="" ng-controller="fighterController"> <input ng-model="search"/> <ul> <li ng-repeat="f in fighters|filter:search"> {{ f }} </li> </ul> <script> function fighterController($scope) { $scope.fighters = [ {name:'Ryu',country:'Japan'}, {name:'Ken',country:'USA'}, {name:'Chun Li',country:'China'}, {name:'GuiLe',country:'USA'}, {name:'Zangief',country:'Russia'} ]; } </script> </div> 

固然，數據不會這樣放在一個controller裏。
咱們能夠經過$http來請求數據並進行綁定。
上面的例子能夠改成：

function fighterController($scope,$http) { var url = '請求地址'; $http.get(url).success(function(response) { $scope.fighters = response; }) } 

 

 

 

 

 

+加關注

7