AngularJS入门笔记(上)

2016-03-10

01AngularJS简介

AngularJS是一个JavaScript框架。它通过<script>标签添加到HTML页面。
AngularJS通过指令扩展HTML，且通过表达式绑定数据到HTML。

AngularJS扩展了HTML

AngularJS通过ng-directives（指令）扩展了HTML

ng-app 指令定义一个AngularJS应用程序
ng-model 指令把元素值（比如输入域的值）绑定到应用程序
ng-bind 指令把应用程序数据绑定到HTML视图

什么是AngularJS

AngularJS使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易

AngularJS把应用程序数据绑定到HTML元素
AngularJS可以克隆和重复HTML元素

AngularJS指令

AngularJS指令是以ng作为作为前缀的HTML属性
ng-init 指令初始化AngularJS应用程序变量

1
2
3

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

AngularJS表达式

AngularJS表达式写在双括号内：
AngulsrJS表达式把数据绑定到HTML，这与nb-bind指令有异曲同工之妙
AngularJS将在表达式书写的位置“输出”数据

AngularJS应用

AngularJS 模块（Module）定义了AngularJS应用
AngularJS 控制器（Controller）用于控制AngularJS应用
ng-app 定义了应用，ng-controller定义了控制器
AngularJS实例

<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>
    // AngularJS模块定义应用：
    var app = angular.module('myApp', []);
    // AngularJS控制器控制应用：
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
</script>

02AngularJS表达式

AngularJS表达式可以包含数字、字符串、对象、数组等

1	<p>你输入的为： {{ firstName }}</p>

实例中的表达式是一个 AngularJS 数据绑定表达式。

03AngularJS指令

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

数据绑定

AngularJS中的数据绑定，同步了AngularJS表达式和AngularJS数据
是通过ng-model=”firstName”进行同步的

重复HTML元素

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>

AngularJS完美支持数据库的CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序

ng-app指令

ng-app定义了AngularJS应用程序的根元素
ng-app指令在网页加载完毕时会自动引导（自动初始化）应用程序

ng-init指令

ng-init 为AngularJS应用程序定义了初始值

ng-model指令

ng-model指令绑定HTML元素到应用程序数据
ng-model指令也可以：

为应用程序数据提供类型验证（number、email、required）
为应用程序数据提供状态（invalid、dirty、touched、error）
为HTML元素提供CSS类
绑定HTML元素到HTML表单

ng-repeat指令

ng-repeat 指令对于集合中的每个元素会克隆一次HTML元素

创建自定义的指令

使用.directive函数来添加自定义的指令，要调用自定义指令，HTML元素上需要添加自定义指令名；可以是元素名、属性、类名、注释。
使用驼峰法来命名一个指令，runoobDirective，但在使用的时候，以“-”分割，runoob-directive。

<body ng-app="myApp">
    <!-- 元素名 -->
    <runoob-directive></runoob-directive>
    <!-- 属性 -->
    <div runoob-directive></div>
    <!-- 类名 -->
    <div class="runoob-directive"></div>
    <!-- 注释 -->
    <!-- 指令：runoob-directive -->
    <script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            restrict : "C",     // 对应的通过类名来调用指令
            restrict : "M",     // 对应的通过注释类调用指令
            replace : true,     // 注释指令所必须的
            template : "<h1>自定义指令!</h1>"
        };
    });
    </script>
</body>

restrict值可以是以下几种：
E：只限元素名使用
A：只限属性使用
C：只限类名使用
M：只限注释使用
rescrict默认值为EA，即通过元素名和属性名来调用指令。

04模型

ng-model指令用于绑定应用程序数据到HTML控制器（input、select、textarea）的值。

ng-model指令

ng-model指令将输入域的值与AngularJS创建的变量绑定

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

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

双向绑定

在修改输入域的值时，AngularJS属性的值也将修改：

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

验证用户输入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

以上实例中，提示信息会在ng-show属性返回true的情况下显示

应用状态

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}     如果输入的值是合法的则为 true
    {{myForm.myAddress.$dirty}}     如果值改变则为 true
    {{myForm.myAddress.$touched}}   如果通过触屏点击则为 true
</form>

CSS类

ng-model指令基于他们的状态为HTML元素提供了CSS类

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

05 Scope（作用域）

Scope（作用域）是应用在HTML（视图）和JavaScript（控制器）之间的纽带
Scope是一个对象，有可用的方法和属性，这些属性和方法可以在视图和控制器中使用。

使用Scope

当在AngulsrJS创建控制器时，可以将$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>

当在控制器中添加$Scope对象时，视图（HTML）可以获取了这些属性。
视图中，不需要添加$Scope前缀，只需要添加属性名即可，如

Scope作用范围

<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in names">{{x}}
    </ul>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
    });
</script>

当我们使用ng-repeat指令时，每个重复项都访问了当前的重复对象

根作用域

所有的应用都有一个$rootScope，它可以作用在ng-app指令包含的所有HTML中
$rootScope可作用于整个应用中，是各个controller中scope桥梁。

