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? 国 ...
随机推荐
- 在Ubuntu下构建Bullet以及执行Bullet的样例程序
在Ubuntu下构建Bullet以及执行Bullet的样例程序 1.找到Bullet的下载页,地址是:https://code.google.com/p/bullet/downloads/list 2 ...
- LOADRUNNER8.1卸载
卸载LOADRUNNER8.1后,不能正常又一次安装的问题. Loadrunner 8.1 安装1.下载Loadrunner8.1 (官方英文版) 2.安装Loadrunner8.1 3.破解:htt ...
- Android NOtification 使用（震动 闪屏 铃声）
一. Notification 简介 在 android 系统中,在应用程序可能会遇到几种情况需要通知用户,有的需要用户回应,有的则不需要,例如: * 当保存文件等事件完成,应该会出现一个小的消息,以 ...
- Android实现获取本机中所有图片
本示例演示如何在Android中使用加载器(Loader)来实现获取本机中的所有图片,并进行查看图片的效果. 在这个示例中,我使用android-support-v4.jar中的加载器(Loader) ...
- boost::pool与内存池技术
建议看这个链接的内容:http://cpp.winxgui.com/cn:mempool-example-boost-pool Pool分配是一种分配内存方法,用于快速分配同样大小的内存块, ...
- uploadify上传控件中文的乱码解决办法
uploadify上传控件中文的乱码解决办法 网站用的gb2312的编码,用uploadify上传控件上传中文时在IE能部分成功,FF,Chrome则完全失败,查找了一天原因,结果发现是页面编码问题, ...
- (第三章)Java内存模型(上)
一.java内存模型的基础 1.1 并发编程模型的两个关键问题 在并发编程中,需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来 ...
- php图片上面写文字，输出图片
<?php /* param $image 图象资源 param size 字体大小 param angle 字体输出角度 param showX 输出位置x坐标 param showY 输出位 ...
- C#（Net）软件开发常用工具汇总，提高你的开发效率
C#(Net)软件开发常用工具汇总,提高你的开发效率 写代码也要读书,爱全栈,更爱生活.每日更新原创IT编程技术及日常实用技术文章. 我们的目标是:玩得转服务器Web开发,搞得懂移动端,电脑客户端更是 ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...