1、AngularJS 是什么？
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言。但要构建WEB应用的话它就显得很乏力，所以AngularJS做了一些工作来解决静态网页技术在构建动态应用上的不足
AngularJS的初衷是为了简化web APP开发，精髓是简单。
| <div ng-app> <input type="text" ng-model='msg'> <h1>{{msg}}</h1> </div> |
标签作用：
Ng-App ：是让angular知道他要解析的范围（容器标签）
Ng-model ： angular解析时知道这个后面的变量要绑定数据的
{{ }} ，这时插值表达式，作用是解析双括号中的表达式。
执行过程：页面加载完成后，angular.js加载完成，加载完成后，angular会在整个页面中寻找ng-app后，会确定解析的范围，然后发现input标签中有ng-model指令
发现ng-model后，它会在作用域中定义一个变量（msg），保存用户输入值
再往下解析发现{{ }}插值表达式，要显示插值表达式中的内容，把msg变量中的值显示出来。
再往下发现div标签结束，ng-app的解析范围到此结束
定义默认变量
通过ng-init能定义初始化的变量，定义方式，不用写var，直接写变量名=值，多个变量名用分号隔开
另一个绑定数据方式
Ng-bind指令 ：（环境变量）表达式
<span ng-bind=’x’><span>
把x这个变量的值渲染到span标签内容中，刷新页面时不会看到插值表达式。
作用域
通过ng-init指令在标签中定义变量太多时，页面会显得臃肿，同事作用域也不好访问。所有我们要通过js来定义变量，和找作用域。
Module（）这个方法是找容器范围，然后再撞见作用域（需要使用controller方法）
参数（2个）
第一个：找ng-app范围，这时需要给ng-app=‘变量名
第二个： 注入依赖，是一个数组，但是这个数组必须写，即使是空数组也必须写上去。
创建作用域
Angular中是通过ng-controller 来创建作用域，我们需要在标签中通过ng-controller =“变量名”来创建作用域
<div ng-controller =’first’><div/> app.controller(‘first’,function(){})
下一步需要同期范围对象调用controller方法，这时就能创建作用域
Controller（）方法有2参数
第一个参数：是创建的作用域的变量名
第二个参数：是函数（function（）），在这个函数内部我们可以定义变量，功能
作用域直接访问this，arguments
This返回空对象
Argments 是空数组
需要注入一个局部变量:$scope ，这时我们可以在$scope上定义变量和方法
绑定事件
需要使用功能 ng-时间名称=函数调用，这个需要写在标签内
函数定义需要写在局部作用域$scope上
事件对象：$event
绑定事件时：传递的参数可以是 数字，字符串
还可以是 事件对象 $event
还可以传变量
| <div ng-controller='myCtrl'> <button ng-click='demo($event)'>red</button> <button ng-click='demo(1)'>yellow</button> <button ng-click='demo(arr[2])'>green</button> <h1>{{result}}</h1> </div> |
显示隐藏
显示指令 ：ng-show
隐藏指令 ：ng-hide
都接收布尔值，布尔值是true时生效，布尔值是false时不生效
过滤器
主要作用是帮我们事先一些功能，减少页面代码量。
使用方法
{{数据 | 过滤器:参数 1:参数 2}}
Currency
<span>{{price | currency :’￥’:0[wd1] }}</span>
￥: 钱的标志
Date 日期过滤器
<span>{{date | date : ‘yyyy-MM-dd HH:mm:ss[wd2] ’}}
Filter 过滤器
010
{{数据 | filter: 参数}}
参数可以是字符串：过露出的结果是包含指定字符串的结果
参数可以是变量 : 根据变量的值来筛选包含变量值的结果
参数可以是函数： 函数定义筛选规则，根据这个规则筛选结果
函数必须要有返回值，返回值就是筛选后的结果
这个函数不能写成调用形式。
字符串过滤器
转换大写：uppercase()
转换小写：lowercase()
字符串截取： limitTo ：limit 截取：begin开始位置
： 开始：截取几个
和js中的字符串截取方法substr方法相识
还可以截取数组
Number 过滤器
把数字转成科学计数法
{{ 数组 | number：参数}}
参数：保留有效数字的位数
Order By 排序过滤器
{{数组 | orderBy ：参数1 ：参数2}}
参数1：排序规则
参数2：正序还是倒序，这里接受布尔值
False表示正序（默认）
True 表示倒序
自定义过滤器
Angular给提供了一个方法，专门来自定义过滤器
Filter()方法需要在angular放回对象上调用
Filter()方法需要在angular返回对象上调用
Filter(参数1，参数2)
参数1：是过滤器的名称
参数2：是工程函数
工厂函数必须有返回值，返回值是一个函数，这个函数就是我们定义的功能。
返回的函数
第一个参数是要进行改变的值
从第二个参数开始，就是过滤器中的参数
脏值检测（表单验证）
四个属性：
$dirty 判断是否输入过 （true表示输入过）
$pristine 判断是否没有输入过 （true表示没有输入过）
$invalid 判断输入是否不合法 true 表示不合法
$valid 判断输入是否合法 true表示合法
表单验证
最大长度：
H5：max-length
Angular：指令 ng-maxLength=‘长度’
最小长度：
H5：min-length
Angular：指令ng-minLength=‘数字’
必填项：
Ng-requried =布尔值
True 表示必填项 false 表示不是必填项
正则：
Ng-pattern =‘/正则表达式/’
是否禁用：
Ng-disabled =布尔值 true表示禁用 false表示不禁用
是否只读：
Ng-readyOnly=布尔值 true表示只读，false表示可修改的
是否被选中
Ng-checked=布尔值
提交：
绑定在form表单上 ng-submit=‘函数（）’，这时要求form表单中有submit类型，
是否发生过改变：
Ng-change=‘函数（）’
整个form表单上也有脏治检测 的四个属性
判断的是整个form表单的属性状态。
注入定时器服务
正常的原生定时器在angular中不能使用，需要使用angular给订好的“服务”
想使用需要注入这个服务
延时定时器服务
Ng-href/ng-src
Ng-href是给a标签绑定路径 /ng-src 给有src属性的标签添加路径
作用：在异步加载时，避免错误
Ng-class
动态的给元素添加类名
有四种方式：
第一种：值可以是字符串 ng-class=“‘demo’”；
第二种：值可以是变量：ng-class=‘变量’；
第三种：值可以是对象：ng-class=“{red：‘TRUE[wd3] ’}”；
第四种：值可以给数组：ng-class=‘[bl,’demo’]’
Ng-if/ng-switch
Ng-if=布尔值 布尔值为true表示成立，布尔值为false表示不成立。Ng-if没有else功能。
Ng-swith
监听时使用on来绑定监听的值
Ng-swith-when=‘条件’，相当于switch中的case
Ng-switch-default=‘默认条件’，相当于switch中的default
Ng-repeat
循环
基本用法：ng-repeat=“item in 数组”
{{item}}就是数组中的元素
Angular 还提供了6个临时变量
$index 索引值
$first 数组中的第一个元素
$last 数组中最后一个元素
$middle 数组中除了第一个和最后一个元素的其他元素
$odd 奇数
$even 偶数
做判断
自定义指令
是 angular给提供的方法
Directive(名称，function)
参数1：自定义指令名称，规范：变量-变量
参数2：工厂函数---》这个函数必须有返回值，返回值是对象。对象中定义属性和方法,
自定义指令的名称规范
Html里面：变量-变量 my-title
Js里面：变量变量（第二个变量首字母大写） myTitle
自定义指令有四种类型：
属性类型：<div my-title=’123456’></div> 字母：A
元素类型：<my-title></my-title> 字母：
类 类型 ： <div> class =’my-title’></div> 字母：C
注释类型：<!—directive:my-title - -> 字母：M
Template:
自定义指令模板
页面中显示的内容在这个定义
templateUrl1
能引入外部的Html文件
Replace
接收布尔值
True：表示替换原来的标签
False：表示不替换，是插入功能（默认值）
自定义指令作用域
自定义指令的作用域也是通过controller创建的，但是是自定义指令函数返回值中定义这个作用域
自定义指令默认是没有参数的，所以需要使用寿命参数，就要注入寿命参数
常用的参数：作用域（$scope），元素（$element），属性（$attrs）
作用域（$scope）： 自定义指令的作用域
元素（$element）：自定义指令标签，可以直接使用类似jquery的操作元素方法
属性（$attrs）：自定义指令的属性
自定义指令的作用域和外层作用域的关系：
如果自定义指令没有定义变量，自定义指令可以使用外层作用域中的变量；默认情况下：都使用自定义指令的作用域。
Scope属性：可以设置自定义指令和外层作用域的关系
Scope属性值：
True：自定义指令的作用域和外层作用域互相独立
False：（默认值）都使用自定义指令的作用域
{} 对象： 互相独立的
如果scope的属性值是{}，自定义指令想使用外层的数据，我们需要修饰符
修饰符：有俩种
第一种： @修饰符
使用时分俩步：第一步，需要在HTML中使用插值表达式接收值
第二步，在js中scope属性{} 内使用@修饰符
第二种： =修饰符
使用时也分俩步：
第一步：在HTML中绑定（不能使用插值表达式），
第二部：在js中scope属性{}内使用 = 修饰符
Scope属性false和{} 的区别
False会轻质使用自定义指令的作用域，所有外层定义的属性都会无效；而{} 形式的可以通过修饰符来决定哪些是通用的，哪些是私有的。
$http服务
Angular把数据请求也封装了，我们请求数据时可以直接使用它提供的$http服务
使用时：需要注入服务
使用方法：
1、$http({
url:路径，
method：请求方式,GET/POST
params:get请求发送的数据，是对象形式{},
data ：post 请求方式的数据，也是对象形式{},
headers：{
‘Content-type’:’application/x-www-form-urlencoded’
}，post请求时使用
})。Success（res）{
Console.log(res);
}.error(res){
Console.log(res);
}
返回值有四个：
第一个：返回的数据；
第二个：http状态码；
第三个：函数；
第四个：http请求信息
注意：$http中的url不管是get请求还是post请求，都可以带数据
Get请求：
$http.get（参数1，参数2）。Success（function（res）{}）
参数1：路径
参数2：要发送的数据
Psot请求：
$http.post(参数1，参数2，参数3)。Success（function（res）{}）
参数1：路径
参数2：要发送的数据
参数3：配置数据
路由：
Angular中有俩种路由，一种是指令路由：ngRoute，
还有一种是ui路由：ui.router.
路由：根据地址栏中地址的改变加载不同的页面。
Angular中没有定义这些路由，使用时需要引用这些模块。引入是在module（‘myapp’，[] 第二个参数数组中）
指令路由，
NgRoute，所有指令都是以ng-开头
使用步骤：
第一步：需要引入js文件，需要放在angular文件下面；
第二步：需要在angular实例对象上引入ngRoute，module（‘myapp’，[‘ngRoute’]）；
第三步：页面中需要有一个盛放内容的容器，需要有ng-view这个指令
<div ng-view></div>
第四步：需要在angular对象上调用conifg配置，需要引入指令路由的一个对象$routeProvider,这个对象上有个方法叫when(),在when()方法中配置路由
When()方法有俩个参数:
第一个参数：路径
第二个参数：路径匹配对象
常用的配置有：
Template：‘字符串’，要显示的模板内容
templateUrl：‘html文件
controller：定义作用域’
controller：俩种用法
- controller：function（$scope）{}
- controller:controller:’firstCtrl
这是需要单独定义 这个控制器，angular对象定义：controller（‘firstCtrl’，function(){}）
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body ng-app='myapp'> <div ng-controller='myctrl'> <div> <a href="#/xinwen">新闻</a> <a href="#/ditu">地图</a> <a href="#/shipin">视频</a> <a href="#/tieba">贴吧</a> <a href="#/yinyue/gequ">音乐</a> </div> <!-- 第二步：ngRoute渲染页面的容器 --> <div ng-view></div> </div> </body> <script src="js/angular.js"></script> <!-- 第一步：需要引入ngRoute文件 --> <script src="js/angular-route.js"></script> <script> // 第三步：这里需要引入ngRoute angular.module('myapp',['ngRoute']) // 第四步：写配置 .config(function($routeProvider){ // 配置路由信息 $routeProvider.when('/xinwen',{ template:'<h1>新闻页面{{msg}}</h1>', controller:function($scope,$rootScope){ $scope.msg=',局部作用域' $rootScope.$on('$routeChangeSuccess',function(){ console.log(this) console.log(arguments) }) } }) .when('/ditu',{ templateUrl:'ditu.html', controller:'dituCtrl' }) .when('/shipin',{ template:'<h2>视频页面</h2>' }) .when('/tieba',{ template:'<h3>贴吧页面</h3>' }) .when('/yinyue/:song',{ templateUrl:'yinyue.html', controller:function($scope,$routeParams){ console.log($routeParams); $scope.song = $routeParams['song'] } }) // 重定向 .otherwise({ redirectTo:'/xinwen' }) }) .controller('myctrl',function($scope){}) // 定义地图控制器 .controller('dituCtrl',function($scope){ $scope.title='地图标题' console.log($scope) }) </script> </html> |
路由是通过哈希值实现查询的。
动态路由：
When（）方法中第一个参数可以这样来定义：
When（‘/ditu/:num’,{}）
接收num
路由事件：
路由一切换就会触发的一个事件
事件通过$on方法绑定，它需要绑定到根作用域上($rootScope)
$rootScope.$on(‘$routeChangeSuccess’,function(){
Console.log(this) //作用域是全局window
Console.log(arguments) //
})
返回的参数有三个：
第一个参数：事件类型
第二个参数：当前页面的信息
第三个参数：上一个页面的信息
UI路由：
Angular中另一个路由，是由angular社区维护的，相对于指令路由，功能更丰富，可以实现多视图，可以实现子路由效果。
这个路由使用时也需要引入。angular-ui-router.js文件
使用方法：
- 引入js文件
- 注入到angular中，Angular.module(‘myapp’,[‘ui.router’])
- 页面中定义盛放内容的容器<div ui-view> </div>
- 写配置，需要注入$stateProvider对象，这个对象上有一个方法，state()在这个方法上定义路由
通过config(function($startProvider){
$stateprovider.state(‘名称’,{
url:’路径’，
template ：‘字符串’，
templateUrl：‘引入外部的html’，
controller:function(){},
controller:’xxCtrl’
})
})
.controller(‘xxCtrl’,function(){})
Uirouter动态路由：
第一种形式：/movie/:num
第二种：、movie？page&siez
这种新式中的哦oage和size可传，可不传，页面都能访问
第三种形式：/movie/{num:ytpe}.
这种形式可以限制传入数的数据类型
第四种：/movie/:num?page
Ui router 路由重定向
Ui router中不是使用$stateprovider 对象，而是需要传入一个新的对象$urlRouteProvider,
这个对象中有重定向方法，有俩个方法可用
- when() 方法：when(‘/list’,‘/movie/1’)
- Otherwise() 方法：otherwise（‘/yinyue/moren’）
Ui router 路由事件
$locationChangeSuccess
返回值有五个参数：
- 事件对象
- 当前页面
- 当前页面的动态数据
- 上一个页面
- 上个页面的数据
Ui router加载多个视图.
Html中需要给渲染视图容器加标识 ui-view=‘值’
Js中需要通过views属性来定义要渲染的视图，根据标识符来渲染
Html页面部分
| <Header ui-view=’heads’></header> <div ui-view =’leftP’></div> <div ui-view=’rightP’></div> |
Js部分：
| views:{ heads:{ template:heads, controller:function(){} }, leftP:{ template:'<h3>home的leftP部分</h3>' }, rightP:{ template:'<h2>home的rightP部分</h2>' } } |
Ui router子路由
| // 路由 $stateProvider .state('home',{ url:'/home', template:'<h1 class="tit">home页面<div ui-view>详情</div></h1>' }) // 子路由 .state('home.detail',{ url:'/detail', template:'<h2>详情页面</h2>' }) .state('home.soso',{ url:'/soso', template:'<h3>搜索页面</h3>' }) // 重定向 $urlRouterProvider .otherwise('/home') }) |
$Location
$location 是angular中提供的专门处理地址栏地址的服务
用法：调用方法时不传参数表示获取值
传参数表示设置值
我们使用最多的是path方法，因为path方法修改的是哈希值，而angular的路由就是通过修改哈希值来实现的。
自定义服务
Angular提供了俩种自定义服务的方法，
一种是：factory 是面向过程的定义，必须有返回值，返回值是对象， 不需要this
一种是：service 是面向对象的定义方法，一定不要有返回值，必须使用this
自定义的服务相当于在angular中定义一个全局的方法，可以在任何位置使用，哪里需要就在哪注入。
项目实际案例
首先验证用户是否登录，如果登录过，显示用户名，如果没登录让用户登录
2、AngularJS的四个核心思想
1）依赖注入
在定义您自己的控制器、指令、过滤器和动画的时候，我们必须使用模块系统
2）模块化
Angular拥有非常吸引人的开发社区，海量免费的官方插件、第三方插件，如果我们要在应用中使用这些 库，我们就不得不用到模块系统
3）双向绑定
Angular的模块系统提供了访问内部配置、插件配置的功能，我们将在最后一章配置自定义HTTP头的案例中演示后面一个特性
4）语义化标签
3、AngularJs的优点
1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
2. 是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；
3. 自定义Directive(指令)，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
[wd1]保留几位小数写几
[wd2]Yyyy年MM月dd日 HH:mm:ss
[wd3]Boolean值
扫一扫
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
