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)=>{
});