美文网首页
angularjs 难点总结

angularjs 难点总结

作者: 晨雪落客 | 来源:发表于2019-03-13 14:41 被阅读0次

1. $render用处就是:

  在$viewValue改变的时候可以重新绑定model数据,主要使用在自定义指令的时候,但是我们要注意一点在$viewValue改变的时候可以重新绑定model数据,

  但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样。

  ps:其实modelValue和绑定的数据也可以不同

2.ngModelController则是ng-model指令中所定义的controller,

  在ngModelController中有两个很重要的属性,一个叫做$viewValue,一个叫做$modeValue。

  $viewValue:指令渲染模板所用的值,$viewValue属性保存着更新视图所需的实际字符串

  $modeValue:指控制器中流通的值,modelValue由数据模型持有。$modelValue和$viewValue可能是不同的,取决于$parser流水线是否对其进行了操作。

  于此相关的另外两个指令:$parses和$formatters

  $parses的作用是:将$viewValue->$modelValue

  $formatters的作用是:将$modelValue->$viewValue

3.$apply的作用: $apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行,Scope提供$apply方法传播Model的变化。

              在apply()方法里面,它会去调用scope.digest()方法,apply()方法带一个函数或者一个表达式,然后执行它,

  最后调用scope.digest()方法去更新bindings或者watchers。

  $apply()方法可以在angular框架之外执行angular JS的表达式。

  在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法

  scope.digest(): 用于检查绑定的数据到底有没有发生变化。

4.watch方法用法:

语法:

$watch(watchFn,watchAction,deepWatch)

三个参数:

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用,是一个函数

deepWatch:可选的布尔值命令检查被监控的对象的每个属性是否发生变化

$watch会返回一个函数,想要注销这个watch可以使用函数,true/false

5.angularJS——自定义服务provider之$get

  可以认为provider有三个部分:

  第一部分是私有变量和私有函数,这些变量和函数会在以后被修改。

  第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改。注意,这些变量和函数一定要添加到this上面才行。

  第三部分是在控制器里可以访问的变量和函数,通过$get函数返回。

  当使用 provider创建服务的时候,唯一可以让控制器访问的属性和方法是在$get()函数里返回的属性和方法。

  使用Provider的优点就是,你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。

  当你使用Provider创建一个service时,唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

  大型数据进行访问的时候许多大型互联网站都是为全球用户提供服务的,

  用户分布范围广,各地网络情况千差万别。在国内,还有各个运营商网络互通难的问题。

  使用在具体的环境中,

6.angularjs中的run()方法使用

  run方法用于初始化全局的数据,仅对全局作用域起作用。

例子:

<script type="text/javascript">

  var m1 = angular.module('myApp',[]);

  m1.run(['$rootScope',function($rootScope){

  $rootScope.name = 'hello';

  }]);

  console.log( m1 );

</script>

7.config方法

  在模块加载阶段,对模块进行自定义配置

  config可以注入$stateProvider, $urlRouterProvider, $controllerProvider, $provide, $httpProvider等等provider,

  config的工作流程:

  新建一个模块,这个模块中有一个服务,一个自定义指令

8.$routeProvider

$routeProvider是一个用于配置路由的内置服务。

它主要有以下两个成员函数:

otherwise(params):设定映射信息到$route.current,一般用于指定没有标明的路由如何处理。

when(path, route):向$route服务添加新的路由。path是指定的URL路径,route标明路由的处理。

9.ng-view是由ngRoute模块提供的一个特殊指令,它的独特作用是在HTML中给$route对应的

  视图内容占位

  $routeProvider是组网址的配置,将它们映射相应的HTML页面或 ng-template,并附加一个控制器使用相同键的服务

  $routeProvider.when('/',{template:'这是首页页面'})

10.template 和 templateUrl

  template: '<div><h2>Route</h2></div>'

  AngularJS会将配置对象中的HTML模板渲染到对应的具有ng-view指令的DOM元素中。

  templateUrl: 'views/template_name.html'

  应用会根据templateUrl属性所指定的路径通过XHR读取视图(或者从$templateCache中读取)。

  如果能够找到并读取这个模板,AngularJS会将模板的内容渲染到具有ng-view指令的DOM元素中。

