zoukankan      html  css  js  c++  java
  • AngularJS:知识点整理

    1. ng内置的过滤器

    主要有9种:
    1)date(日期)
    2)currency(货币)
    3)limitTo(限制数组或字符串长度)
    4)orderBy(顺序)
    5)lowercase(小写)
    6)uppercase(大写)
    7)number(格式化数字)
    8)filter(处理一个数组,过滤出含有某个子串的元素)
    9)json(格式化json对象)

    过滤器有两种使用方法:
    一种是直接在页面里:
    <p>{{modelValue | date : 'yyyy-MM-dd'}}</p>
    另一种是在js里用:
    $filter('date')(modelValue, yyyy-MM-dd)

    2. Angular应用常用哪些路由库,各自的区别是什么?

    Angular1.x中常用ngRoute和ui.router

    1. ngRoute
      ngRoute模块是Angular自带的路由模块
    var app = angular.module('ngRouteApp', ['ngRoute']);
    app.config(function($routeProvider) {
      $routeProvider
      .when('/main',  {
        templateUrl: "main.html",
        controller: 'MainCtrl'
      })
      .otherwise({redirectTo: '/tabs'});
    })
    

    $routeProvider是一个用于配置路由的内置服务。
    一般直接使用$routeProvider.XXX来调用它的成员方法实现一定功能,其成员方法主要有:
    otherwise(params):设定映射信息到 $route.current;
    when(path, route):向 $route服务添加新的路由。
    参考链接:https://www.angularjs.net.cn/api/80.html

    1. ui.router
      ui.router模块是基于ngRoute模块开发的第三方路由模块。
      其是基于state的,ngRoute是基于url的,ui.router具有更强大的功能,主要体现在视图的嵌套方面。
      其可以定义有明确父子关系的路由,并通过ui-view指令将子路由模板插入父路由模板的
      中,从而实现视图嵌套。
      而在ngRoute中不能这样定义,如果在父子视图中使用
      ,会陷入死循环。
    var app = angular.module("uiRouteApp", ["ui.router"]);
    app.config(function($urlRouterProvider, $stateProvider){
      $urlRouterProvider.otherwise("/index");
      $stateProvider
        .state("Main", {
          url: "/main",
          templateUrl: "main.html",
          controller: 'MainCtrl'
        })
    

    3. Angular数据绑定采用什么机制?详述原理

    采用了脏检查机制
    双向数据绑定是AngularJS的核心机制之一。当view中有任何一个数据变化时,都会更新到model中。当model中的数据变化时,也会更新到view中。显然,这里需要一个监控。
    原理:
    Angular在scope模型上设置了一个监听队列,这个监听队列可以用来监听数据变化并更新view。
    每次绑定一个东西到view上时,AngularJS就会往 $watch队列里插入一条 $watch,用来检测它监视的model里是否有变化的东西。当浏览器接收到可以被angular context处理的时间时,$digest循环就会触发,遍历所有的 $watch ,最后更新DOM。
    2

    4. Controller

    Controller是Angular一个重要的组件。是MVC中的C,逻辑控制。在Anuglar里,controller是一个JavaScript的构造函数,这个函数有两个作用:初始化scope和增加方法(add behavior)。

    5. Service

    Service可以理解为MVC结构中的M层,来处理具体的业务逻辑。在Angular里,Service有两个特点:
    1)懒加载:只有在需要用的时候(也就是在其他service,filter,directive,controller里依赖注入时才会生成这个service实例)
    2)单例模式:Service在Angular里是单例,只有第一次被注入的时候创建实例,然后存在catch里,等需要的时候(也就是另外的依赖注入时),从catch里取出。所以service的生命周期只要创建之后,除非app退出,否则一直都是这个实例。

    6. 注册Service

    官方主要介绍了两种方式:factory模式和provider模式,其实还有一种service模式。
    1)factory
    比较常用的一种方式。注册一个function,这个function在生成实例的时候会被调用到,这个函数返回一个service实例(要自己写return)。
    所以只要把自己需要的service写成一个obj,在这个obj里定义所需要的方法和值,然后return一下这个obj就可以了。

    angular.module('myApp.services')
    .factory('User', function($http) {
      var backendUrl = "http://localhost:3000";
      var service = {
        user:{},
        setName: function(newName) {
          service.user['name'] = newName;
        },
        setEmail: function(newEmail) {
          service.user['email'] = newEmail;
        },
        save: function() {
          return $http.post(backendUrl + '/users', {
            user:service.user
        });
        }
      };
      return service;
    });
    

    2)service
    service注册更简单,相当于对factory做了一层封装。只要在service里写需要的方法和值就行了,不需要return。

    angular.module('myApp.services').service('User', function ($http, $q) {
      var self = this;
      this.user:{},
      this.backendUrl = "http://localhost:3000";;
      this.setName: function(newName) {
        service.user['name'] = newName;
      },
      this.setEmail: function(newEmail) {
        service.user['email'] = newEmail;
      },
      this.save: function() {
        return $http.post(backendUrl + '/users', {
            user:service.user
      });
    }
    

    3)provider
    provider是angular里注册service最底层的方式,无论是service注册还是factory注册,底层都是用的provider方式。

    记:借用参考[2]中观点(自己未有全面了解,暂用参考[2]博主的观点做一个区分整理)service更倾向于一种服务,factory倾向于一个工具,provider是需要对这个service做一些配置。

    7. scope

    scope是连接controller和view的桥梁。
    scope主要提供三个对外的API
    1)watch:监听model是否发生了变化
    2)apply:在Angular context外发布model变化的消息(ng开头的命令和Angular自带的service会自动调用apply,Angular环境外的更新需要自己调用apply) -- 这个在项目中有用到过
    3)digest(官方API未列出):调用apply就会调用digest,digest会轮询watch列表。如果发生了变化会调用watch注册的function来进行一些处理。

    参考链接:
    [1]https://m.w3cschool.cn/angularjs/angularjs-8c2q2ord.html (一些AngularJS的面试题)
    [2]https://www.cnblogs.com/airen123/p/9479399.html (Angular原理及模块简介 --个人觉得写得很清楚,值得详细阅读、理解)

    步履不停
  • 相关阅读:
    多测师讲解html _伪类选择器17_高级讲师肖sir
    多测师讲解html _后代选择器16_高级讲师肖sir
    多测师讲解html _组合选择器_高级讲师肖sir
    多测师讲解html _标签选择器14_高级讲师肖sir
    前端 HTML form表单标签 input标签 type属性 重置按钮 reset
    前端 HTML form表单标签 textarea标签 多行文本
    前端 HTML form表单标签 input标签 type属性 file 上传文件
    前端 HTML form表单标签 input标签 type属性 radio 单选框
    前端 HTML form表单标签 input标签 type属性 checkbox 多选框
    前端 HTML form表单目录
  • 原文地址:https://www.cnblogs.com/yuanyunjing/p/15331944.html
Copyright © 2011-2022 走看看