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设计模式
• 多模块化开发
• 依赖注入