AngularJS安装配置与基础概要整理（上）

以前整理的，可供参考。

安装：

1.首先要安装node.js和它的npm包管理系统。（nodejs相关待整理）

2.安装grunt

　　.grunt是一个基于任务的Javascript工程命令行构建工具。

　　在dos窗口输入：npm install grunt-cli -g

　　具体模块安装：npm install(grunt或grunt模块的名称) --save-dev

3.安装Karma runner

　　在dos窗口输入：npm install karma-cli -g

　　安装Karma：npm install karma --save-dev

　　安装你项目需要的组件：npm install karma-jasmine karma-chrome-launcher --sava-dev

4.下载angular.js

　　在这个网站下载：https://code.angularjs.org/

　　选定一个2.0以前的版本。

一、AngularJS简介

　　AngularJS是一个JavaScript框架。它可通过<script>标签添加到HTML页面。

　　AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。

1.AngularJS通过ng-directives扩展了HTML。

　　Ng-app指令定义一个AngularJS应用程序。

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

　　Ng-bind指令把应用程序数据绑定到HTML视图。

2.什么是AngularJS

　　AngularJS使得开发现代的单一页面应用程序变得更加容易。

　　·AngularJS把应用程序数据绑定到HTML元素。

　　·AngularJS可以克隆和重复HTML元素。

　　·AngularJS可以隐藏和显示HTML元素。

　　·AngularJS可以在HTML元素“背后”添加代码。

　　·AngularJS支持输入验证。

3.AngularJS指令

　　AngularJS指令是以ng作为前缀的HTML属性。

　　Ng-init指令初始化AngularJS应用程序变量。

　　* HTML5允许扩展的（自制的）属性，以data-开头。

　　AngularJS属性以ng-开头，但是可以使用data-ng-来让网页对HTML5有效。

4.AngularJS表达式

　　AngularJS表达式写在双大括号内：{{expression}}。

　　AngularJS表达式把数据绑定到HTML，这与ng-bind指令有异曲同工之妙。

　　AngularJS将在表达式书写的位置“输出”数据。

　　AngularJS表达式很像Javascript表达式：它们可以包含文字、运算符和变量。

5.AngularJS应用

　　AngularJS模块（module）定义了AngularJS应用。

　　AngularJS控制器（Controller）用于控制AngularJS应用。

　　Ng-app指令定义了应用，ng-controller定义了控制器。

　　AngularJS模块定义应用：

Var app = angular.module(‘myApp’,{});

　　AngularJS控制器控制应用：

App.controller(‘myCtrl’,function($scope){

　　$scope.firstName = “John”;

　　$scope.lastName = “Doe”;

})

二、AngularJS表达式

　　AngularJS使用表达式把数据绑定到HTML。

1.AngularJS数字

<div ng-app=”” ng-init=”quantity=1;cost=5”>

<p>总价：{{quantity * cost}}</p>

</div>

使用ng-bind的相同实例：

<div ng-app=”” ng-init=”quantity=1;cost=5”>

　　<p>总价：<span ng-bind=”quantity * cost”></span></p>

</div>

2.AngularJS字符串

<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”>

　　<p>姓名：{{firstName + “ “ + lastName}}</p>

</div>

使用ng-bind的相同实例：

<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe’”>

　　<p>姓名：<span ng-bind=”firstName + ‘ ‘ + lastName”></span></p>

</div>

3.AngularJS对象

<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”>

　　<p>姓为{{person.lastName}}</p>

</div>

4.AngularJS数组

<div ng-app=”” ng-init=”points=[1,15,19,2,40]”>

　　<p>第三个值为{{points[2]}}</p>

</div>

5.AngularJS表达式与JavaScript表达式

　　类似于JavaScript表达式，AngularJS表达式可以包含字母，操作符，变量。

　　与JavaScript表达式不同，AngularJS表达式可以写在HTML中；AngularJS表达式不支持条件判断，循环及异常；AngularJS表达式支持过滤器。

三、AngularJS指令

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

　　AngularJS通过内置的指令来为应用添加功能。

　　AngularJS允许你自定义指令。

1.AngularJS指令

　　AngularJS指令是扩展的HTML属性，带有前缀ng-。

　　Ng-app指令初始化一个AngularJS应用程序。

　　Ng-init指令初始化应用程序数据。

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

2.数据绑定

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

　　在下一个示例中，两个文本域是通过两个ng-model指令同步的。

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

3.重复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>

Ng-repeat指令用在一个对象数组上：

<div ng-app=”” ng-init=”names=[{name:’Jani’,country:’Norway’},{name:’Hege’,country:’Sweden’},{name:’Kai’,country:’Denmark’}]”>

　　<p>循环对象：</p>

　　<ul>

　　　　<li ng-repeat=”x in names”>

　　　　　　{{x.name + ‘,’ + x.country}}

　　　　</li>

　　</ul>

</div>

* AngularJS完美支持数据库的CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。把实例中的对象想象成数据库中的记录。

