AngularJS - 快速入门

AngularJS - 快速入门

刚开始接触时总是去wiki或各种百科以了解一番。
它们会告诉我一些MVVM、双向数据绑定、依赖注入等等名词，觉得这些名词好上档次，然后我很可能就不打算用这个东西了。

AngularJS是什么?

完全使用 JavaScript编写的客户端技术。同其他历史悠久的 Web技术（ HTML、 CSS 和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。

不考虑那些名词，本篇帮助你快速了解AngularJS的基本用法。

---

先从这段开始：

<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; }) } 

 

 

分类:  etc.

标签:  AngularJS