Angular基本结构
2019-04-17 本文已影响0人
四爷来了
Angular基本结构
一般结构
1、引包
2、指定ng管理范围---->ng-app
3、创建模块---->angular.module()
4、创建角色
4.1 创建控制器---->app.controller()
4.2 指定与控制器相关联的视图---->ng-controller
5、控制器制造数据模型并附到$scope---->$scope.xx = yy;
6、在视图中显示模型数据---->{{xx}}
案例
<!DOCTYPE html>
<!-- 1.指定整个html文档都被ng管理-->
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/angular.js"></script>
</head>
<body>
<!-- 将视图与控制器相关联 -->
<table ng-controller="stuList">
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr ng-repeat="stu in students"><!-- 遍历数组,并循环生成html -->
<td>｛｛stu.id}}</td>
<td>｛｛stu.name}}</td>
<td>｛｛stu.gender}}</td>
<td>｛｛stu.age}}</td>
</tr>
</table>
<script>
//2.创建模块
var app = angular.module('myApp',[]);
//3.创建MVC角色. 控制器,视图
app.controller('stuList',['$scope',function ($scope) {
//制造数据模型,并绑定到$scope中.
$scope.students = [
{id:1,name:'小明',gender:'男',age:18},
{id:2,name:'小花',gender:'女',age:16},
{id:3,name:'小强',gender:'男',age:14},
{id:4,name:'小东',gender:'男',age:19},
{id:5,name:'小常',gender:'女',age:20}
];
}]);
</script>
</body>
</html>
