AngularJS详解

AngularJS详解
2021年08月12日12:30:52 0 404

AngularJS详解

 

AngularJS 简介

AngularJs是一个用于设计动态web应用的结构框架。首先,它是一个框架,不是类库,提供一整套方案用于设计web应用。它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强。可以实现动态web应用,使得web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用,即数据操作比较多的应用,而非是游戏或图像处理类应用。


特点:

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

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

在使用前需要导入文件:

AngularJS详解

作用 :

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

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

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

  • AngularJS 可以在 HTML 元素"背后"添加代码。

  • AngularJS 支持输入验证。

01-【AngularJS表达式】


1、AngularJS使用{{}}绑定表达式。用于将表达式的内容输出到页面中。

表达式中可以是文字、运算符、变量等,也可以在表达式中进行运算输出结果。

eg: <p>{{ 5+5+"Angular" }}</p>

如果Angular.js文件放在页面下方,在页面刷新的瞬间会看到{{}}表达式的原样,所以可以 使用ng-bind指令替代表达式。

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

02-【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变量就附有初值。

03 - AngularJS中的MVC与作用域


1、【MVC三层架构】

Model(模型层):应用程序中用于处理数据的部分。 (包括将数据保存或者修改到数据库、变量、文件中)。

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

View(视图层):用户可以看到的用户显示数据的页面。

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

示意图:

AngularJS详解

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

举例如下:

AngularJS详解

ng-app: 声明AngularJS所管辖的区域


AngularJS详解

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


AngularJS详解

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


AngularJS详解

运行页面显示结果为:

AngularJS详解

自动捕捉显示。


AngularJS详解

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

AngularJS详解

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

AngularJS详解

04-AngularJS中的过滤器


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

>>> 系统内置的过滤器

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;

}

})

运行显示结果为

AngularJS详解

自定义二:

自定义过滤器,实现根据姓名筛选数据的功能。

* >>> 调用示例:

* 请输入姓名: <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查找默认全匹配,不能单项查找!

AngularJS详解

05-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);

}

})

AngularJS详解

AngularJS详解

也可以使用过滤器实现同样功能

.filter("filter1",function(){

return function(num){

return num.toString(16);

}

})

在过滤器中调用服务!!

也必须在声明过滤器的外层构造函数中,注入服务名称!!!

.filter("filter2",function(hexafy,$location){

return function(num){

return hexafy.func(num);

}

})

 

打赏 点赞(0)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
历史上的今天
08月
11
css,伪类,选择器,应该,怎样,用,中,css,伪类, 菜鸟教程

css伪类选择器应该怎样用(中)

css伪类选择器应该怎样用(中) 接上篇css伪类选择器应该怎样用(上)继续整理css选择器。 由于我是将伪类及伪元素一起整理,其中没有去区分,重点写的也是如何使用,所以今天想起来...
RDF,参考,手册,RDF,参考,手册,命名,空间,xmlns,rdf, 菜鸟教程

RDF 参考手册

RDF参考手册 RDF 命名空间 RDF 命名空间(xmlns:rdf)::http://www.w3.org/1999/02/22-rdf-syntax-ns# RDF 命名空间...
如何,写好,单元,测试 菜鸟教程

如何写好单元测试?

一  首先什么是好代码?Q1:好代码应具备可读性,可测试性,可扩展性等等,那么如何写出好代码?A:设计思想 & 编码规范。二  设计思想&设计原...
W3C,Soap,活动,W3C,Soap,活动,Web,Services,与, 菜鸟教程

W3C Soap 活动

W3C Soap 活动 Web Services 与应用程序到应用程序的通信有关。 SOAP 是基于 XML 的 Web Services 间的通信协议。 SOAP 教程 SOAP...
来自,php,之外,变量 菜鸟教程

来自 PHP 之外的变量

来自 PHP 之外的变量HTML 表单(GET 和 POST)当一个表单提交给 PHP 脚本时,表单中的信息会自动在脚本中可用。有很多方法访问此信息,例如: Exampl...

评论列表 共有 0 条评论

暂无评论