初学者—AngularJS1 基础详解

  • Post author:
  • Post category:其他



AngularJS 简介


特点:
AngularJS 是一个

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

指令 扩展了 HTML,且通过

表达式 绑定数据到 HTML。

在使用前需要导入文件:

作用 :
  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素”背后”添加代码。
  • AngularJS 支持输入验证。

01-1-【AngularJS表达式】

1、AngularJS使用

{

{}}绑定表达式。用于将表达式的内容输出到页面中。
表达式中可以是文字、运算符、变量等,也可以在表达式中

进行运算输出结果。
eg: <p>{{ 5+5+"Angular" }}</p>

如果Angular.js文件放在页面下方,在页面刷新的瞬间会看到{

{}}表达式的原样,所以可以 使用ng-bind指令替代表达式。

eg: 上式可改写为:<p ng-bind="5+5+'Angular'"></p>


01-2-【AngularJS的常用指令】

AngularJS 指令是扩展的 HTML 属性,

带有前缀 ng-。
1、

ng-app:

声明AngularJS所管辖的区域。 一般写在body或者html标签上,原则上一个页面只能有一个。

eg: <body ng-app=""></body>

2、

ng-model: 指令把元素值(比如输入域的值)

绑定到应用程序的变量中。

eg: <input type="text" ng-model="name" />
 

3、

ng-bind: 把应用程序变量中的值,

输出到页面HTML视图中。可以与表达式

{

{}}互相替换。


eg: <div ng-bind=”name”></div>
4、

ng-init:

初始化AngularJS应用程序中的变量值;

eg: <body ng-app=”” ng-init=”name=’jredu'”>
应用程序初始化时, name变量就附有初值。

02 – AngularJS中的MVC与作用域


1、【MVC三层架构】

Model(模型层):应用程序中用于

处理数据的部分。 (包括将数据保存或者修改到数据库、变量、文件中)。

在AngularJS中,Model特指的是:应用程序中的各种数据。

View(视图层):用户可以看到的用户

显示数据的页面。


Controller(控制器):控制器是链接View与Model的

桥梁。 负责从View读取数据,接受用户的操 作输入; 并将数据发送给Model层。 Model层对数据处理完毕之后,将结果返回给Controller,Controller再将结果返回给View层显示。

示意图:
     ↗view → (数据) → Controller → (数据) →↘
 ↗                                           ↘
用户                                     Model(处理数据)
 ↖                                          ↙
   ↖ view ← (结果) ← Controller ← (结果) ← ↙


2、创建一个AngularJS的模块。即ng-app=””所需要绑定的部分。
var app = angular.module(“myApp”,[]);
需要接受两个参数:


模块名称,即ng-app双引号中需要绑定的名字。<body ng-app=”myApp”>


数组。 表示需要注入的模块名称,不需要注入其他模块可用空数组代替。
>>> AngularJS将常用的功能封装到angular.js,创建主模块时直接可以使用,无需注入。
>>> 而一些应用较少的功能,需要导入对应的JS文件,并且在[]中注入进这个模块,才能够使用。
这就是AngularJS中的【模块化开发】与【依赖注入】!

在AngularJS的模块上,创建一个控制器,需要传递两个参数:


控制器名称,即ng-controller需要绑定的名称。
<div ng-controller=”myCtrl”>


控制器的构造函数,构造函数可以传入多个参数。
>>> 如果要在函数中使用系统的内置对象,则必须通过函数的参数传入,否则不能使用。
>>> AngularJS中的内置对象,都用$开头,例如$scope,$rootScope

3、AngularJS的作用域


$scope: 局部作用域,声明在$scope上的属性和方法。只能在当前Controller使用;(局部使用)


$rootScope: 根作用域。声明在$rootScope上的属性和方法,可以在整个ng-app所包含的范围使用。(全局使用)
>>> 如果没有使用$scope声明变量,而是直接使用ng-model在HTML标签中绑定的数据的作用域为:
1.如果ng-model写在某个Controller中,则这个变量会默认绑定到当前Controller的$scope上;
2.如果ng-model没有写在任何一个Controller,则这个变量会默认绑定到$rootScope上;

>>> AngularJS中的父子作用域!
1、AngularJS中,子作用

域只能访问父作用域中的变量,而

不能修改父作用域的变量;

