Angular.js 学习日志一,入门的开始
引入angular.js(前端级)
引入过后，可以在你需要angular其作用的标签里写上ng-app,那么该标签以内的angular表达式都会被进行解析,如:
<div ng-app>
1+2={{1+2}}
</div>
页面结果:
1+2=3
通过这个小实验，说明已经迈出了学习angular.js的第一步了，接下来展示一下动态模板控制以及其最为cool的设定:数据双向绑定
首先创建entity.js(页面级),包含内容如下:
function people($scope){
$scope.list=[
{name:"Mike",age:20},
{name:"Jice",age:21},
{name:"Mick Tom",age:25},
{name:"Aice",age:23}
];
}
然后,在页面写上一下代码，当然别忘了引入entity.js
<div ng-app ng-controller="people">
Search:<input type="text" ng-model="txtSearch"/> OrderBy:<select ng-model="selOrder"><option value="name">name</option><option value="age">age</option></select>
<ol ng-repeat="pe in people.list|filter:txtSearch|orderBy:selOrder">
<li>{{pe.name+"||"+pe.age}}</li>
</ol>
CurrentKeywords:[{{txtSearch}}],OrderedBy:[{{selOrder}}]
</div>
怎么样，尝到数据双向绑定的甜头了吧，当然，我们的数据都是从服务器上请求过来的,用angular.js发起服务请求也很简单哦，修改people方法如下:
function people($scope,$http){
$http.get("path")
.success(function(data){
//注意返回格式
$scope.list=data;
})
.error(function(msg){
alert(msg);
})
;
}
Chapter 1,done
