空空叶博客 学习与开发博客

angular

2017-05-05

angular笔记

其它

  • 命名习惯: AngularJS内建服务,作用域方法,以及一些其他的AngularJS API都在名字前面使用一个‘$’前缀。不要使用‘$’前缀来命名你自己的服务和模型,否则可能会产生名字冲突。
  • AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的
  • 在Angular中,作用域是通过原型链进行继承的。而这种继承有一个问题,那就是在子类中对变量进行赋值时,不会去修改父级的。
  • Angularjs处于较高抽象级,适合CRUD应用(大部分的互联网应用),不适合游戏与界面操作应用. Angular simplifies application development by presenting a higher level of abstraction to the developer. Like any abstraction, it comes at a cost of flexibility Angular was built with the CRUD application in mind. Luckily CRUD applications represent the majority of web applications. Games and GUI editors are examples of applications with intensive and tricky DOM manipulation. These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for Angular.
  • 如果要直接操作DOM元素,应该用Directive In Angular, the only place where an application should access the DOM is within directives
  • controller的目的是提供变量与方法给表达式与Directive The purpose of controllers is to expose variables and functionality to expressions and directives.
  • 将方法从scope移到service,可以在其它地方调用. When the application grows it is a good practice to move view independent logic from the controller into a so called “service”, so it can be reused by other parts of the application as well.
  • 不要在controller里做这些事: Do not use controllers to:
    • Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.
    • Format input — Use angular form controls instead.
    • Filter output — Use angular filters instead.
    • Share code or state across controllers — Use angular services instead.
    • Manage the life-cycle of other components (for example, to create service instances).
  • 使用ng-model时,修改后的值是string类型的!!!(比如原来是number类型,或许就需要进行parseInt())

scope类型

Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not.

scope可以传播事件到子scope或父scope

Scopes can propagate events in similar fashion to DOM events. The event can be broadcasted to the scope children or emitted to scope parents. … ng-click=”$emit(‘MyEvent’)” … ng-click=”$broadcast(‘MyEvent’)” …

scope不需要时进行销毁

When child scopes are no longer needed, it is the responsibility of the child scope creator to destroy them via scope.$destroy() API.

angularjs编译html的3个阶段

HTML compilation happens in three phases:

  1. $compile traverses the DOM and matches directives.
  2. Once all directives matching a DOM element have been identified, the compiler sorts the directives by their priority.
  3. $compile links the template with the scope by calling the combined linking function from the previous step. This in turn will call the linking function of the individual directives, registering listeners on the elements and setting up $watchs with the scope as each directive is configured to do.

模仿内部编译过程

所有services都是单例的

Note: All services in Angular are singletons. That means that the injector uses each recipe at most once to create the object. The injector then caches the reference for all future needs.

几种recipe比较

| | | | |

  • Features / Recipe type Factory Service Value Constant Provider
    can have dependencies yes yes no no yes
    uses type friendly injection no yes yes* yes* no
    object available in config phase no no no yes yes**
    can create functions yes yes yes yes yes
    can create primitives yes no yes yes yes

* at the cost of eager initialization by using new operator directly ** the service object is not available during the config phase, but the provider instance is (see the unicornLauncherProvider example above).

html默认规则会自动删除boolean值

The HTML specification does not require browsers to preserve the values of boolean attributes such as checked. (Their presence means true and their absence means false.)

ngIf会增加/删除元素

ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property.

angular默认提供的转换

Angular provides the following default transformations:

Request transformations ($httpProvider.defaults.transformRequest and $http.defaults.transformRequest):

If the data property of the request configuration object contains an object, serialize it into JSON format. Response transformations ($httpProvider.defaults.transformResponse and $http.defaults.transformResponse):

If XSRF prefix is detected, strip it (see Security Considerations section below). If JSON response is detected, deserialize it using a JSON parser.


下一篇 cc攻击

目录