angularjs 难点总结

JavaScript09

angularjs 难点总结,第1张

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 在实际应用中优点:

模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;

是一个比较完善的前端MV*框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;

自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,可以通过阅读源代码来找到某些我们需要的东西;

ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,即使UI变化很大,而且产品更新迭代,但是js的代码基本上却很少改动。

补充:Angular支持单元测试和e2e-testing。

AngularJS 在实际应用中缺点:

验证功能错误信息显示比较薄弱,需要写很多模板标签,没有jQuery Validate方便,所以我们自己封装了验证的错误信息提示;

ngView只能有一个,不能嵌套多个视图,虽然有 angular-ui/ui-router · GitHub 解决,但是貌似ui-router 对于URL的控制不是很灵活,必须是嵌套式的;

对于特别复杂的应用场景,貌似性能有点问题,特别是在Windows下使用chrome浏览器;

这没有完美兼容低版本,升级之后可能会导致一个兼容性的BUG;

ng提倡在控制器里面不要有操作DOM的代码,对于一些jQuery 插件的使用,如果想不破坏代码的整洁性,需要写一些directive去封装插件,但是现在有很多插件的版本已经支持Angular了;

Angular 太笨重了,没有让用户选择一个轻量级的版本,;

使用的人多才会暴露更多的问题,一起为这些问题寻找解决方案是一个社区的良性趋势,选择Angular,的确使开发效率大大提高。