码迷,mamicode.com
首页 > 其他好文 > 详细

Angular模块/服务/MVVM

时间:2016-11-13 16:48:36      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:view   后台   过程   程序   正则表达   mode   head   web   int   

angular 与 jquery

共同点

  • 都是一个前端的JS文件而已

不同点:

  • angular 是一个框架

    • 我们写的代码由框架调用,我们必须要按照特定的规则编写代码

  • jquery是一个库

    • 我们调用库预制的方法或对象实现我们想要功能

  • 在思想上:+jquery提高了操作DOM的开发效率

    • angular 几乎没有任何DOM操作(不是没有,只是不用我们自己操作)

    • angular 内置一个类似jqLite的东西angular.element()

    • angular 不提倡DOM操作

什么是AngularJS

  • 一个前端框架,提供一种极大减少DOM操作的编程方式,在前端页面中引入了传统在后台开发中使用的一些思想,增强代码的结构和可维护性

  • 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式

  • 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务

依赖注入

  • 没事你不要来找我,有事我会去找你。

  • 原理 框架在调用方法的过程中通过获取到传递的参数,然后框架内部将方法toString处理以后, 再通过正则表达式将其获取到然后依次实例化。

模块

  • 如何进行多模块开发

    • 多模块的开发通常是指多个Module模块开发,

  • 多模块其他使用方式(不推荐)

    • 1.和其他的一样创建多个module模块

    • 2.设置不同的id通过id绑定:< div id="app3">

    • 3通过bootstrap绑定模块:angular.bootstrap(app3,["otherApp"]);

  • 多模块使用

    • 一个参数是寻找模块 angular.module(‘需要寻找的模块名称‘)

    • 两个参数是添加模块 angular.module(‘模块名称‘,[‘依赖的模块‘]);

  • 如何划分模块

    • 1.根据当前需要开发的应用程序的组成划分需要多少模块,比如:

      • 注册模块

      • 登录模块

      • 用户列表页模块

      • 用户详细页模块

  • 2.根据文件类型的不同来划分

    比如:
    • 所有的控制器

      • 所有的服务

      • 所有的指令

控制器

  • 控制器的作用

    • 初始化属性

    • 暴露属性或者行为

    • 监视数据变化 $scope.name=‘‘;

      $scope.$watch(‘name‘,function (newVal,oldVal) {
          console.log(newVal);
          console.log(oldVal);
      })//如果是监视对象,后面多添加一个参数true
  • 控制器代码压缩问题

    • 当代码进行js压缩时候controller里面的内容会被当成变量替换掉,为了防止这个问题发生在controller中出现 controller(‘myCtrl‘,[‘?scope){}])

  • 控制器的多种写法

    • 1.标准写法 app.controller(‘myCtrl‘,function(){})

      1. fuction写在外面(写在外面不能被压缩) function otherCtrl($scope) { $scope.name=‘123‘;}app.controller(‘myCtrl‘,otherCtrl)

    1. fuction写在外面(写在外面不能被压缩)function otherCtrl(otherscope) { otherscope.name=‘123‘; } otherCtrl.?scope‘];//这里对方法添加$inject app.controller(‘myCtrl‘,otherCtrl)

  • 4在controller内部使用依赖注入 app.controller(‘myCtrl‘,function ?scope,$injector) {

       $injector.invoke(function ($log) {
           $log.info(123);
       })

    })

  • 5 早期使用 (angular-1.2.29版本) function myController($scope) {

       $scope.name="angular早期使用";

    }

  • 6 面向对象方法使用

    • 1.控制器的function不写改为引用function app.controller(‘myCtrl‘,demoCtrl);

      • 2.创建一个面向对象的function ` function demoCtrl() {

            this.name=‘123‘;
        } `
      • 3.使用的时候添加 as scope ng-controller="myCtrl as scope"

Angular服务

  • 什么是服务

    • 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。

    • Angular主要用到的服务

    • $scope:作用域,用来负责连接View和Controller,也就是MVVM中的ViewModel相当于桥梁一样。

    • $rootScope

    • $location

    • $window

    • $log

    • $interval和setInterval区别 在数据变换过程中有时候angular监视不到数据变化:

      setInterval(function () {
          $scope.time=new Date();
          console.log($scope.time);
           $scope.$apply();//告诉angular进行数据更新
      },1000)
      //但是如果说使用 $interval这种angular的服务有时候服务内部就帮我们完成了这种数据更新
  • 创建服务 通过module创建: service、factory

    • service创建:app.service(‘myService‘,function () { this.name=‘myService‘; });

    • factory创建: app.factory(‘myFactory‘,function () { return {

         name:‘myFactory‘, 

      } });

指令

  • ng-bind

  • ng-bind-html

  • ng-repeat

  • ng-class

  • ng-if

  • ng-hide

  • ng-show

  • ng-switch

  • ng-src

  • ng-href

  • ng-focus

  • ng-blur

  • ng-dblclick

MVVM设计模式

  • 什么是MVVM设计模式

    • Model(模型)

    • View (视图)

    • ViewModel (视图模型)

    • 由上面三个部分组成其中ViewModel就是$scope起到桥梁的作用将Model和View联系起来

    • MVVM模式是Model-View-ViewMode(模型-视图-视图模型)模式的简称,其最早出现在微软的WPF和Silverlight框架中,使用ViewModel(视图模型)来实现View和Model的粘合,同时让View和Model的进一步分离。方便美工和程序员职能分离。

  • MVVM本质

    • 其本质就是为了代码模块化

      • 模块化的好处是逻辑清晰、维护方便但是同时也会增加代码量和开发成本

angular的特性

  • 双向数据绑定

  • 指令系统

  • MVVM设计模式

  • 多模块化开发

  • 依赖注入

Angular模块/服务/MVVM

标签:view   后台   过程   程序   正则表达   mode   head   web   int   

原文地址:http://www.cnblogs.com/bici/p/6058675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!