AngularJs基础学习-1

简介

1、AngularJs 是一个JS框架，是以一个JavaScript编写的库，是以一个JS文件形式发布的。通过标签添加到HTML页面，通过指令扩展了HTML，通过表达式绑定数据到HTML。

2、AngularJs通过directives扩展了HTML

ng-app: 指令定义一个ng应用程序。

ng-model: 指令把元素值（如输入域的值）绑定到应用程序数据。

ng-bind: 指令把应用程序数据绑定到HTML视图（innerHTML)。

当网页加载完毕，AngularJs自动开启。

3、什么是AngularJs

AngularJs使开发现代的单一页面应用程序（SPAS）更加容易。

①、AngularJs可以把应用程序数据绑定到HTML上；

②、AngularJs可以克隆和重复HTML元素；

③、AngularJs可以隐藏和显示HTML元素；

④、AngularJs可以在HTML元素背后添加代码；

⑤、AngularJs支持输入验证；

4、AngularJs 指令是以‘ng’ 作为前缀的HTML属性

ng-init: 指令初始化ng应用程序变量；

表达式

1、定义：

AngularJs表达式写在 {}大括号内，表达式把数据绑定到HTML上，与ng-bind指令异曲同工；

AngularJs在表达式书写的位置 “输出”数据；

AngularJs表达式可以包含文件、运算符和变量。

例如：{}、{}

2、表达式：

ng数字 ： ng-init="quantity=1;cost=5"

ng字符串：ng-init="firstName='John';lastName='Li' "

ng对象：ng-init="person=" 调用==》person.firstName

ng数组：ng-init="point=[1,2,3,4]" 调用==》point[2]

ng对象数组： ng-init = "names=[,,{name:'xiaoming',age:35}]"

3、AngularJs表达式和JavaScript表达式的区别：

①、AngularJs表达式可以写在HTML中；

②、AngularJs表达式不支持条件判断、循环及异常；

③、AngularJs表达式支持过滤器；

应用

①、AngularJs模块（module）：定义了AngularJs应用；

②、AngularJs控制器（controller）：用于控制AngularJs应用；

③、ng-app ：指令指明了应用；

注意：

①、ng-app是一个特殊的指令，一个HTML文档中只出现一次，如果出现多次也只有第一个起作用，ng-app可以出现在HTML文档的任何一个元素上。

②、一个页面里创建多个ng-app手动加载即可。（需要在应用上添加id属性）

var app1 = angular.module("myapp1",[]);//自动加载

var app2 = angular.module("myapp2",[]);//手动加载第一步

angular.bootstrap(document.getElementById('idname'),['app2']);//手动加载第二步

③、一个应用（ng-app）内可以有多个控制台。

指令

1、AngularJs是通过‘指令’的新属性来扩展HTML，包括内置指令和自定义指令。

2、数据绑定：{} 表达式是一个AngularJs数据绑定表达式

{} 是通过 ng-model="firstName" 进行数据同步（数据的双向绑定）

3、重复HTML元素

ng-repeat: 指令会重复一个HTML元素，该指令用在一个对象数组上，对于集合中（数组中）的每个项会克隆一次HTML元素。

ng-repeat = "x in name" ==>{}

4、创建自定义指令

我们可以通过.drective函数来创建自定义指令；

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

使用驼峰法来命名一个指令，在使用时用 ‘-’ 分隔。

示例：

var app1 = angular.module('myapp1',[]);

app1.directive('runoobDirective',function(){//使用驼峰法来命名一个指令

return{

template: "这里是自定义指令"

};

});

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

①、元素名

②、属性

③、类名

④、注释

5、使用限制

var app1 = angular.module('myapp1',[]);

app1.directive('runoobDirective',function(){//使用驼峰法来命名一个指令

return{

restrict :'A',//限制指令只能通过属性的方式来调用

template: "这里是自定义指令"

};

});

restrict 值可以是以下几种：（默认值是EA，可以通过元素名和属性名来调用）

E：作为元素名使用

A：作为属性名使用

C：作为类名使用

M：作为注释使用

模型

1、ng-model ：用于绑定应用程序数据到HTML控制器，可将输入域的值与AngularJs创建的变量绑定。作用域表单元素，对普通元素无效，支持双向绑定。

2、验证用户输入

ng-show： 该属性值返回为true的情况下元素显示。

3、应用状态

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

②、为应用程序数据提供状态（invalid、dirty、touched、error）{}myForm 和myAdd均为name值

③、为HTML元素提供Css类 如input.ng-invalid

④、绑定元素到表单】

4、ng-model指令根据表单域的状态添加/移出以下类：

ng-empty:

ng-not-empty:

ng-touched:

ng-untouched:

ng-valid: 通过验证的表单（验证成功）；

ng-invalid: 未通过验证的表单；

ng-dirty: 布尔值，表示用户是否修改表单，如果修改过为true。

ng-pengding:

ng-pristine: 布尔值，表示验证控件是否被修改，如果被修改为true。

AngularJs Scope(作用域）

1、Scope 是应用在视图（HTML）和控制器（JS）之间的纽带。

是一个对象，有可用的方法和属性；可应用在视图和控制器上。

当在控制器添加$scope对象是，视图可以获取这些属性，视图获取属性不需要添加$scope前缀，只需要添加属性名即可，如{}

2、概述：

AngularJs应用组成如下：

①、view(视图），即HTML

②、model(模型),当前视图中可用的数据

③、controller(控制器),即JS函数，可以添加或修改属性。

3、$Scope作用范围：

根作用域：所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有HTML元素中，$rootScope可作用于整个应用中，是各个controller中$scope的桥梁。用rootscope定义的值，可以在各个controller中使用

①、$rootScope全局对象的属性可以在所有子域中访问，子作用域相互无法访问对方的私有变量，这一点与JS的函数作用域完全一致。

②、后边的控制器内定义的全局$rootScope变量，在它前面的控制器中访问不到。

控制器

1、ng-controller 指令定义了应用程序控制器

控制器控制AngularJs应用程序数据，是常规的JS对象，由标准的JS对象的构造函数创建

2、AngularJs 使用$scope对象作为为参数来调用控制器，控制器也有属性和方法。

app.controller('myctrl',function($scope){

$scope.firstName= 'John';

});

3、外部文件中的控制器

4、model中可以有多个controller

过滤器

1、过滤器可以使用一个管道字符（|）和一个过滤器添加到指令和表达式中。

2、过滤器如下：

currency: 格式化数字为货币格式；

filter: 从数组项中选择一个子集；

lowercase: 格式化字符串为小写；

orderBy: 根据某个表达式排列数组；

uppercase:

3、表达式中添加过滤器{}

4、想指令中添加过滤器

{}

5、过滤输入： ‘|’ +过滤器 +‘：’ +模型名称

如：ng-repeat="x in names | filter：text | orderBy：‘country’ "

6、自定义过滤器