MVC模式
模型(model)－视图(view)－控制器(controller)
Angular.js采用了MVC设计模式的开源js框架
1、如何在angular.js建立自己的模块(model)，控制器(controller)，操作模型数据。
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
<!--这里我们需要引入一个angular.js -->
</head>
<!--④：在body中，声明执行myCtrl控制器-->
<body ng-controller="myCtrl"> <!--用双花括号括起来来引用，创建好的模型数据 -->
<p>{{name}}</p> <script>
//①： 模块的声明
var app= angular.module("myApp",['ng']); //③： 控制器的声明
app.controller('myCtrl',function($scope){
console.log('in my contro function');
//⑤：操作模型数据
//$scope是建立模型数据和视图的桥梁
$scope.name='web1608';
});
</script>
</body>
</html>
2、ng指令
对于图像数据(ng-src)和(ng-click)的引用
<button ng-click="add()">＋1</button>
<img ng-src="img/{{imgUrl}}"/>
<script>
//模块的声明
var app=angular.module('myApp',['ng']); //控制器的声明
app.controller('myCtro',function($scope){
$scope.num=10;
$scope.imgUrl='1.jpg';
$scope.add=function(){
$scope.num++;
console.log($scope.num);
}
})
</script>
需要使用img的src属性是同样 也要用ng指令中定义好的ng-src 来使用模型数据。否则浏览器显示后会提示有错误 .
使用(ng-repeat)来遍历数据：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="myCtro">
<!--简易 添加 数据和 删除 数据 ng-repeat -->
<table>
<thead>
<tr>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<!--ng-repeat 遍历方式① -->
<tr ng-repeat="shop in cart track by $index">
<!--shop in cart 是遍历数组对象cart 给shop(自己命名) 和 for in 类似 -->
<!--track by $index 每个遍历过程的shop 都有一个下标 $index-->
<td ng-repeat="(key,value) in shop">
<!-- ng-repeat 遍历方式② -->
<!-- 遍历shop 关联数组 方式 ： 键对值-->
{{value}}
</td>
<td>
<button ng-click="delete($index)">删除</button>
</td>
</tr>
</tbody>
</table>
<button ng-click="add()">添加</button>
<script>
var app=angular.module('myApp',['ng']); app.controller('myCtro',function($scope){
$scope.cart=[
{cname:'冰箱',price:1000,num:1},
{cname:'烤箱',price:300,num:1},
{cname:'保鲜箱',price:200,num:1},
]; $scope.delete=function($index){
//对cart进行删除操作
$scope.cart.splice($index,1); } $scope.add=function(){
//直接入栈 添加新数据
$scope.cart.push({cname:'保鲜箱',price:200,num:1});
}
})
</script>
</body>
</html>
显示结果: