AngularJS快速入门--博客园老牛大讲堂
本片博客只适合入门者！--博客园老牛大讲堂
如果想认真学习angular，就先看完菜鸟教程
1、什么是angular？
推荐个：什么是angular
个人理解：前端页面由两类组成：页面+数据处理。angualr其实就是处理前端数据的地方（数据处理），类似于javascript、jq。
2、为什么学习angular？---博客园老牛大讲堂
个人理解：方便呗！还能咋滴。处理数据方便，关键是具有数据双向绑定的功能（当后端数据发生改变，那么前端数据就会改变）。
3、怎么学习angular？-----博客园老牛大讲堂
要学会angular必须学angular的常用组件：factory，controller（控制），service，direction（指令）,等等。组件比较多，我只介绍列出的几种。angular组建
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="myCon">
<mydir></mydir>
<div>{{hex}}</div>
<div>{{k.id}}</div>
<div>{{name}}</div>
<script>
var app=angular.module("myapp",[]);
//工厂---这里支持跨域请求 ---来自 博客园老牛大讲堂
app.factory("myFac",function($http){
function tongxin(){//这个方法会返回一个对象
return $http({
method:"post",
url:"http://127.0.0.1:8080/A/B",
data:{id:"1",name:"博客园老牛大讲堂"},
headers:{"Content-Type":"application/x-www-form-urlencoded"},
transformRequest:function(obj){
var str=[];
for(var p in obj){
str.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
}
return str.join("&");
},
responseType:"text"
});
}
return{
getter:tongxin//返回这个方法
};
});
//指令---来自 博客园老牛大讲堂
app.directive("mydir",function(){//这里菜鸟有介绍
return {
restrict:"AE",
replace:true,
template:
'<div>这里是博客园老牛大讲堂</div>',
link:function(scope,elem,attr){
console.log("这里是处理相关的按钮，事件操作的");
}
}
});
//创建服务----单例模式，只进行一次new
app.service("myser",function(){
this.firstServer=function(){
return "第一个服务";
}
this.erServer=function(){
return "第二个服务";
}
});
//一些值，值可以进行改变---来自 博客园老牛大讲堂
app.value("myVal",{
id:1,
name:"名字"
});
//provider提供
app.provider("myPro",function(){
var f=function(name){
return "你好"+name;
};
this.$get=function(){//必须有
return f;
};
});
//控制器---来自 博客园老牛大讲堂
//
app.controller("myCon",function($scope,myFac,myser,myVal,myPro){//引入各个模块
//controller调用factory方法
myFac.getter().success(function(data){
console.log(data);//输出数据
});
//controller调用Server方法
$scope.hex = myser.firstServer();
//controller调用value里面的信息
$scope.k=myVal;
//controller调用provider方法
$scope.name=myPro("张三");
});
</script>
</body>
</html>
4、深入学习
如果你上面的链接以及东西都明白了，那么你已经入门了！现在就需要了解一下实际开发中各个模块是怎么协调开发的。
流程：1、首先编写静态页面。
2、当遇到需要改变的数据。需要修改成符合angualrJS的。
3、后端的查询流程：点击鼠标触发direction（指令）里面的link里面的方法。在link里面编写方法，调用facotry里面Htpp跨域请求。并为controller赋值。
4、显示出结果。
例子：下面的例子就是一个简单页面的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCon">
<table >
<a href="http://www.cnblogs.com/laonniudajiangtang/"><h1>博客园老牛大讲堂</h1></a>
<tr>
<td>id</td>
<td> 内容glary</td>
<td> 内容mark</td>
<td> 内容name</td>
<td> 内容sex</td>
</tr>
<tr ng-repeat="x in data">
<td>{{x.id}}</td>
<td>{{x.glary}}</td>
<td>{{x.mark}}</td>
<td>{{x.name}}</td>
<td>{{x.sex}}</td>
</tr>
</table>
<my-dir></my-dir>
<script>
var app = angular.module("myApp", []);
//控制层--博客园老牛大讲堂
app.controller("myCon", function($scope, myFac) {
$scope.data = myFac.getmodo();
console.log(myFac.getmodo());
});
//命令层--模仿的就是从后台获取数据----博客园老牛大讲堂
app.directive("myDir", function() {
return {
restrict: "AE",
replace: true,
template: '<button ng-click="dianji()">点击</button>',
link: function(scope, elem, attr) {
scope.dianji=function(){//重新为data数据赋值，因为是双向绑定，所以当为data赋值，页面内容就会发生变化。
scope.data = [{
"glary": "a",
"id": 1,
"mark": "a",
"name": "a",
"sex": "a"
}, {
"glary": "b",
"id": 2,
"mark": "b",
"name": "b",
"sex": "b"
}];
}
}
}
});
//工厂层 主要是为了编写初始数据----博客园老牛大讲堂
app.factory("myFac", function() {
function getmodo() {//为初始页面进行赋值，方便页面的测试
return [{
"glary": "a",
"id": 1,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "v",
"id": 2,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "s",
"id": 3,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "df",
"id": 4,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "h",
"id": 5,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "k",
"id": 6,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "v",
"id": 7,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "x",
"id": 8,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "n",
"id": 9,
"mark": "1",
"name": "1",
"sex": "1"
}, {
"glary": "m",
"id": 10,
"mark": "1",
"name": "1",
"sex": "1"
}];
}
return {
getmodo: getmodo
};
});
</script>
</body>
</html>
浙公网安备 33010602011771号