MVC设计模式
M：model 数据模型
V：view 视图
C：controller 控制器
由控制器创建 数据 到数据模型中 然后展示到 视图中
angularJs基本套路
1.先引入angularJS包
<script src = "./lib/angular.js"></script>
2.设置angularJS的作用范围（一般写在body中）
<body ng-app = "dmApp">
<div ng-controller = "demoCtrl"></div>
</body>
3.创建数据模型
4.创建控制器，并绑定对应视图
<script>
var app = angular.module("dmApp",[需要依赖的文件])
app.controller("demoCtrl",["$scope",function($scope){}])
</script>
angularJs内置指令
ng-app = “dmApp” 指定angularJS起作用的范围
ng-controller = “demoCtrl” 控制器指定的视图区域
ng-class = “{active=‘true’}” 添加类名
ng-src 路径
ng-href 超链接地址
ng-init = “name = ‘Jack’” 初始化模块，适用于简单的变量
ng-include = “文件路径” 内部使用ajax调用其他文件，实现复用
ng-readonly =“true” 文件是否只读
ng-disabled = “true” 表单是否禁用
ng-checked = “true” 单选或者复选框是否选中
ng-selected = “true” 下拉框选项是否选中
ng-show = “true” 元素是否显示
ng-hide = “true” 元素是否隐藏
ng-if = “true” 元素是否创建
ng-switch = “type” 选择语句
ng-switch-when 相当于case：
ng-model 表单元素数据的双向绑定
ng-repeat 复制元素并绑定数据到元素中
ng-click = "click()" 然后在控制器中的回调函数内，设置$scope.click = function(){}
ng-mouseover... 其他所有事件都一样，去掉on 用 ng- 开头
angularJS自定义指令
app.directive("dmTag",function(){
return {
restrict:"EA",//ECMA一般用EA Element、Class、Mark、Attribute
template:“<p>hello</p>”,//模板
replace:"false",//是否替换原有标签
templateURL:"",//将另一个文件当成模板
link:function(scope,element,attrs){
//link函数有三个参数scope,指定元素，指定元素的全部属性
element.on("click",function(){
alert("你好"+attrs["hmTag"])
})
}
}
})
AngularJS MVC之间的作用域
AngularJS中，每一个控制器和视图之间有 $scope 作用域，作用域内数据互通
控制器之间可以嵌套包裹，子控制器可以访问父控制器的数据，但是父控制器不能访问子控制器的
过滤器filter
过滤器使用方法：{{name|filter:值}}
date：“yyyy-MM-dd HH：mm：ss“ --》日期格式 年-月-日 时：分：秒
number：3 --》小数点后几位
currency：“$”:3 --》使用什么货币单位，数值精确到小数点后几位
filter：“满足特定要求” --》满足特定条件
orderBy：true --》将数组排序，true降序，false升序
limitTo：2 --》显示数组或者对象前几位，负数从后往前算
uppercase --》转化为大写
lowercase --》转化为小写
json --》默认的过滤器，将对象转换为字符串
自定义过滤器
app.filter("firstBig",function(){
return function(data){
return data[0].toUpperCase+data.slice(1);
}
})
AngularJS的依赖注入
app.controller("demoCtrl",
["$scope","$log","$http","$timeout","$interval","$filter",
function($scope,$log,$http,$timeout,$interval,$filter){
}])
//在数组中依次往回调函数内注入对应参数，就叫做行内式依赖注入
//不写数组，直接写回调函数，直接传参，AngularJS也会猜测注入，
但是形参名必须和要注入的组件一致
//建议使用行内式
$filter过滤器的使用介绍
$filter和 filter不同。$filter作用在控制器内，而filter作用在视图中
$filter用法
app.controller("demoCtrl,["$scope","$filter",function($scope,$filter){
var $scope.arr = [10,20,30,40,50]
var number = $filter("number");
number("arr",2)
}])
$http使用
$http AngularJS自带的ajax请求功能
$http使用方法
app.controller("demoCtrl,["$scope","$http",function($scope,$http){
$http({
url:"",
method:"post",
data:"name=jack&age=18",//form Data 数据要用字符串形式传递
headers:{"Content-Type","application/x-www-form-urlencoded"}
//将默认的Response PayLoad 转换为 Form Data 格式，以便后台使用$-POST 接收数据
})then(function(response){
console.log(response.data)
})catch(function(){
console.log("error message")
})
}])
//如果是get方法，可以不写method和headers，并且传递数据不用data，而是Parmas：{}
//如果是用jsonp跨域请求，则直接写 method：“jsonp”,就行了
由于AngularJS自带的jsonp的callback=angular.callbacks._0，而有的api接口（比如豆瓣）不支持这种格式，这个时候我们需要使用app.service自定义一个 jsonp 请求：
//使用只执行函数（沙箱）包裹封装代码并传入angular全局变量，防止全局变量冲突
(function(angular){
var app = angular.module("dmApp",[]);
app.service("myJsonp",["windows",function($windows){
this.jsonp = function(opts){
//1.拼接url
var url = opts.url + "?";
for(var key in opts.params){
url += (key+"="+ opts.params[key]+"&");
}
//2.生成随机的回调函数名
var callbackName = "jsonp_";
callbackName += ($windows.Math.rondom().toString().slice(2));
url += (callback=callbackName);
$windows[callbackName] = opts.callback;
//3.创建script标签
var script = $windows.document.creatElement("script");
script.src = url;
$windows.document.body.appendChid(script);
}
}])
})(angular)
将自定义的myJsonpy给需要用到的模块进行依赖，再注入对应的控制器就能正常使用了。
AngularJS配置
app.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/demo",{
templateUrl:"url",
controller:"demoCtrl"
})
}])
//在可配置组件如：$scope 后接Provider就可以对组件进行配置
//具体可配置项看文档
a锚点的介绍 与 hash值
a锚点可以点击跳转到页面指定位置，跳转时会在地址栏后增加 #id 也就是所谓的hash值，但是不会重新请求地址，利用这一点可以做单页面引用 SPA
hash值可以通过 window.location.hash获得
AngularJS路由
使用angular路由，需要先下载angular-route.js，然后通过script引入页面
想要实现单页应用，需要在a锚点上设置 <a href = '#!demo'></>
新建模块，设置依赖ngRoute
var app = angular.module("dmApp",["ngRoute"])
用app.config配置 路由
app.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/demo",{
template:"我是代码"
}).otherwise({
template:"没有咯"
})
}])
使用路由传递与获取参数的方式
传递参数有两种：
1.QueryString类型：直接在a锚点中拼接如：<a href = '#!demo?name=jack&age=18'></>
2.在匹配路由的 when 方法中 使用 when("/demo/:name"),在锚点中添加<a href = '#!demo?/jack></>
获取参数，用到 $routeParams 服务，注入控制器就可以用$routeParams拿到
结束语
好了，吃饭了。
网友评论