前端学习(三十七）angular（笔记）
MVC 后台
M Module 数据层
V View 视图层
C Controller 控制层
前端开始用MVC
M 数据层 交互
V 视图层 DOM操作
C 控制层 逻辑
===================================================
不用原生写MVC
1.不是所有人都懂MVC，用人需求变高。
2.风格不统一
===================================================
库和框架的区别?
库 辅助程序员开发 JQuery
框架 限制程序员开发 Angular
===================================================
AngularJS
MVVM的框架
Angular火。有人在推，Google
用的人少了，自己作。更新。
主版本.次版本.修订号
1.2.x
玩法直接变了
1.3.x
javascript
2.x
TypeScript
本质还是MVC，只不过衍生出很多叫法
MVC
MVVM
MVP
MV*
=====================================================
面向过程
面向对象
面向数据
致力于解决所有交互所带来的痛苦。
只需要关心数据就行。
=======================================================
官网:https://angularjs.org/
下载:https://code.angularjs.org/
文档:https://code.angularjs.org/1.5.8/docs/api
=======================================================
Function Angular提供的方法
angular.bind 矫正this
angular.bootstrap 开启angular应用
angular.copy 复制对象
angular.element 小jquery
angular.equals 比较是否相等
angular.forEach 迭代
angular.fromJson
angular.isArray 检测是否是数组
angular.module angular模块
===================================================
玩的就是数据——数据就是一切
ng-app 哪是angular管的
一个页面只能加一个
ng-model 数据源
ng-bind 数据绑定
ng-bind平时用的少。
用:{{}}
angular的核心:
依赖注入、双向绑定
===================================================
Directive 指令
ng-app
ng-model
ng-bind
ng-init 初始化
ng-click 点击
ng-repeat 迭代
{{$index}} 索引
{{$first}} 是否是第一行
{{$last}} 是否是最后一样
{{$even}} 是否是奇数行
{{$odd}} 是否是偶数行
数组有重复会有问题：
原因：默认把值当成索引了。
解决：
ng-repeat="item in arr track by $index"
ng-show 显示
ng-hide 隐藏
ng-if 如果是真的就显示，否则就已隐藏
ng-controller 控制器
环境:
原生环境
NG环境
================================================
Controller 控制器
let app = angular.module('名字',[依赖]);
app.controller('控制名字',($scope)=>{
$scope 当前控制器的域
});
==================================================
Filter 过滤器
{{item.price|currency}}
currency 货币
{{item.price|currency:'¥'}}
date 日期
filter 过滤器
limitTo 限制数量
number 1004354548
================================================
Angular的问题
数据变了，但是DOM没有渲染
解决:
脏检查
==============================================
Service 服务
$interval 定时器
$timeout 定时器
==============================================
交互
$http服务
GET
$http.get('url',{
params:{
参数
}
}).then((res)=>{
res.data 数据
},(err)=>{
});
POST
$http({
method:'POST',
url:'',
data:{
参数
},
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
transformRequest:function(data){
var arr = [];
for(var key in data){
arr.push(key+'='+data[key]);
}
return arr.join('&');
}
}).then((res)=>{
res.data 数据
},(err)=>{
});
---------------------------------------------------
Angular
优势是做SPA
spa 单页应用
==================================================
controller 通信
父子级通信
子级给父级发送数据
发送
$scope.$emit('名字',值);
父级给子级发送数据
发送
$scope.$broadcast('名字',值);
接收
$scope.$on('名字',function(ev,data){
data
});
===============================================
jsonp
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
================================================
filter 过滤器
自定义过滤器
app.filter('过滤器名字',function(){
return function(input){
操作input的值。
return 值;
};
});
capitalizes 首字母大写
getCnDay 获取中文星期
trim 去除首尾空格
==================================================
自定义指令
directive
app.directive('名字',function(){
return {
link:function(scope,ele,attr){
}
};
});
===================================================
深入Controller
传统写法不能压缩，因为angular核心是依赖注入
app.controller('main',['$scope','$http',function(scope,http){
}]);
controller的另一种写法
var app = angular.module('app',[],function($controllerProvider){
$controllerProvider.register('控制器名字',function($scope){
});
});
filter的另一种写法
var app = angular.module('app',[],function($controllerProvider,$filterProvider){
$filterProvider.register('名字',function(){
return function(input,param){
};
});
$controllerProvider.register('控制器名字',function($scope){
});
});
directive另一种写法
var app = angular.module('app',[],function($controllerProvider,$filterProvider,$compileProvider){
$compileProvider.directive('名字',function(){
return {
link(scope,ele,attr){
}
};
});
$filterProvider.register('名字',function(){
return function(input,param){
};
});
$controllerProvider.register('控制器名字',function($scope){
});
});
==============================================
