angularjs简介

angular简介

  • jQuery :库
  • 封装了一些常用的方法,我们主动的调用这些方法
    -- 提高了代码的利用,以及代码后期的维护
  • Angular: 前端框架
  • 框架提供了一些结构或者模式,
  • 我们是根据框架提供的结构或者模式去书写代码
  • 由框架帮助我们去执行相应的操作。

什么是angular

  • 1、一款非常优秀的前端高级 JS 框架。
  • 2、有了这一类框架就可以轻松构建 SPA(single page application) 应用程序。
  • 3、其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。
  • 4、Angular不推崇DOM操作,也就是说在NG中几乎找不到任何的DOM操作

Angular 的核心特性

  • 指令

  • MVC

  • 模块化 angular.module()

  • 双向数据绑定

指令

  • angular中以ng-开头的属性叫作指令
  • ng-app 告诉angular来管理html代码,管理ng-app所在元素及其子元素。
  • ng-click 用来注册点击事件,

    var add = document.getElementById('add');
    add.onclick=function(){
    val = (val-0)+1; // num.value = (num.value - 0) +1
    }
    $scope.add = {
    $scope.num = ($scope.num - 0 )+ 1;
    }

  • ng-model:var num = document.getElementById('num').value
  • ng-init :进行初始化操作: ng-init="user.name='小明'"

模块(module)

  • angular.module('myApp',[])

第一个参数是模块的名字
第二个参数是一个数组,数组的元素是该模块所依赖其他模块的名字
注意,即使不依赖任何模块,也需要给第二个参数传递一个空数组
否则angular.module('myApp')就是去获取名为myApp的模块对象

控制器(controller)

  • angular.module('myApp',[]).controller('demoController',function($scope){})

第一个参数,是控制器的名字
第二个参数,是一个回调函数,在回调函数里写我们想要的js代码。

双向数据绑定

  • 数据模型的值发生改变,就会导致页面值的改变.
    页面值的改变,就会导致数据模型值的改变,这各种相互影响的关系就是双向数据绑定。
  • ng-model 的使用

MVC 思想

  • M:Model 模型 :数据存储,一些业务逻辑
  • V:View 视图 :就是用来展示数据
  • C:Controller 控制器: 调度业务逻辑

常用指令

  • ng-bind

    • 用来解决表达式闪烁问题

    • 注意:只能够在双标签中使用ng-bind指令
  • ng-cloak

    • 用来解决表达式闪烁问题
    • {{name}}

    • 利用angular在加载会移除页面上所以名为ng-cloak的样式名的特性。
  • ngSanitize模块
    npm install angular-sanitize

    • 使用的是ng-bind-html指令来渲染数据模型。
  • ng-repeat

    • 可以用来循环输出数组

    • 写在哪个元素上就是循环哪个元素。

    • 语法:类似于forin 循环

      {{item}}

      + track by $index 解决数组中数据有重得的问题
      +
    • 还可以用来渲染key,value对

    • ng-repeat 在遍历里会暴露一些数据模型,

      • $even:提供了一个布尔值,当为true时表示当前数据是第偶数条数据,从索引0开始计算
      • $odd:提供了一个布尔值,当为true时表示当前数据是第奇数条数据,从索引0开始计算
      • $first,$last ,$middle
        ng-class:
    • 从多种样式中选择一个样式

      • 语法:类似于从一个key,value对象中获取其中一个属性的值
      • ng-class="{'A':'red','B':'blue','C':'green'}"
    • 从多种样式中选择多个

      • 语法:也是写一个key,value对象,这里的key是我们提供的类样式名,value是一个布尔值,为true时对应的key会被作为样式名加入到class中

ng-hide/ng-show

  • ng-hide:需要一个布尔值:当为true时为隐藏当前元素
  • ng-show: 需要一个布尔值:当为true时为显示当前元素

ng-if:需要一个布尔值:当为true时为显示当前元素
为false时是删除当前元素

ng-switch:与ng-switch-when同用,类似与js中的switch case

    
我是小明
我是小红
我是小月

其他常用指令

  • ng-checked:
    • 单选/复选是否选中,是单向数据绑定
  • ng-selected:
    • 是否选中
  • ng-disabled:
    • 是否禁用
  • ng-readonly:
    • 是否只读

常用事件指令

不同于以上的功能性指令,Angular还定义了一些用于和事件绑定的指令:

  • ng-blur:失去焦点
  • ng-focus:获得焦点
  • ng-change:改变事件
  • ng-copy:复制事件
  • ng-click: ng-click="add()"
  • ng-dblclick:双击事件
  • ng-submit: 表单提交事件

你可能感兴趣的:(angularjs简介)