AngularJS学习笔记(二)MVC设计模式及数据的双向绑定

1、AngularJS定义:

Google AngularJS是一个JS框架,主要思路不是传统的“先查找再操作DOM元素”,而是“以数据为中心”。适用于以数据操作为主的SPA应用。

 

2、AngularJS与jQuery的关系?

  jQuery操作思路:先找元素,再操作元素   $(....).xxx();

  AngularJS操作思路:创建业务数据、绑定数据、维护数据

  AngularJS已经把底层/低级的DOM操作,为开发者封装起来了

  AngularJS在加载时会查看当前页面是否已经加载了jquery.js(就是判断window.jQuery是否存在),若存在则所有的DOM操作全都使用jQuery提供的方法;若不存在,则anglarJS会使用自定义的jQuery精简版本——jqLite——只有jQuery的核心方法。

 

3、MVC模型

  (1)在一个Angular应用中可以声明多个模块(module)

  (2)某个模块可以依赖于其他的模块

  (3)有一个模块必须注册给ngApp指令——启动模块

  (4)一个模块中可以声明多种组件,如:

  1. controller
  2. directive
  3. service
  4. filter
  5. ...

 

4、控制器的作用范围/作用域

  (1)每次调用ngController都会创建一个新的Controller对象

  (2)每个Controller对象都有唯一的$scope对象

  (3)$scope就表示当前控制器对象的有效范围/作用域

  (4)声明在某个$scope中模型数据,一般情况下不能被其他的控制器所使用。

  (5)若想在多个控制器间共享/传递数据,可以声明在根作用域中——$rootScope—每个Angular应用(ngApp)只有一个唯一的$rootScope对象

  (6)控制器的本质用途:用于划分一个大型页面中的不同的DIV块——每个这样的块中都有自己专用的数据,以及可以与其他块共享的数据。

 

 

5、AngularJS四大特性之二——双向数据绑定——偏难&重点!

  (1)方向1:Model绑定到View,此后不论何时只要Model发生改变,View会自动立即同步更新。

实现方法:{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked ... 等等几乎所有的显示数据的指令都实现了方向1的绑定。

 

 

  (2)方向2:View绑定到Model,把视图中用户可以修改的HTML元素——即表单控件——的值绑定到一个Model变量上。此后,不论何时只要用户修改了表单控件的值,后台模型变量的值会立即随之改变。

实现方法:只有ngModel指令可以! 为了监视到Model变量真的被改变了,可以使用$scope.$watch()函数对Model数据的值进行监视。

·单行文本输入域,ngModel可以把value属性值绑定到Model变量

·复选框,ngModel可以把true/false值绑定到Model变量

·单选框,ngModel可以把当前选中的单选框的value值绑定到Model变量

·下拉框,ngModel可以把当前选中的option的value值绑定到Model变量

 

6、ng模块中提供的service组件

  (1)$rootScope 用于在所有的控制器间共享数据的服务

  (2)$interval 周期性定时器服务

  (3)$timeout 一次性定时器服务

 

 

7、ng模块提供的directive组件(前边几个是昨天上个笔记记过的)

  (1)ngApp

  (2)ngInit

  (3)ngBind

  (4)ngIf

  (5)ngRepeat

  (6)ngClick: 为元素绑定单击事件的监听函数——只能是Model函数($scope.函数名=function(){}),不能是全局函数

  (7)ngMouseOver ....

  (8)ngSrc: 为IMG标签指定src属性,但可以防止404请求错误

  (9)ngShow:  若赋值为true,则display:block;否则display:none;

  (10)ngHide:  若赋值为true,则display:none;否则display:block;

 

 

8、如何压缩js文件?

Yahoo User Interface,YUI项目中提供了一个很好用的压缩程序:yui-compressor

可用于压缩CSS、JS文件。使用步骤:

  1. 安装Java运行环境
  2. 编写JS/CSS文件,用于压缩
  3. 运行yuicompressor工具,执行压缩

 

提示:可以把yuicompressor配置为WebStorm中的FileWatcher,监视js/css文件,实现自动的压缩

注意:压缩工具会执行如下的压缩:

 (1)删除所有的注释

 (2)删除所有的无用的空白字符

 (3)变量名、函数名、形参名尽可能的简化

 (4)所有的数据和值不会进行简化!

 

9、实例

  1. 实现一个简易版的购物车计算器

  1. 用户“同意本站使用条款”则显示“注册”按钮;否则“注册”按钮消失
  2. 下拉选择用户头像的名称,旁边立即显示用户选择的头像图片

4)表格外勾选“全部选择”复选框,则表格内的所有复选框全部选择

<!DOCTYPE html>

<html lang="en" ng-app="myModule5">

<head>

  <meta charset="UTF-8">

  <link rel="stylesheet" href="css/bootstrap.css">

  <title></title>

</head>

<body>

<div class="container" ng-controller="myCtrl5">

  <h1>练习:双向数据绑定</h1>

 

  <h2>1.简易版计算器</h2>

  <!--方向2的绑定-->

  单价:<input type="text" ng-model="p.price">

  数量:<input type="number" ng-model="p.count">

  <!--方向1的绑定-->

  小计:{{p.price * p.count}}

 

 

 

  <h2>2.同意则显示</h2>

  <!--方向2的绑定-->

  <input type="checkbox" ng-model="agreeOrNot">我同意本站的使用条款<br>

  <!--方向1的绑定-->

  <input ng-show="agreeOrNot" class="btn btn-success" type="button" value="提交注册信息">

 

 

  <h2>3.选择角色</h2>

  <!--方向2的绑定-->

  <select ng-model="imgSrc">

    <option value="img/1.jpg">萌大叔</option>

    <option value="img/2.jpg">小萝莉</option>

    <option value="img/3.jpg">大力士</option>

  </select>

  <!--方向1的绑定-->

  <img ng-src="{{imgSrc}}" style="width:100px;height:100px;">

 

  <h2>4.全选和取消全选</h2>

  <!--<input type="checkbox" ng-model="selectAll">

  <input type="checkbox" ng-checked="selectAll">-->

  <table class="table table-bordered">

    <thead>

    <tr>

      <th>选择</th>

      <th>姓名</th>

      <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

      <td>

        <input ng-checked="selectAll" type="checkbox">

      </td>

      <td>Tom</td>

      <td>

        <button class="btn btn-danger btn-xs">删除</button>

      </td>

    </tr>

    <tr>

      <td>

        <input ng-checked="selectAll" type="checkbox">

      </td>

      <td>Mary</td>

      <td>

        <button class="btn btn-danger btn-xs">删除</button>

      </td>

    </tr>

    <tr>

      <td>

        <input ng-checked="selectAll" type="checkbox">

      </td>

      <td>King</td>

      <td>

        <button class="btn btn-danger btn-xs">删除</button>

      </td>

    </tr>

 

    </tbody>

  </table>

 

  <input type="checkbox" ng-model="selectAll">

  <span ng-hide="selectAll">全选</span>

  <span ng-show="selectAll">取消全选</span>

</div>

 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script src="js/angular.js"></script>

<script>

  angular.module('myModule5', ['ng']).

    controller('myCtrl5', function($scope){

      $scope.p = new Object();

      $scope.p.price = 0;

      $scope.p.count = 0;

 

      /*$scope.selectAll = true;

      $scope.$watch('selectAll', function(){

        console.log('Model变量selectAll的值改变了:'+$scope.selectAll);

      })*/

  });

 

</script>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值