2、为了解决上述问题,可以将父作用域中的变量声明为引用数据类型,例如对象等。 这样可以在子作用域中,直接修改对象的属性,而不需要修改对象本身保存的地址。
举例如下:

ng-app:


声明

AngularJS所管辖的区域





创建一个AngularJS的模块。即ng-app=””所需要绑定的部分。


在AngularJS的模块上,创建一个控制器,设置控制器的名称以及控制器的构造函数。


运行页面显示结果为:

自动捕捉显示。


创建一个控制器用来对比,作用域的区别

全局输入与变量绑定,输入内容后效果如下:

03-AngularJS中的过滤器

过滤器可以使用一个管道字符(

|)添加到表达式和指令中。
>>> 系统内置的过滤器
举例应用:

1、uppercase,lowercase 大小写转换
{

{ “lower cap string” | uppercase }} // 结果:LOWER CAP STRING {

{ “TANK is GOOD” | lowercase }} // 结果:tank is good

2、date 格式化
{

{1490161945000 | date:”yyyy-MM-dd HH:mm:ss”}} // 2017-03-22 13:52:25

3、number 格式化(保留小数)
{

{149016.1945000 | number:2}}

4、currency货币格式化
{

{ 250 | currency }} // 结果:$250.00 {

{ 250 | currency:”RMB ¥ ” }} // 结果:RMB ¥ 250.00

5、filter查找
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集
// 查找name为iphone的行 {

{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] | filter:{‘name’:’iphone’} }}

6、limitTo 截取
{

{“1234567890” | limitTo :6}} // 从前面开始截取6位 {

{“1234567890” | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序
// 根id降序排 {

{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] |

orderBy:’id’:true }} // 根据id升序排 {

{ [{“age”: 20,”id”: 10,”name”: “iphone”}, {“age”: 12,”id”: 11,”name”: “sunm xing”}, {“age”: 44,”id”: 12,”name”: “test abc”} ] |

orderBy:’id’ }}


自定义一:

>>>自定义过滤器,同时需要传递过滤参数。
* 调用过滤器示例:<p>{

{12345678912 | hideTel:5}}</p>
* 传入的参数5,将被过滤函数的num形参所接受
.filter("hideTel",function(){
 return function(text,num){
num = num>0&&num<11?num:3;//设置默认替换长度
text = text+"";
var newText = text.substring(0,11-num)
+text.substring(11-num,11).replace(/\d/g,"*");
return newText;
}
})

运行显示结果为

自定义二:
自定义过滤器,实现根据

姓名筛选数据的功能。
* >>> 调用示例:
* 请输入姓名: <input type="text" ng-model="name" />
* <tr ng-repeat="item in classes | filterByName:name ">
*/
.filter("filterByName",function(){
return function(item,search){
if(!search) return item;
var arr = []
for(var i=0; i<item.length; i++){
var index = item[i].name.indexOf(search);
if(index>-1){
arr.push(item[i]);
}
}
return arr;
}
})

运行效果:

filter查找默认全匹配,不能单项查找!

04-1-AngularJS中的服务Service



AngularJS 服务(Service)

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

什么是服务?
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

为什么使用服务?
在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。
AngularJS 会一直监控应用,处理事件变化, AngularJS 使用

$location 服务比使用

window.location 对象更好。


【服务Service】
* 1、内置服务:
* >>> 要用服务,必须要把服务名通过controller的构造函数的参数注入进来!!!
* >>> 系统内置的服务,统一使用

$开头, 服务中的

属性和方法统一使用$$开头!!! 自定义服务时,需注意与系统服务的写法区分开;

*
* $location: 返回当前页面的URL地址信息,是一个对象;
* $http: 向服务器发送请求,类似于JQuery中的Ajax;
* $timeout: 相当于 setTimeout();
* $interval: 相当于setInterval();

自定义服务(相当于声明一个函数)
* 第一个参数是服务名:
* 第二个参数是自定义服务的构造函数。 我们自定义的服务,本质是一个对象。
* 对象的属性 ,可以在构造函数中,使用this.属性 表示;
* 对象的方法 ,可以在构造函数中,使用this.方法 表示;
举例如下:自定义服务:将十进制数转化为16进制
.service("hexafy",function(){
this.gongneng = "将十进制数转化为16进制";
this.func = function(num){
return num.toString(16);
}
})

