Anjularjs简介

一. jS类库

1. jQuery是一个js函数库，操作思路仍然是DOM操作思路：先查找元素，再操作元素

2. jQueryUI是一个HTML组件库，简化了HTML/CSS的编写

3. Bootstrap是一个/CSShtml/js框架，主要提供了响应式布局、HTML组件、CSSReset

4. Angular(昂格夜啦)是一个js框架，彻底颠覆了传统的DOM操作，所有的关注点集中在业务数据上，而不是DOM树，适用于以数据操作为主的SPA(Single Page Application)应用

二. 软件工程---软件设计原则

1. 避免重复原则

2. KISS(Keep It Simple and Stupid)原则,代码越简单越傻瓜越好

3. YAGNI避免创建你不需要的代码

4. 开闭原则，不让别人修改自己的代码，但可以扩展代码

5. 最小惊讶原则

6. 单一责任原则

7. 高聚合低耦合，组件内部的逻辑关系越紧密越好，组件与组件之间关系越少越好

8. 最少知识法则、迪米特法则，组件用到的知识越少越好

三. 软件工程---设计模式

1. 概述

   马走日象走田 => 双炮、马后炮

   对象/原型/闭包 => 设计模式

 设计模式是一套被反复使用，多数人知晓的，经过分类的，代码设计经验的总结。使用设计模式是为了可重用代码，让代码更容易被他人理解，保证代码的可靠性

2. 23+1种 +1是MVC模式

MVC模式根据逻辑关系，把前端项目的代码分为三个层次

   * model-模型

     就是业务数据，前端项目中是js的变量

 * view-试图

     就是业务数据在用户面前的展现

 * controller-控制器

     负责业务数据的增删改查,前端项目中就是function

四. angularjs概述

1. angularjs诞生于2009年，由Misko Hevery等人创建，后为Google所收购，所有的操作思路都以“业务数据”为关注点，彻底颠覆了传统的DOM操作，适用于以数据的CRUD操作为主的SPA应用

2. Angular与jQuery的关系

 1) jQuery操作思路：先找元素，在操作元素

 2) Angular操作思路：创建业务数据、绑定数据、维护数据

 3) Angular已经把底层/低级的DOM操作，为开发者封装起来了

 4) AngularJS在加载时会查看当前页面是否已经加载了jquery,若存在则所有的DOM操作全都使用jQuery提供的方法，若不存在，则使用自定义的jQuery精简版本，jQlite--只有jquery的核心方法

3. Angularjs的四大特性

 1）使用MVC设计模式

 2）双向数据绑定

 3）依赖注入

 4）采用模块化设计

五. Angularjs的使用-第一个ng页面

1. 引入angular.js文件

2. 写Angular表达式

   {{表达式}}

   ng会计算表达式的值，输出在当前位置

3. ng模块提供的指令(directive)组件

   1. ngApp:启动一个Angular应用--只有Angular应用中的表达式才会被Angular执行

   用法：

   注意： angular应用范围仅限于声明他的元素范围，且默认情况下一个HTML中不允许声明多个ngapp

   2. ng-Init：声明模型变量

   用法：

   注意：

   ngInit声明变量不能声明var关键字,声明的变量可以在ng表达式中输出
   只要在ngapp中声明的变量在哪里都可以使用

 3) ngBind:计算一个表达式的值，输出为当前元素的innerHTML

    用法：
          或

    说明：*ngBind指令作用于{{}}表达式基本类似，只是可以防止用户在一瞬间看到{{}}.*

 4）ng-Controller: 调用Controller创建函数，实例化一个控制器对象
    
5）ngRepeat:用于在view实现循环输出

      {{变量名}}

    含义：*对于集合对象中的每一个元素，依次赋值给指定的变量名，对每次赋值都输出一遍当前元素*

 6）ng-If:用于在view中实现判断输出，为false就不输出

     若布尔表达式为true,则输出当前元素，否则当前元素再DOM树不存在

4. 测试ng表达式可以执行哪些运算

   算术运算 +-*/ %  都可以，唯独不能自增和子减
   比较运算 <>      
   逻辑运算 && || ! 
   三目运算 ?:
   调用字符串对象的成员方法 
   使用直接量表示法创建对象
   创建数组
   使用new关键字创建对象
   调用ES全局函数 parseInt() parseIntFloat()...
   

六. ng中声明模型数据的方式

1. 使用ng-init指令来声明Model数据

说明：*此方式将modal声明在view中，严重违法了MVC模型的分工，不推荐使用*

2. 使用Controller对象创建modal数据--符合MVC模型分工

   新版本的ng中创建Model的语法

    ngApp -> Module -> Controller -> Modal
   

七. Angular四大特性之一---MVC

1. 声明一个ng的应用程序 ngApp

2. 创建一个自定义的模块：angular.module("模块名",[依赖列表])

    angular.module.("模块名",["ng"])
   

3. 在应用中注册自定义模块 ng-app="模块名"

4. 在模块中声明Controller

   angular.module.("模块名",["ng"]).controller("myContro",function(){     
   
   }); 
   

5. 在view中指定Controller对象的作用范围-调用控制器创建函数

   
      {{name}}
   
   

6. 在Controller中声明Modal数据

    angular.module.("模块名",["ng"]).controller("myContro",function($scope){
   
      #$scope.name = "蓝科教育";
   
   });
   

   注意： Angular明明命名空间，&和&&为防止和你的代码的名称产生冲突 ng公共对象的前缀名使用$ 私有对象名使用$$ 请不要在你的对象中使用这两个符号

7. 注意

   1）一个项目中可以声明多个模块功能，如用户管理模块，商品管理模块

   2）某个模块可以依赖于其他模块

   3）有一个模块必须注册给ngApp指令-启动模块

   4）一个模块中可以声明多个组件，

   controller/directive/service/filter/....

七. 补充：JavaScript中对象的分类

1. ECMAScript标准对象 Global String Date RegExp Array Object

   可以在任一个js解释器中使用

2. 宿主对象

   DOM ： Node Element Attribute
   BOM: window document

   只能在浏览器中的js解释器中使用，不能在独立的服务端js解释器中使用

3. 用户自定义对象

总结

1. AngularJS与Jquery的区别

jq : 找元素 操作元素

ng : 关注 业务数据

ng ：其实就是进一步封装了JQ,jQlite

2. angularMVC模式的写法

   2. {{name}}

   3. angular.module("myModule",["ng"]).controller("myControl",function($scope){

      $scope.name = "gg";
      })

3. ng-app 启动ng应用程序
   ng-init 定义模型变量
   ng-bind 用来显示数据，跟{{}}作用一样
   ng-controller 创建控制器对象

   ng-repeat: 根据数据内容重复创建某个元素，这个属性在哪个标签中，就重复谁

   ng-if 判断,如果成立显示元素，不成立就消失在DOM树中