11.在组件中注入服务

  Angular在底层做了大量的初始化工作,这极大地降低了我们使用依赖注入的成本,

  现在要完成依赖注入,我们只需要三步:

  第一步:通过import导入被依赖的对象服务

  第二步:在组件中配置注入器。在启动组件时,Angular会读取@Component装饰器里的providers元数据,

        它是一个数组,配置了该组件需要使用的所有依赖,Angular的依赖注入框架会根据这个列表去创建对应的示例。

  第三步:在组件构造函数中声明需要注入的依赖。注入器会根据构造函数上的声明,

        在组件初始化时通过第二步中的providers元数据配置依赖,为构造函数提供对应的依赖服务,最终完成依赖注入。

  例如:

      // app.component.ts

    // 1. 导入被依赖对象的服务

import { MyService } from './my-service/my-service.service';

// 2. 在组件中配置注入器

@Component({

  providers: [MyService]

})

export class AppComponent {

  // 3. 在构造函数中声明需要注入的依赖

  constructor(private myService: MyService) {}

}

12.在服务中注入服务

  例如:

    // power.service.ts

import { Injectable } from '@angular/core';

@Injectable()

export class PowerService {

  // power come from here..

}

// count.service.ts

import { Injectable } from '@angular/core';

import { PowerService } from './power/power.service';

@Injectable()

export class CountService {

  constructor(private power: PoowerService) {}

}

// app.component.ts  这里是当前组件,其实模块中的注入也一样,后面讲到

providers: [

  CountService,

  PowerService

]

  这里需要注意的是@Injectable装饰器是非必须的,因为只有一个服务依赖其他服务的时候才必须需要使用@Injectable显式装饰,

  来表示这个服务需要依赖,所以我们的PowerService并不是必须加上@Injectable装饰器的,

  可是,Angular官方推荐是否依赖其他服务,都应该使用@Injectable来装饰服务。

13.在模块中注入服务

  在模块中注册服务和在组件中注册服务的方法是一样的,只是在模块中注入的服务在整个组件中都是可用的。

  例如:

    // app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({

 declarations: [

  AppComponent,

 ],

 imports: [

  BrowserModule

 ],

 providers: [CountService, PowerService],

 bootstrap: [AppComponent]

})

export class AppModule { }

  与在组件中注入不同的是,在Angular应用启动的时候,它好首先加载这个模块需要的所有依赖,

  此时会生成一个全局的根注入器,由该依赖创建的依赖注入对象会再整个应用中可见,并共享一个实例。

14.Provider

  Provider一个运行时的依赖,注入器依靠它来创建服务对象的实例。

相关文章

  • angularjs 难点总结

    1. $render用处就是: 在$viewValue改变的时候可以重新绑定model数据,主要使用在自定义指...

  • AngularJs总结

    angularJs在前端开发过程中是一件重器,它使得前端代码编辑简单,数据变化方便,尤其是可以让页面切换流畅。接下...

  • angularJS总结

    内置指令 自定义指令 控制器 作用域 内置过滤器 自定义过滤器 路由 ui.router 项目搭建 建议:继...

  • Angularjs 总结

    官方网站 angular是什么:为动态web应用设计的结构框架; 核心的功能: 1,双向数据绑定:实现了model...

  • AngularJS指令小结

    刚刚接触AngularJS,总结了一些关于AngularJS的基本指令。 1、 ng-bind-html 类似于h...

  • 看书总结之AngularJS权威教程

    title: 看书总结之AngularJS权威教程 第一章 初始AngularJS 1.浏览器是如何获取网页的 当...

  • AngularJS 指令总结

    22、ng-options 使用数组元素填充下拉列表 23、设置为只读 24、ng-selected 属性的表达式...

  • angularjs总结整理

    一、angular介绍 1、angular是Google公司提供的一套基于MVC结构的js开发工具,其核心功能就是...

  • AngularJs 问题总结

    一、ng-if/ng-show 最根本的区别是页面是否会生成此DOM元素 二、ng-repeat迭代数组的时候,如...

  • angularjs开发总结

    环境搭建 路由 Controller间数据共享 [ngIf / ngShow /ngHide区别](#ngIf /...

网友评论

      本文标题:angularjs 难点总结

      本文链接:https://www.haomeiwen.com/subject/foazpqtx.html