您的位置：首页 > Web前端 > AngularJS

AngularJS

2015-08-02 15:51 651 查看

AngularJS

AngularJS 是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。

AngularJS 来源于mvc 但实际更接近从mvc演化而来的mvvc

5个特性

1、双向的数据绑定

2、模版

3、mvc

4、服务和以来注入

5、指令

一段基本代码

<!DOCTYPE html>
<html ng-app>    　　　　　　　　　　　　　　　　　　　　　　//必须在此声明ng-app
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>  　　//导入angular的css文件

<script>
function people($scope){
$scope.students=[{id:1,name:"小李",age:19},
{id:2,name:"小明",age:17},
{id:3,name:"小强",age:21},
{id:4,name:"小华",age:16}];
$scope.date1=new Date()
}

</script>
</head>
<body ng-controller="people">  //设置作用域 域名为上面名为的people的函数
<input type="text" ng-model="that"/> <label>{{that}}</label>  //绑定模块和视图
<select ng-model="orderby"> 　　//绑定模块
<option value="age">年龄升序</option>
<option value="-age">年龄降序</option>
</select>
<p>
<input type="text" ng-model="search"/>
</p>
<p>
{{date1|date:"yyyy-MM-dd"}}
</p>
<table >
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="peoples in students|orderBy:orderby|filter:{age:search} ">
<td>{{peoples.id}}</td>
<td>{{peoples.name}}</td>
<td>{{peoples.age}}</td>
<td>{{date1|date:"yyyy-MM-dd EEE"}}</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航