AngularJS 简介
AngularJs是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库,提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。可以实现动态web应用，使得web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。
特点：
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
在使用前需要导入文件：
作用 ：
- 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层显示。
示意图：
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的模块上，创建一个控制器，设置控制器的名称以及控制器的构造函数。
运行页面显示结果为：
自动捕捉显示。
创建一个控制器用来对比，作用域的区别
全局输入与变量绑定，输入内容后效果如下：
04-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查找默认全匹配，不能单项查找！
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);
}
})
也可以使用过滤器实现同样功能
.filter("filter1",function(){
return function(num){
return num.toString(16);
}
})
在过滤器中调用服务！！
也必须在声明过滤器的外层构造函数中，注入服务名称！！！
.filter("filter2",function(hexafy,$location){
return function(num){
return hexafy.func(num);
}
})
- angularJS详解
这篇文章转载 kooky798 的博客,http://blog.csdn.net/yy374864125/article/details/41349417, 写到这么详细也是没谁了,必须粉一个 1 ...
- AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用
AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- angularjs 指令（directive）详解(1)
原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...
- 转载 《AngularJS》5个实例详解Directive（指令）机制
<AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- AngularJS模块的详解
AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
随机推荐
- 《Java从入门到放弃》JavaSE篇：程序结构
程序的结构一般分为三种: 顺序结构. 选择结构. 循环结构. 一.顺序结构:这个不用多说吧,跟我们平时写文章的顺序一样,从上往下. 二.选择结构:从名字就能看出,要选择嘛,到底是要漂亮滴妹子,还是要有 ...
- tensorflow笔记（五）之MNIST手写识别系列二
tensorflow笔记(五)之MNIST手写识别系列二 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7455233.html ...
- 百度鹰眼Java接口调用增删改查实例
因感觉百度鹰眼的使用场景比较符合实际业务,于是对百度鹰眼做了简单功能调试.刚开始使用springframework封装的RestTemplate,但是测试提示ak参数不存在.后又试了几种方法,均提示a ...
- [REST] 1.REST的起源
0. 世界上第一个网站 1990年12月20日,这一天对于现在的互联网来说意义非凡.欧洲核子研究组织(CREN)的科学家Tim Berners-Lee在一台NeXT电脑上启动了世界上的第一个网站(当然 ...
- Haproxy基于ACL做访问控制
author:JevonWei 版权声明:原创作品 haproxy配置文档 https://cbonte.github.io/haproxy-dconv/ 基于ACL做访问控制(四层代理) 网络拓扑 ...
- Windows下配置Nginx
一.今天是2017年1月18日.揣着一种也许叫做冲动的心情,决定以后每天都记录和回顾新涉及的技术,巩固已学到的知识,坚持. 二.回归到今天的技术主题,因为之前对于[反向代理]这种技术充满了好奇,借此机 ...
- 【C# in depth 第三版】温故而知新（1）
声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7192354.html 前言 关于这本书(<深入理解C# 第三版>)的详细情况以及好坏,自行 ...
- 学会数据库读写分离、分表分库——用Mycat，这一篇就够了！
系统开发中,数据库是非常重要的一个点.除了程序的本身的优化,如:SQL语句优化.代码优化,数据库的处理本身优化也是非常重要的.主从.热备.分表分库等都是系统发展迟早会遇到的技术问题问题.Mycat是一 ...
- VB与C#语言部分不用的地方Part1
1. 数据类型: ① 日期型(Date) 表示日期和时间用两个“#”符号把日期和时间的值括起来,如:#08/20/2001#.#2001-08-20#. ② 变体型(Variant) ...
- 原创：LNMP架构部署个人博客网站 禁止转载复制
nginx编译安装步骤 ①. 检查软件安装的系统环境 cat /etc/redhat-release uname -r ②. 安装nginx的依赖包(pcre-devel openssl-devel) ...
