angularJs的四大特性

①.采用MVC的设计模式

②.双向数据绑定

③.依赖注入

④.模块化设计

现在细说一下MVC的设计模式：

MVC：

　　Model（模型）——项目中的数据

　　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是建立模型数据和视图的桥梁

下面做一个购物车的练习来熟悉一下MVC的步骤

　　目标：创建一个简易的购物车，可以显示、添加、删除购物车内的购物信息

　　实现结果是：

　　功能1：显示　　　　　　　　　　　　功能2：添加　　　　　　　　　　功能3：删除

　　　　

  1.  <!DOCTYPE html>
  2.  <!--2.通过ngApp指令 完成模块的注册-->
  3.  <html ng-app="myModule">
  4.  <head lang="en">
  5.    <meta charset="UTF-8">
  6.    <title></title>
  7.    <script src="js/angular.js"></script>
  8.  </head>
  9.  <!--4.在body被加载的时候，会去执行myCtrl控制器-->
  10.  <body ng-controller="myCtrl">
  11.  
  12.  <table>
  13.    <thead>
  14.    <tr>
  15.      <th>单价</th>
  16.      <th>数量</th>
  17.      <th>小计</th>
  18.      <th>删除</th>
  19.    </tr>
  20.    </thead>
  21.  
  22.    <tbody>
  23.    <tr ng-repeat="tmp in cart track by $index">
  24.      <td>{{tmp.price}}</td>
  25.      <td>{{tmp.num}}</td>
  26.      <td>{{tmp.price*tmp.num}}</td>
  27.      <td><button ng-click="deleteCart($index)">删除</button></td>
  28.    </tr>
  29.    </tbody>
  30.  </table>
  31.  <button ng-click="addCart()">添加</button>
  32.  <script>
  33.  //    1.声明一个模块
  34.    var app = angular.module('myModule', ['ng']);
  35.  //    3.控制器的声明
  36.    app.controller('myCtrl', function ($scope) {
  37.          //    5.操作模型数据
  38.      $scope.cart = [
  39.        {price: 4, num: 2},
  40.        {price: 9, num: 1},
  41.        {price: 5, num: 3}
  42.      ];
  43.          $scope.deleteCart=function($index){
  44.              $scope.cart.splice($index,1);
  45.          }
  46.          $scope.addCart=function(){
  47.              $scope.cart.push({price:4,num:2});
  48.          }
  49.    });
  50.  </script>
  51.  </body>
  52.  </html>

AngularJs学习笔记2——四大特性之MVC的更多相关文章

  1. AngularJs学习笔记7——四大特性之模块化设计

    模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...

  2. AngularJs学习笔记6——四大特性之依赖注入

    压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...

  3. AngularJs学习笔记4——四大特性之双向数据绑定

    双向数据绑定 方向1:模型数据(model)绑定到视图(view) 实现方法:①.{{model变量名}}  ②.常用指令(ng-repeat) 方向2:将视图(view)中用户输入的数据绑定到模型数 ...

  4. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  5. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  6. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  7. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  8. AngularJs学习笔记--Injecting Services Into Controllers

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...

  9. AngularJs学习笔记--I18n/L10n

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...

随机推荐

  1. 使用zTree控件制作的表格形式的树形+数据菜单

    測试了一下,兼容ie7以上, chrome opera ff 不使用对方css /*------------------------------------- zTree Style version: ...

  2. Linux常见面试题

      一．填空题:1. 在Linux系统中,以 文件 方式访问设备 .2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用 索引节点来标 ...

  3. uva 10626 - Buying Coke(记忆化搜索）

    题目链接:10626 - Buying Coke 题目大意:给出要买可乐的数量, 以及1元,5元和10元硬币的数量, 每瓶可乐8元,每次照钱会按照最少硬币的方式找回, 问如何投币可使得投入的硬币数最少 ...

  4. [Git] Automatically running tests before commits with ghooks

    Wouldn't it be nice if everyone ran the tests before committing code? With ghooks, you can automatic ...

  5. Android getResources的作用和须要注意点

    今天做一个Android的文件管理器,里面用到非常多的地方用到了getResources. Drawable currentIcon = null; currentIcon = getResource ...

  6. linux下查阅文件内容cat,more,less,tail

    1.常用cat,直接查看,一次性全部输出 cat  filename cat -b filename 显示行号,除空白行   cat -n 显示行号,包括空白行 常用:cat  filename | ...

  7. Linux系统中C&Cpp程序开发（一）

    之前一直在Windows系统下进行程序的设计,近期开始学习使用Linux系统,因而打算将程序开发也转移到Linux系统下.今天先简单介绍一下该系统下的C程序开发步骤. 首先要预先安装vim和gcc工具 ...

  8. VMware Virtual Machine安装报错解决1

    安装完VMware virtual machine 后,再进行 "create a new virtual machine"最后点击"Finish"时,报如下错 ...

  9. Chrome Browser

    set default search engine as follow for force encrypted searching: https://encrypted.google.com/sear ...

  10. DKNightVersion的基本使用(夜间模式)

    DKNightVersion下载地址: https://github.com/Draveness/DKNightVersion 基本原理就是利用一个单例对象来存储颜色, 然后通过runtime中的ob ...