AngularJS简介

来源：互联网发布：部落冲突英雄升级数据编辑：程序博客网时间：2024/06/05 21:08

AngularJS是一个 JavaScript 框架。它可通过script标签添加到 HTML 页面。
AngularJS扩展了 HTML，可以通过表达式将数据绑定到 HTML，可以根据需要操作DOM。
AngularJS以MVC的形式来运作，view是HTML模版，Model是需要处理和呈现的数据，Controller则是用户定义或框架内嵌的函数。

如下是个栗子：

html模版是view

<html ng-app="phonecatApp"><head>  ...  <script src="bower_components/angular/angular.js"></script>  <script src="app.js"></script></head><body ng-controller="PhoneListController">  <ul>    <li ng-repeat="phone in phones">      <span>{{phone.name}}</span>      <p>{{phone.snippet}}</p>    </li>  </ul></body></html>

data以及函数是Model和Controller

// Define the `phonecatApp` modulevar phonecatApp = angular.module('phonecatApp', []);// Define the `PhoneListController` controller on the `phonecatApp` modulephonecatApp.controller('PhoneListController', function PhoneListController($scope) {  $scope.phones = [    {      name: 'Nexus S',      snippet: 'Fast just got faster with Nexus S.'    }, {      name: 'Motorola XOOM™ with Wi-Fi',      snippet: 'The Next, Next Generation tablet.'    }, {      name: 'MOTOROLA XOOM™',      snippet: 'The Next, Next Generation tablet.'    }  ];});

注意，controller中的phones数据与view双大括号中的数据是绑定的，两个数据会同步更新。代码中的phonecatApp和PhoneListController与html中ng-app名和ng-controller名的一一对应。

AngularJS 指令

AngularJS 通过被称为指令（格式如：ng-**）的DOM属性来扩展 HTML。
通过这些AngularJS内置的指令来为应用添加功能。

栗子：

<div ng-app="" ng-init="firstName='John'">     <p>在输入框中尝试输入：</p>     <p>姓名：<input type="text" ng-model="firstName"></p>     <p>你输入的为： {{ firstName }}</p></div>

在本例中：
1.ng-app 指令初始化一个 AngularJS 应用程序。它定义了 AngularJS 应用程序的根元素。可以为ng-app赋值，并通过代码将此模块连接到代码。
2.ng-init 指令初始化这个AngularJS 应用程序的数据。
3.ng-model 指令把元素值（比如输入域的值）绑定到应用程序，因此在应用程序中可以使用这个变量名来获取元素的值。简单的说就是，ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。在本例中就是input输入的值，会变为变量firstName的值，可以在代码中引用和修改，并且在代码中的修改，也会同步反映在input输入框中。

{{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。{{ firstName }} 是通过 ng-model=”firstName” 进行同步。

另一个栗子：

<div ng-app="" ng-init="quantity=1;price=5">    <h2>价格计算器</h2>    数量： <input type="number"    ng-model="quantity">    价格： <input type="number" ng-model="price">    <p><b>总价：</b> {{ quantity * price }}</p></div>

另外，ng-repeat 指令会重复一个 HTML 元素

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">  <p>使用 ng-repeat 来循环数组</p>  <ul>    <li ng-repeat="x in names">      {{ x }}    </li>  </ul></div>

ng-hide和ng-show：
ng-hide=”true” 设置 HTML 元素不可见。ng-hide=”false” 设置 HTML 元素可见。ng-show=”false” 可以设置 HTML 元素不可见。ng-show=”true” 可以以设置 HTML 元素可见。

ng-click 指令定义了 AngularJS 点击事件。栗子：

<div ng-app="" ng-controller="myCtrl">    <button ng-click="count = count + 1">点我！</button>    <p>{{ count }}</p></div>

ng-disabled 指令绑定 HTML 的 disabled 属性。如果ng-disabled的值为false，则（按钮）可用。反之，（按钮）不可用。

<p>    <button ng-disabled="true">不可点</button></p>

AngularJS Scope(作用域)

Scope(作用域) 是 HTML 视图和 JavaScript 控制器之间的纽带。
Scope 是一个对象，有可用的方法和属性。

举一个栗子：

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

当在JS代码中添加 $scope 对象时，HTML就可以获取了这些属性。
在HTML中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

基于这样的操作模式，我们将JavaScript称为控制器，将HTML称为视图。
于是，AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。它是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 控制器

在HTML中，ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

示例代码：

<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{firstName + " " + lastName}}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.firstName = "John";    $scope.lastName = "Doe";});</script>