也可以使用过滤器实现同样功能
.filter("filter1",function(){
return function(num){
return num.toString(16);
}
})


在过滤器中调用服务!!
也必须在声明过滤器的外层构造函数中,注入服务名称!!!
.filter("filter2",function(hexafy,$location){
return function(num){
return hexafy.func(num);
}
})


04-2-AngularJS中的服务Factory

【自定义服务Factory】
factory服务在使用上与service服务没有太大差距。
唯一的不同点,是声明服务时,factory服务是在函数中先声明好一个

对象,然后使用return将对象返回。
而service服务,则是直接在函数中使用this将属性和方法添加到对象上面。
eg:
.factory("hexafy",function(){
var obj = {
gongneng : "将十进制数转化为16进制",
func : function(num){
return num.toString(16);
}
}
return obj;
})

//个人理解,obj对象在这里类似与加工工厂,将属性或者方法进行绑定添加。

04-3-AngularJS中的服务Provider



自定义服务provider】
1、 在AngularJS中,service服务、factory服务都是基于provider服务实现的;
2、 在定义provider时,可以使用this.$get 方法,接受一个函数,函数里面采用与factory完全相同的写法!!
.provider(“hexafy”,function(){
this.$get = function(){
var obj = {
gongneng : "333"
}
return obj;
}
}

// 有没有感觉到provoder的写法更像是一个综合杂糅的写法。
3、在三种服务中,provider服务是唯一一个可以写进config配置阶段的服务。
所以说,如果服务需要在配置阶段,也就是在声明controller之前执行的话,则可以使用provider。 否则一般使用service或者factory.
.config() 表示配置阶段 ,在声明controller之前执行。 可以用于声明一些在controller中需要使用的全局变量、方法、服务等。
.config(function($provide){
// 在配置阶段声明provider服务,需要在config中注入

系统对象$provide
$provide.provider("hexafy",function(){
this.$get = function(){
var obj = {
gongneng : "444"
}
return obj;
}
});
})
05-AngularJS中的$http.html
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
写法如下:
$http({
method: 'GET', /*请求的方法*/
url: 'h51701.json' /*请求的地址*/
}).then(function(obj){
/*请求成功的回调函数*/
alert("请求成功!");
$scope.data = obj.data;
},function(){
/*请求失败的回调函数*/
alert("请求失败!");
});

看了有木有感觉很眼熟啊,对,这货和Ajax的写法初前面部分很像,那我们顺便来回顾下Ajax的写法吧:
JQuey Ajax写法
$provide.provider("hexafy",function(){
this.$get = function(){
var obj = {
gongneng : "444"
}
return obj;
}
});
})
05-AngularJS中的$http.html
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
写法如下:
$http({
method: 'GET', /*请求的方法*/
url: 'h51701.json' /*请求的地址*/
}).then(function(obj){
/*请求成功的回调函数*/
alert("请求成功!");
$scope.data = obj.data;
},function(){
/*请求失败的回调函数*/
alert("请求失败!");
});

当然$http还有自己的简写方式,如下所示:
可以直接简写为get或者post方式:
$http.get('/someUrl').then(successCallback, errorCallback);
$http.post('/someUrl', data).then(successCallback, errorCallback);
eg:
$http.get("json.php").then(function(){alert("请求成功")},function(){alert("请求失败")});


06-AngularJS中的Select和表格

AngularJS 可以使用

数组或

对象创建一个下拉列表选项。

在 AngularJS 中我们可以使用

ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,

一、使用

数组

作为数据源


1、item表示数组中的每一项!
2、循环出的option中,value的值,默认为item,即为数组中的每一项。
3、option显示出的内容(<option></option>标签中的文字)是由
item.site for决定的!
即:
<select ng-model=”site” ng-options=”
item.site for item in sites”></select>
eg:
$scope.names = [“Google”, “Runoob”, “Taobao”];

二、以对象作为数据源
1、 (key,value) 第一项表示对象的键,第二项表示对象的值;
2、 option的value,永远都是对象的值!
3、 option显示出的内容(<option></option>标签中的文字)是由
…for 决定的!也就是说 for前面是什么,option标签中就是什么。
即:
<option value=" value "> key/value(取决于for前面的内容) </option>
eg:
<p>选择的网站是:</p>
<select ng-model="selectedSite" ng-options="key for (key, value) in sites">
</select>ie
<h1>你选择的值是: {{selectedSite}}</h1>
 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});

