AngularJS入门

389 阅读2分钟

基本API

  1. 边界指令ng-app

    描述:指明一个边界,告知框架在哪个范围内生效

    语法:<html ng-app></html>

    注意:边界指令是使用ng框架必须使用的一个指令

  2. 呈现指令{{}}

    描述:NG框架规定{{}}签到双括号用来表示【内容呈现】功能

    ​ 在{{}}中可以书写NG语法规则下的变量、字符串甚至表达式

  3. 信息指令ng-model

    描述:NG框架规定ng-model用来对input或textarea这类

    ​ 用于收集用户信息的标签进行数据绑定

    语法:<input type="text" ng-model="message">

  4. 绑定指令ng-bind

    描述:NG框架中提供了一个用于对非输入性的标签使用的

    ​ 类似于{{}}呈现指令的辅助指令,作用是能够将NG变量绑定到想要显示的标签上

    语法:<span ng-bind="message"></span>

  5. 初始化指令ng-init

    描述:NG框架中规定使用本指令对边界内部的数据模型(NG变量)进行初始化操作

    ​ ng-init并没有规定具体的必须摆放位置,但习惯上放在body上

    ​ 会在页面加载后,自动对内部规定的数据模型进行初始化操作

    语法:<body ng-init="message = 'hello AngularJS'"></body>

控制器

  1. angular.module()方法

    描述:本方法是NG框架中提供,用来生成【页面数据模型】的方法

    语法:var 模型名称 = angulat.module('边界名称', [注入信息])

  2. 声明控制器指令ng-controller

    描述:本指令用来在页面中声明哪一个元素为控制器

    ​ 控制器:用来操作数据和试图的部件。

    语法:<html ng-controller="mainController"></html>

    注意:只要声明一个标签拥有控制器,这个控制器在脚本中就必须写出。

  3. 实现控制器方法*.controller()

    描述:本方法是NG框架在script脚本中提供,用来生成【页面控制器】的方法

    语法:页面数据模型名称.controller('控制器名称', ['scope,function(scope', function(scope){...}])

    例子:app.controller('mainController', ['$scope', function($scope){...}])

  4. 遍历指令ng-repeat

    描述:本指令用来遍历NG变量,并根据其构建页面html元素

    语法:<E ng-repeat = '任意变量名 in NG变量 track by $index'> {{任意变量名}}</E>

    说明:track by $index表示允许有重复内容存在

事件监听

​ NG框架中通过对元素标签添加【ng-事件名】指令,来对元素添加事件监听,而事件监听的回调函数需要在controller中,通过$scope来实现。

​ 语法:<E ng-事件名称 = '回调函数名(NG变量)'></E>

​ 声明:$scope.回调函数名 = function(参数) {...}

路由router

  1. 需配合ng-view指令使用

  2. 需要注入ngRoute

  3. 声明

    app.config('$routeProvider', function($routeProvider){
      $routeProvider
          .when('/home', {
              templateUrl: 'views/home.html',
              controller: homeController	// 控制器
          })
    })
    

服务

​ 在NG框架中,平级controller之间无法互相沟通,所以提出了服务这一概念,不同的controller可以通过注入服务的方式进行交互:app.controller('控制器名', ['$scope', '系统服务', function($scope, 系统服务){...}])

​ 存在多种不同的服务,有系统服务,也允许自定义服务

系统服务$http

​ NG框架内直接对app数据模型内置了一个用于处理网络功能的服务,就是$http

// get请求
$http({
    method: 'GET',
    url: ''
}).success(function(data) {
  
}).error(function(err) {
  
})
// post请求
$http({
    method: 'POST',
    url: '',
    headers: {
    "Content-Type": 'application/x-www-form-unlencoded'
  },
  data: ''
}).success(function(data) {
  
}).error(function(err) {
  
})

tips:对于请求回来的图片imgsrc和a标签的href,不能直接复制给src和href,应该写作ng-src和ng-href指令。

过滤服务$filter

​ 对数据进行转换显示的一种小工具,支持自定义内容

​ 语法: {{任意内容 | 过滤器}}

  1. 常用过滤器:
1. 将内容转换为货币格式,默认是美元格式
*** | currency: '货币符号'

2. 用于从一个数组选项中筛选出符合条件的子集数组
*** | filter: 子集数组

3. 对英文进行大小写转换
*** | uppercase/lowercase

4. 根据表达式的值对显示的内容进行排序,一般用于ng-repeat结构,并且repeat结构不是简单数据结构。
*** | orderBy: '表达式'
  1. 自定义过滤器
app.filter('自定义过滤器名称', function(){
    return function(text) {...}
})

时间轴服务

​ 需在使用之前注入,共有三种时间轴服务,分别为【间隔调用服务interval】【延迟调用服务interval】【延迟调用服务timeout】【清除时间轴内容服务】

var timer = null;
timer = $interval(function() {
    ...
    $interval.cancel(timer);	// 清除
}, 1000)

timer = $timeout(function() {
    ...
}, 1000)

监听服务

​ 监听NG变量的值,并在这个值发生变化的时候回调。

​ 语法:$scope.$watch('NG变量', function(){...}, true/false)

自定义服务

  1. value服务
  2. constant服务
  3. factory服务
  4. service服务
  5. provider服务

value自定义服务

​ 描述:value服务是通过.value()方法对app数据模型进行扩展的一种服务定制方式

​ 语法:app.value('自定义服务名称', 服务内容JSON)

Constant服务

​ 描述:与value服务作用相同,区别在于constant服务一旦被定制完成,那么在注入之前都是不能更改的,多次定制只有第一个生效。

​ 语法:app.constant('自定义服务名称', 服务内容JSON)

factory服务

​ 描述:通过.factory()方法去创建一个object结构并直接返回。

​ 语法:app.factory('自定义服务名称', function(){return {}})

service服务

​ 描述:相当于本身已经构建了一个空白对象,在服务内部所有内容的操作均通过this完成(类似对象)。

​ 语法:app.service('自定义服务名称', function(){this.name = 'zhangsan';})

provider服务

​ 描述:通过.provider()方法去创建,并在第二个参数的函数内通过this.$get = function(){...}的固定结构对服务内容进行扩充。无论是否注入,provider服务只要被创建,就会直接添加到app当中。

​ 语法:app.service('自定义服务名称', function(){this.$get = function(){return {}}}

自定义指令

​ 描述:通过app.directive()方法创建

​ 语法:

app.directive('自定义指令名称', function(){
    return {
        /* 
        指令通过何种方式进行唤醒:‘A’,’E‘,‘C’,‘M’四种方式,可单独使用,也可组合使用。
         ‘A’:attribute,通过属性的方式进行唤醒
         ‘E’:element,通过元素的方式进行唤醒
         ‘C’:class,通过类名的方式进行唤醒
         ‘M’:comment,通过注释的方式进行唤醒<!-- directive:自定义指令名称 -->
        注意:
         1. 指令名称必须采用小写,任何大写都会导致无效
         2. 指令名称如果是M类型,则replace自断是必填的,且必须设置为true才能生效
         3. 指令如果通过template加载,则有且只有唯一一个根结点
        */ 
        restrict: '指令类型',

        // 指令在页面中能够显示的html结构,如果需要从外部文件中加载指令的结构,则需要写成templateUrl
	template: '指令结构',

        /* 
        指令复写指的是指令当在页面中存在时,是否会被放做事一个字元素添加到当前所在的元素内。
        默认为false,直接替换当前元素。
        可设置为true,不覆盖当前元素,而是作为其字元素添加到页面中
        */
	replace: '指令复写'
	}
})