<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{lastname}} 家族成员:</h1>
    <ul>
        <li ng-repeat="x in names">{{x}} {{lastname}}
    </ul>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.lastname = "Refsnes";
    });
</script>

创建控制器时，将$rootScope作为参数传递，可在应用中使用。

06控制器

AngularJS控制器控制AngularJS应用程序的数据
AngularJS控制器是常规的JS对象

AngularJS控制器

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

<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>

ng-controller=”myCtrl”属性是一个AngularJS指令，用于定义一个控制器。
myCtrl函数是一个JS函数
AngularJS使用$scope对象来调用控制器
在AngularJS中，$scope是一个应用象（属于应用变量和函数）
控制器的$scope（相当于作用域、控制范围）用来保存AngularJS Model（模型）的对象。
ng-model指令绑定输入域到控制器的属性

控制器方法

<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>

07过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中，更改视图的显示

AngularJS过滤器

过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	格式化字符串为大写

表达式中添加过滤器

1
2
3

<div ng-app="myApp" ng-controller="personCtrl">
    <p>姓名为 {{ lastName | uppercase }}</p>
</div>

uppercase过滤器将字符串格式化为大写

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
<div>

orderBy过滤器根据表达式排列数组

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

<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>

fileter过滤器从ul数组中过滤包含ng-model=”test”为条件的子集。

08Service服务

AngularJS中你可以创建自己的服务，或使用内建服务

什么是服务

在AngularJS中，服务是一个函数或对象，可在AngularJS应用中使用
其中$location服务，它可以返回当前页面的URL地址

<div ng-app="myApp" ng-controller="myCtrl">
    <p> 当前页面的url:</p>
    <h3>{{myUrl}}</h3>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $location) {
        $scope.myUrl = $location.absUrl();
    });
</script>

$location服务是作为一个参数传递到controller中。

为什么使用服务？

$http是AngularJS应用中最常用的服务，服务向服务器发送请求，应用响应服务器传送过来的数据。
AngularJS会一直监控应用，处理事件变化，AngularJS使用$location服务比使用window.loacation对象更好

$http服务

向服务器发送请求，并响应服务器传送过来的数据显示在页面上。

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
      $http.get("welcome.htm").then(function (response) {
          $scope.myWelcome = response.data;
      });
    });
</script>

$timeout服务

设置两秒后更改显示

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval服务

每隔一秒显示一次本地时间

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务

// 创建名为hexafy的服务
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
// 使用自定义的服务hexafy将一个数字转换为16进制数
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

09Http

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

<div ng-app="myApp" ng-controller="customersCtrl"> 
    <ul>
      <li ng-repeat="x in names">
        {{ x.Name + ', ' + x.Country }}
      </li>
    </ul>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
        .success(function(response) {$scope.names = response.records;});
    });
</script>

$http.get()从web服务器上读取静态JSON数据
当从服务器端载入JSON数据时，$scope.names变为一个数组。

10Select选择框

AngularJS可以使用数组或对象创建一个下拉列表选项

使用ng-options创建选择框

<div ng-app="myApp" ng-controller="myCtrl">
    <!-- 第一种 -->
    <select ng-model="selectedName" ng-options="x for x in names">
    </select>
    <!-- 第二种 -->
    <select>
        <option ng-repeat="x in names">{{x}}</option>
    </select>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["Google", "Runoob", "Taobao"];
    });
</script>

11AngularJS表格

ng-repeat指令可以完美的显示表格

实例

<div ng-app ng-controller="customersCtrl">
    <table>
                                <!-- ↓↓↓使用orderBy过滤器 -->
        <tr nb-repeat="x in names | orderBy : 'Country'">
            <!-- ↓↓↓使用$index给表格添加序号(index默认从0开始) -->
            <td>{{$index + 1}}</td>
            <td>{{x.Name}}</td>
                            <!-- ↓↓↓使用uppercase过滤器 -->
            <td>{{x.Country | uppercase}}</td>
        </tr>
    </table>
</div>
<script>
    var app = angular.module('myApp',[]);
    app.controller('customersCtrl',function($scope,$http){
        $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
        .success(function(response){$socpe.names = response.records;});
    });
</script>

技术博客

01AngularJS简介

AngularJS扩展了HTML

什么是AngularJS

AngularJS指令

AngularJS表达式

AngularJS应用

02AngularJS表达式

03AngularJS指令

数据绑定

重复HTML元素

ng-app指令

ng-init指令

ng-model指令

ng-repeat指令

创建自定义的指令

04模型

ng-model指令

双向绑定

验证用户输入

应用状态

CSS类

05 Scope（作用域）

使用Scope

Scope作用范围

根作用域

06控制器

AngularJS控制器

控制器方法

07过滤器

AngularJS过滤器

表达式中添加过滤器

向指令添加过滤器

过滤输入

08Service服务

什么是服务

为什么使用服务？

$http服务

$timeout服务

$interval服务

创建自定义服务

09Http

10Select选择框

使用ng-options创建选择框

11AngularJS表格

实例