运行效果如下:
接下来要讲的也是重点,我们使用什么来创建下拉列表呢?
【ng-options 和 ng-repeat】
1、ng-options使用时,是将指令添加在select上;
ng-repeat使用时,是将指令添加在option上;
2、 ng-options使用时,必须同步给select标签绑定

ng-model;
ng-repeat使用时,不一定需要绑定ng-model
!!! 3、 ng-options使用时,我们只需要关心for前面的部分,即option标签中显示的文字;而option的value会自动分配,不由我们决定。 (使用数组作为数据源时,value就是数组的每一项;使用对象作为数据源是,value永远都是对象的值)
ng-repeat使用,除了要指定option标签中显示的文字,还需要手动指定value中的内容,如果没有指定则默认没有value;

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但

ng-options 指令更适合创建下拉列表,它有以下优势:

使用

ng-options 的选项的一个对象,

ng-repeat 是一个字符串。

以下举例区分:
一、ng-repeat:
<select ng-model="selectedSite">
<option ng-repeat="key in sites" value="{{key.url}}">{{key.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
运行显示结果为:
二、 ng-options
<p>选择网站:</p>
<select ng-model="selectedSite" ng-options="key.site for key in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>

运行效果如下:

07-AngularJS中的DOM与事件


DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-disabled=”true/false”;
传入true表示禁用,传入false表示可用

ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。

ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容(value)。
如果

mySwitch 为

true, 按钮将不可用:


ng-show 指令隐藏或显示一个 HTML 元素。
ng-show 是否显示
传入true表示显示,传入false表示隐藏;
ng-hide 是否隐藏
ng-if: 是否移除元素。
当传入true显示,传入false时移除。
效果与ng-show相同,但是ng-show和ng-hide只是隐藏元素,而ng-if是将元素从DOM中直接移除!!
ng-bind-html : 相当于innerHTML
而ng-bind 相当于 innerText
注意,要使用ng-bind-html,必须导入angular-sanitize.js文件进行安全验证。同时需要在声明模块的时候,在数组中注入安全验证模块’ngSanitize’
ng-checked 设置复选框或单选框的选中状态。
传入true设置当前复选框被选中。
ng-class: 用于设置给元素添加class类。
可选值有以下几种情况:
① 可以是字符串。表示直接给元素添加对应的class。 多个class之间,用空格分隔
② 可以是对象。 对象的键表示class名字,对象的值为true或false,当值为true时表示添加对应的class
③ 可以是数组。数组中的值可以是字符串或对象,判断规则同上。
ng-switch 根据变量的值,选择不同的ng-switch-when来显示。当没有合适的选项时,显示ng-switch-default
eg:<div ng-class="'div div2'">这是一个div</div>
<label>
<input type="checkbox" ng-model="myClass" />给div添加样式?
</label>
<div ng-class="{'div':myClass,'div1':!myClass}">这是一个div</div>
<div ng-class="[{'div':myClass,'div1':!myClass},'div3']">这是一个div</div>


事件
AngularJS 中的事件:
AngularJS中的事件只能触发绑定在AngularJS作用域上面的属性和方法。
<button ng-click=”func()”>点我弹个窗</button>
<button ng-mouseover=””>点我弹个窗</button>
<button ng-mouseout=””>点我弹个窗</button>
<input type=”text” ng-keydown=”keyDown()”>
<input type=”text” ng-foucus=””> <!–获得焦点–>
<input type=”text” ng-blur=””><!–丢失焦点–>
<input type=”text” ng-change=””><!–内容被改变–>

08-AngularJS中的表单和输入验证

[AngularJS的表单验证]
1、表单中,常用的验证操作:
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、 验证时,必须给form和inpt,设置name属性。
给form和input设置了name后,会自动将表单信息绑定到$scope作用域中。 所以,可以直接使用formName.inputName.$验证操作 得到验证结果。
例如:
formName.inputName.$dirty = “true”; 表示表单被填写过!
formName.inputName.$invalid = “true”; 表示表单输入内容不合法!
formName.inputName.$error.required = “true”; 表示设置了必填,但是没有输入
注意:

$error支持的验证:

required/minlength/maxlength/partten/eamil/number/date/url等。。。
3、 为了避免AngularJS的验证与HTML5的表单验证冲突!! 比如说 type=”email” required等,H5也会进行验证,那么可以
给form添加“novalidate”属性,禁用HTML5的验证功能

09-AngularJS中的动画

在AngularJS中使用动画:AngularJS 提供了动画效果,可以配合 CSS 使用。
1、导入

angular-animate.js
2、 如果页面中没有自定义app模块,则可以直接绑定系统模块

ng-app=”ngAnimate”
<body ng-app=”ngAnimate”>
如果页面中有自定义的app模块,则可以在自定义模块的数组中,注入ngAnimate。
angular.module(“app”,[“ngAnimate”])
3、 当使用ng-show、ng-hide显示或者隐藏元素的时候, 系统会自动添加或者移除.ng-hide这个class类;
4、 当使用ng-if/ng-switch/ng-repeat等其他指令,需要分别设置显示后和隐藏后的两种class样式:
显示后的class: .ng-enter-active,.ng-leave{}
隐藏后的class: .ng-enter,.ng-leave-active{}

ngAnimate 做了什么?
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:

  • ng-show

  • ng-hide

  • ng-class

  • ng-view

  • ng-include

  • ng-repeat

  • ng-if

  • ng-switch

ng-show 和

ng-hide 指令用于添加或移除

ng-hide class 的值。


其他指令会在进入 DOM 会添加

ng-enter 类,移除 DOM 会添加

ng-leave 属性。

当 HTML 元素位置改变时,

ng-repeat 指令同样可以添加

ng-move 类 。

此外, 在动画完成后,HTML 元素的类集合将被移除。例如:

ng-hide 指令会添加一下类:

  • ng-animate

  • ng-hide-animate

  • ng-hide-add (如果元素将被隐藏)

  • ng-hide-remove (如果元素将显示)

  • ng-hide-add-active (如果元素将隐藏)

  • ng-hide-remove-active (如果元素将显示

  • 09-AngularJS中的路由

    在AngularJS中使用路由:
    1. 导入路由文件:angular-route.js
    2. 在主模块中注入”ngRoute”。 rg:angular.module(“app”,[“ngRoute”])
    3. 将超链接改写为路由格式。 –> “#/标记”
    <a href=”#/”>首页</a> 首页直接使用 #/ 表示
    <a href=”#/page1″>page1</a> 其他页面”#/标记” 表示
    4. 在config配置阶段,注入$routeProvider,进行路由配置:
    5. 在页面的合适位置,添加ng-view,用于承载路由打开的页面:
    <div ng-view></div> 或 <ng-view></ng-view>
    【路由对象中接受的可选参数:】
    ① template: 自定义HTML模板,会直接将这段HTML记载到ng-view中;
    ② templateUrl: 导入外部的HTML模板文件。 为了避免冲突,外部的HTML应该是一个代码片段,即只保留body以内的部分。
    ③ controller: 在当前HTML模板上,执行的controller函数。会生出新的作用域$scope. 可以接受字符串(声明好的controller名字),也可以直接接受函数。
    >>> 注意: 使用ng-view打开的页面,controller中的作用域是属于当前页面作用域的子作用域!! 依然符合Angular中父子作用域”能读不能写”的要求!
    >>> 所以: 如果需要在ng-view中修改当前作用域的变量,必须把这个变量声明为对象的属性!!
    ④ redirectTo:重定向。一般用于.otherwise()中,用于重定向回首页!

    AngularJS允许用户自定义指令!!
    例如: <div ng-view></div> 或 <ng-view></ng-view>
    1. 使用.directive()声明一个自定义指令;
    2. 定义指令时,指令名必须使用驼峰命名法; 而调用指令时,用”-“链接
    .directive(“jiangHao”) –> <jiang-hao><jiang-hao>
    .directive(“jianghao”) –> <jianghao><jianghao>
    3. 定义指令时,对象中使用的属性:
    ① template: 调用指令时,生成的模板
    ② restrict: 用于声明指令允许的调用方式:
    E->允许标签名表明 A->允许属性调用 C->允许类名调用 M->允许注释调用
    默认值为:EA
    如果需要注释调用,必须再添加一个属性:replace:true,而且注释调用前必须添加”directive:” eg:<!– directive: jiang-hao –>

转载于:https://www.cnblogs.com/wq1994/p/7571601.html