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? 国 ...
随机推荐
- WebMagic的设计参考了业界最优秀的爬虫Scrapy
http://webmagic.io/docs/zh/posts/ch1-overview/thinking.html https://github.com/psvehla/liferay-sprin ...
- 关于material和sharedMaterial的问题
在unity3d中,Renderer组件有两个属性:material和sharedMaterial,它们都可以用来获取Renderer的材质属性.但是它们之间却又很大的区别,下面通过示例来讲解一下. ...
- LIB文件和DLL文件的作用
(1)lib是编译时需要的,dll是运行时需要的.如果要完成源代码的编译,有lib就够了.如果也使动态连接的程序运行起来,有dll就够了.在开发和调试阶段,当然最好都有.(2)一般的动态库程序有lib ...
- 好的android编码习惯
上一期分享了android内存优化的一些总结,这一期说说我认为的好的编码习惯,然后下一期会做安卓数据库优化的一些总结,逐渐的会将一些性能优化点总结分享出来,肯定是不够全面的希望不足的地方欢迎指出. 良 ...
- Android学习笔记之viewholder
在adapter中通过使用静态内部类(viewholder)缓存组件的引用来防止ListView刷新时重新LayoutInflater跟findViewById从而达到优化的目的.示例如下: @Ove ...
- .NET基础拾遗（7）多线程开发基础2
二..NET中的多线程编程 2.1 如何在.NET程序中手动控制多个线程? 最直接且灵活性最大的,莫过于主动创建.运行.结束所有线程. (1)第一个多线程程序 .NET提供了非常直接的控制线程类型的类 ...
- django: startproject
python 的 django 框架的安装教程很多,这里不列举安装过程,直接开始记开发应用过程. 1 startprojec,新建项目 $ django-admin.py startproject ...
- JS 无提示关闭当前窗口
function teseClose() { window.opener = null; window.open('','_self'); window.close(); }
- myeclipse笔记（3）：导入的项目切换jdk版本
有时候,从外面导入的javaweb项目会访问不了,这个时候改变jdk版本就是其中解决的方法之一. 右键点击项目 --> bulid path --> configure 选择需要 ...
- C++拾遗（一）关于main()函数
C:省略返回值默认为int,()中空着不等于void C++:不能省略返回值,()中空着等效于(void) 常规独立程序必须包含一个main(),DLL可以不需要main().