4.ng-app指令

　　Ng-app指令定义了AngularJS应用程序的根元素。

　　Ng-app指令在网页加载完毕时会自动引导（自动初始化）应用程序。

5.ng-init指令

　　Ng-init指令为AngularJS应用程序定义了初始值。

　　通常情况下，不使用ng-init。您将使用一个控制器或模块来代替它。

6.ng-model指令

　　Ng-model指令绑定HTML元素到应用程序数据。

　　Ng-model指令也可以：

　　·为应用程序数据提供类型验证（number、email、required）。

　　·为应用程序数据提供状态（invalid、dirty、touched、error）。

　　·为HTML元素提供CSS类。

　　·绑定HTML元素到HTML表单。

7.ng-repeat指令

　　Ng-repeat指令对于集合中（数组中）的每个项会克隆一次HTML元素。

8.创建自定义的指令

　　可以使用.directive函数来添加自定义的指令。

　　要调用自定义指令，HTML元素上需要添加自定义指令名。

　　使用驼峰法来命名一个指令，runoobDirective，但在使用它时需要以-分割，runoob-directive：

<body ng-app=”myApp”>

　　<runoob-directive></runoob-directive>

<script>

　　Var app = angular.module(“myApp”,[]);

　　App.directive(“runoobDirective”,function(){

　　　　Return{

　　　　　　Template : “<h1>自定义指令！</h1>”

　　　　};

　　});

</script>

</body>

　　可以通过以下方式来调用指令：

　　　　·元素名

　　　　·属性

　　　　·类名

　　　　·注释

　　以下实例方式也能输出同样结果：

　　元素名：

<runoob-directive></runoob-directive>

　　属性：

<div runoob-directive></div>

　　类名：

<div class=”runoob-directive”></div>

　　注释：

<!-- 指令：runoob-directive -->

*需要在该实例添加replace属性，否则评论是不可见的。

*必须设置restrict的值为”M”才能通过注释来调用指令。

<body ng-app=”myApp”>

　　<!-- directive: runoob-directive -->

　　<script>

　　　　Var app = angular.module(“myApp”,[]);

　　　　App.directive(“runoobDirective”,function(){

　　　　　　Return {

　　　　　　　　Restrict : “M”,

　　　　　　　　Replace : true,

　　　　　　　　Template : “<h1>自定义指令！</h1>”

　　　　　　};

　　　　});

　　</script>

</body>

9.限制使用

　　可以限制指令只能通过特定的方式来调用。

　　通过添加restrict属性，并设置值为”A”，来设置指令只能通过属性的方式来调用：

Var app = angular.module(“myApp”,[]);

　　App.directive(“runoobDirective”,function(){

　　　　Return {

　　　　　　Restrict : “A”,

　　　　　　Template : “<h1>自定义指令！</h1>”

　　　　};

　　});

　　Restrict值可以是以下几种：

　　　　·E只限元素名使用

　　　　·A只限属性使用

　　　　·C只限类名使用

　　　　·M只限注释使用

　　Restrict默认值为EA，即可以通过元素名和属性名来调用指令。

四、AngularJS模型

　　Ng-model指令用于绑定应用程序数据到HTML控制器(input,select,textarea)的值。

　　可以将输入域的值与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>

1.双向绑定

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

<div ng-app=”myApp” ng-controller=”myCtrl”>

　　名字：<input ng-model=”name”>

　　<h1>你输入了：{{name}}</h1>

</div>

2.验证用户输入

<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的情况下显示。

3.应用状态

　　Ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error)：

<form ng-app=”” name=”myForm” ng-init=”myText = ‘test@runoob.com’”>

　　Email:

　　<input type=”email” name=”myAddress” ng-model=”myText” required>

　　<p>编辑邮箱地址，查看状态的改变。</p>

　　<h1>状态</h1>

　　<p>Valid:{{myForm.myAddress.$valid}}(如果输入的值是合法的则为true)。</p>

　　<p>Dirty:{{myForm.myAddress.$dirty}}(如果值改变则为true)。</p>

　　<p>Touched:{{myForm.myAddress.$touched}}(如果通过触屏点击则为true)。</p>

</form>

4.CSS类

　　Ng-model指令基于它们的状态为HTML元素提供了CSS类：

<style>

Input.ng-invalid{

　　Background-color: lightblue;

}

</style>

<form ng-app=”” name=”myForm”>

　　输入你的名字：

　　<input name=”myName” ng-model=”myText” required>

</form>

<p>编辑文本域，不同状态背景颜色会发生变化</p>

<p>文本域添加了required属性，该值时必须的，如果为空则是不合法的。</p>

　　Ng-model指令根据表单域的状态添加/移除以下类：

　　·ng-empty

　　·ng-not-empty

　　·ng-touched

　　·ng-untouched

　　·ng-valid

　　·ng-invalid

　　·ng-dirty

　　·ng-pending

　　·ng-pristine