Angularjs

一. angularjs概述

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

二. AngularJS与Jquery的区别

jq : 找元素 操作元素

ng : 关注 业务数据

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

  1. angularMVC模式的写法

    1. <body ng-app="myModule">

    2. <div ng-controller="myControl">{{name}}</div>

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

      $scope.name = "gg";
      })

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

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

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

三. Angularjs的四大特性

 1)使用MVC设计模式

 2)双向数据绑定

 3)依赖注入

 4)采用模块化设计

四. Angularjs的使用

  1. 引入angular.js文件

  2. 写Angular表达式

    {{表达式}}

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

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

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

    用法: <ANY ng-app>

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

    1. ng-Init:声明模型变量

    用法:<ANY ng-init="变量名=值;变量名=值">

    注意:

    ngInit声明变量不能声明var关键字,声明的变量可以在ng表达式中输出
    
    只要在ngapp中声明的变量在哪里都可以使用
    
 3) ngBind:计算一个表达式的值,输出为当前元素的innerHTML

    用法:<ANY ng-bind="表达式"> 或<ANY class="ng-bind:表达式;">

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

4)ng-Controller: 调用Controller创建函数,实例化一个控制器对象

5)ngRepeat:用于在view实现循环输出

    <ANY ng-repeat="变量名 in 集合对象">{{变量名}}</ANY>

    含义:

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

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

     若布尔表达式为true,则输出当前元素,否则当前元素再DOM树不存在
  1. 测试ng表达式可以执行哪些运算

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

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

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

<ANY ng-init="变量名=值;">

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

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

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

   ngApp -> Module -> Controller -> Modal

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

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

    <html ng-app></html>

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

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

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

    <html ng-app="myModule"></html>

4. 在模块中声明Controller

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

        

      }); 

5.  在view中指定Controller对象的作用范围-调用控制器创建函数
         
     <div ng-controller="myContro">
        {{name}}
     </div>


6. 在Controller中声明Modal数据

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

         #$scope.name = "蓝科教育";

      });

推荐阅读更多精彩内容