AngularJs学习笔记2——四大特性之MVC
angularJs的四大特性
①.采用MVC的设计模式
②.双向数据绑定
③.依赖注入
④.模块化设计
现在细说一下MVC的设计模式：
MVC：
View（视图）——数据的呈现
Controller（控制器）——获取模型数据，选择视图加以呈现。
整个MVC的流程也就是上图的样子，用户行为触发控制器，然后改变模型数据，经过模型的处理，更新相关的视图。形成MVC的环流。下面具体说一下AngularJS中如何实现MVC的步骤的。
使用ng的MVC的基本步骤：
①声明一个模块
var app = angular.module('模块名字',[依赖列表])
②注册模块
ng-app='模块名字'
③声明控制器
app.controller("控制器的名字"，func)
④使用控制器
<ANY ng-controller='控制器的名字'></ANY>
⑤操作模型数据
$scope对象去定义模型数据: $scope.name='mini_fan'
$scope是建立模型数据和视图的桥梁
目标：创建一个简易的购物车，可以显示、添加、删除购物车内的购物信息
实现结果是：
功能1：显示 功能2：添加 功能3：删除
<!DOCTYPE html>
<!--2.通过ngApp指令 完成模块的注册-->
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<!--4.在body被加载的时候，会去执行myCtrl控制器-->
<body ng-controller="myCtrl">
<table>
<thead>
<tr>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tmp in cart track by $index">
<td>{{tmp.price}}</td>
<td>{{tmp.num}}</td>
<td>{{tmp.price*tmp.num}}</td>
<td><button ng-click="deleteCart($index)">删除</button></td>
</tr>
</tbody>
</table>
<button ng-click="addCart()">添加</button>
<script>
// 1.声明一个模块
var app = angular.module('myModule', ['ng']);
// 3.控制器的声明
app.controller('myCtrl', function ($scope) {
// 5.操作模型数据
$scope.cart = [
{price: 4, num: 2},
{price: 9, num: 1},
{price: 5, num: 3}
];
$scope.deleteCart=function($index){
$scope.cart.splice($index,1);
}
$scope.addCart=function(){
$scope.cart.push({price:4,num:2});
}
});
</script>
</body>
</html>
AngularJs学习笔记2——四大特性之MVC的更多相关文章
- AngularJs学习笔记7——四大特性之模块化设计
模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...
- AngularJs学习笔记6——四大特性之依赖注入
压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...
- AngularJs学习笔记4——四大特性之双向数据绑定
双向数据绑定 方向1:模型数据(model)绑定到视图(view) 实现方法:①.{{model变量名}} ②.常用指令(ng-repeat) 方向2:将视图(view)中用户输入的数据绑定到模型数 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Injecting Services Into Controllers
原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...
- AngularJs学习笔记--I18n/L10n
原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...
随机推荐
- hdu 4848 搜索+剪枝 2014西安邀请赛
http://acm.hdu.edu.cn/showproblem.php?pid=4848 比赛的时候我甚至没看这道题,事实上不难.... 可是说实话,如今对题意还是理解不太好...... 犯的错误 ...
- VS2008编程软件过期的问题，过期弹出须要升级窗体的解决的方法
找到安装文件,再点autorun.exe安装文件,然后反复安装过程就会弹出须要填写系列号的地方,天上以下第一个系列号就可以. Visual Studio 2008 Professional Editi ...
- 【BUG】Kewastunpackstats(): Bad Magic 1 (0x。。。。, 0)
Kewastunpackstats(): Bad Magic 1 (0x1108f7b87, 0) In Alert Logfile After Upgrading to 11.2.0.1 Appli ...
- Java基础知识强化49：10个实用的但偏执的Java编程技术
1. 将String字符串放在最前面 为了防止偶发性的NullPointerException 异常,我们通常将String放置在equals()函数的左边来实现字符串比较,如下代码: // Bad ...
- LDAP缓存命令
启动cacao及实例: [root@rusky bin]# cd /home/ldap/iamldap/dsee6/cacao_2/cacao/bin [root@rusky bin]# ./caca ...
- SQL数据库增删改查基本语句
adoquery1.Fielddefs[1].Name; 字段名dbgrid1.columns[0].width:=10; dbgrid的字段宽度adoquery1.Fields[i].DataTyp ...
- MYSQL触发器的NEW和OLD的一个小问题
OLD NEW 对于没有插入的字段,OLD和NEW的值都等于原来的记录
- 初学Java ssh之Spring 第一篇
之前虽然毕业前实习的工作是使用的C# .NET语言,但是,毕业后还是果断应聘Java.虽然自己对Java的理解不如C#深入,只是对基础知识比较熟悉,但还是义无返顾了··· 虽然应聘经历比较坎坷,但最终 ...
- iOS 中实现随机颜色
开发中为了测试能够快速看到效果很多时候我们对颜色采用随机颜色 代码块如下 UIColor * randomColor= [UIColor colorWithRed:((float)arc4random ...
- MySql不支持主外键
创建表不支持主外键,能够添加外键成功,但是无法外键约束.查资料发现MySql的默认ENGINE 为MyISAM ,不支持外键,需要修改为 INNODB 修改前: Create Table CREAT ...