zoukankan      html  css  js  c++  java
  • AngularJS--MVC模型

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

    Angular四大特性:

      (1)MVC模型

    Model:模型,即业务数据,在前端应用中就是保存在特定范围的JS变量

    View:视图,即业务数据在用户面前的呈现,在前端应用中就是HTML

    Controller:控制器,负责业务数据的获取、修改、删除等,在前端应用中由function来担当。

      (2)双向数据绑定

      (3)依赖注入

      (4)模块化(Module)设计——体现“高聚合低耦合”设计原则

    面试题: AngularJS与jQuery的关系?

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

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

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

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

    1.MVC模型

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

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

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

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

    1)controller

    2)directive

    3)service

    4)filter

    5)...

    2.控制器的作用范围/作用域

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

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

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

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

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

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

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

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

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

    练习:

    1)创建一个点击计数器,有一个按钮,只要点击一次,立即显示出点击次数。

    2)仿写轮播广告中的“前进/后退”按钮,提示:忘掉传统的轮播广告!注意img的src属性值可以赋值为一个Model数据,而此数据可以使用模型函数进行修改。

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

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

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

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

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

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

    4.ng模块中提供的service组件

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

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

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

    5.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;

    如何压缩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)注意:所有的数据和值不会进行简化!

    6.AngularJS四大特性之三——依赖注入

  • 相关阅读:
    kubernetes入门之kube-proxy实现原理
    kubernetes源码阅读及编译
    docker的网络-Container network interface(CNI)与Container network model(CNM)
    kubernetes入门之skydns
    浅析flannel与docker结合的机制和原理
    kubernetes入门之快速部署
    python并发获取snmp信息及性能测试
    Facebook开源的基于SQL的操作系统检测和监控框架:osquery daemon详解
    Facebook开源的基于SQL的操作系统检测和监控框架:osquery Table详解
    视频工具类产品是个什么玩意,产品经理怎么构思一款视频工具类产品
  • 原文地址:https://www.cnblogs.com/baiyanfeng/p/5042912.html
Copyright © 2011-2022 走看看