解析：
1、AngularJS 应用程序由 ng-app 定义。应用程序在 div内运行。
2、ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
3、myCtrl 函数是一个 JavaScript 函数。在代码中通过函数名myCtrl定义。
4、AngularJS 使用$scope 对象来调用控制器。
5、在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
6、控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
7、控制器在作用域中创建了两个属性 (firstName 和 lastName)。
8、ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

除此之外，控制器的$scope对象也可以添加方法，添加的方法可以在AngularJS的表达式中调用，形如：

 {{myFunction()}}

示例：

<div ng-app="myApp" ng-controller="personCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{fullName()}}</div><script>var app = angular.module('myApp', []);app.controller('personCtrl', function($scope) {    $scope.firstName = "John";    $scope.lastName = "Doe";    $scope.fullName = function() {        return $scope.firstName + " " + $scope.lastName;    }});</script>

AngularJS 过滤器

AngularJS 过滤器可用于转换数据，也就是将数据格式化为我们希望的格式。过滤器通过使用一个管道字符（|）添加到表达式和指令中。

使用实例：

{{ lastName | uppercase }} //格式化字符串为大写。{{ lastName | lowercase }} //格式化字符串为小写。{{ (quantity * price) | currency }} //格式化数字为货币格式。<li ng-repeat="x in names | orderBy:'country'">  {{ x.name + ', ' + x.country }}</li>//根据表达式排列数组<div ng-app="myApp" ng-controller="namesCtrl">    <p><input type="text" ng-model="test"></p>    <ul>        <li ng-repeat="x in names | filter:test | orderBy:'country'">            {{ (x.name | uppercase) + ', ' + x.country }}        </li>    </ul></div>//根据input的输入字符过滤结果。

最后这个如果不太懂的话可以实际操作一下，参见:
http://www.runoob.com/try/try.php?filename=try_ng_filters_input

AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。当然我们也可以创建自己的服务。
例如，在内建的服务中有个 $location 服务，它可以返回当前页面的 URL 地址。

var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $location) {    $scope.myUrl = $location.absUrl();// 服务，注意 $location 服务是作为一个参数传递到 controller 中。});

AngularJS的服务比起使用原生的JS函数的好处在于它被封装的很好，浏览器兼容性也比较高，能做到优雅降级。

下面列举几个常用的服务：
$http 服务、$timeout 服务、$interval 服务等。

另外，我们也可以创建自己的服务：

app.service('myService', function() {    this.myFunc = function (x) {        return x.toString(16);    }});//要使用访问自定义服务，需要在定义过滤器的时候独立添加.app.controller('myCtrl', function($scope, myService) {    $scope.hex = myService.myFunc(255);});

AngularJS的XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于获取远程服务器的数据。

它的使用格式很特别，将回调函数写在了then函数内，关于then函数，可以参见ES6的promise。

格式如下：

// GET 请求，可以将 method 改为 POST$http({    method: 'GET',    url: '/someUrl'}).then(function successCallback(response) {// 回调函数        // 请求成功执行代码    }, function errorCallback(response) {        // 请求失败执行代码});

response为请求返回的数据，包括如下几个属性：

data – {string|Object} – 请求得到的数据
status – {number} – http状态码，状态码在200-299被视为成功，回调用successCallback，否则为失败，调用errorCallback
headers – {function([headerName])} – 获取头部信息
config – {Object} – 用来获取请求的配置信息
statusText – {string} – http状态文本

设置头部信息：
HTTP服务会自动设置默认的请求的头部信息，可以通过访问和配置$httpProvider.defaults.headers来进行修改。如果想要添加或者覆盖默认的头部信息，只要对这些配置对象进行用户自定的修改和删除即可。
下面是一些默认的头部信息：

$httpProvider.defaults.headers.common (headers that are common for all requests):Accept: application/json, text/plain, */*$httpProvider.defaults.headers.post: (POST requests默认头部信息)Content-Type: application/json$httpProvider.defaults.headers.put (PUT requests默认头部信息)Content-Type: application/json

如果将某个头部信息设置成undefined，将会自动把该条头部信息删除。

var req = {    method: 'POST',    url: 'http://example.com',    headers: {      'Content-Type': "..."    }}

简写的方法：

$http.get('/someUrl', config).then(successCallback, errorCallback);

其中，successCallback和errorCallback分别为用户自定义的回调函数，用来处理请求成功和失败的情境。

另外，其他请求也都可以进行简写，例如
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

0 0