angular之杂类

两种启动方式

1. 使用 ng-app 指令
2.使用angular.bootstrap() 方法来启动。

对于父子controller的访问关系

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
    </div>    
</div>

对于ChildController 的$scope 是可以访问ParentController的$scope的。

对于module提供的method

// 服务
provider(name,providerType)
factory(name,providerFunction)
service(name,constructor)

// 定义变量
value(name,object)
// 常量
constant(name,object)
// 动画
animation(name,animationFactory)
// 过滤器
filter(name,filterFactory)
// 控制器
controller(name,constructor)
// 指令
directive(name,directiveFactory)
// 配置信息
config(configFn)
// 运行的时候调用的初始化方法。
run(initialization)

对于$scope 和 $rootScope 和 $injector 的区别

$injector 是一个IOC容器,包含很多服务 类似spring 的bean

$scope 是javascript 中的作用域,搜索的时候,会优先查找自己的scope,如果没有查找到,会沿着作用域向上搜索,直到根作用域$rootScope

$rootScope是angular加载模块的时候自动创建的,每一个模块只有一个rootscope,rootscope创建好了之后以服务的形式加入到$injector中,rootscope是由angular核心模块ng创建的。

ng-controller 指令会给所在的DOM元素创建一个新的$scope 并为rootscope的子作用域

每个模块只有一个rootscope,但是可以有多个scope

使用angular.element().scope() 返回作用域上,距离该元素最近的scope

value和constant的区别

如果服务的$get方法是返回一个常量,那么就没有必要去定义一个包含复杂功能的完整服务

可以通过value函数去注册服务

而constant是可以被注入的。

通常情况下,使用value来注册服务或者函数,使用constant来配置数据。

父亲和儿子controller之间传递数据

可以在子controller中通过 $emit 来传递数据

父亲controller通过$on 来监听数据

对于父亲controller可以通过$broadcast广播事件

子controller中通过$on来监听数据

对于参数中的event

event.targetScope
event.currentScope
event.name
event.stopPropagation() 
event.preventDefault
event.defaultPrevented

service和provider和factory的区别

在angualr中 对于服务service 有
factory
service
provider

另外  angualr 也提供 很多其他内置服务service

$animate

$compile

$document

$timeout

$http

另外我们还可以创建自己的service

看下angualr源码中的实现

provider -> factory -> service

function provider(name,provider){
}

function factory(name,factoryFn){
    return provider(name:{$get:factoryFfn})
}

function service(name,constructor){
    return factory(name,[‘$injector‘,function($injector){
        return $injector.instantiate(constructor);
    }])
}

service 和factory 可以在controller中共享数据。

对于这三者的区别

  1. factory创建的是对象,为他添加属性,然后把这个对象返回出来。
  2. service是使用new 关键字实例化的,因此你应该为this添加属性,
  3. provider是唯一一个可以传递到config函数的service,传递的是,使用xxxProvider 才对。

对于service,是可以被依赖注入到controller中去的。

重点: service作为单例对象对象,在需要创建的时候被创建,只有在应用生命周期结束的时候,才会被清除掉

而controller会在不需要使用的时候被销毁掉。

可以见 hello world 版本的service

时间: 2024-10-01 13:05:48

angular之杂类的相关文章

C++ 基础 杂类

1.set:  基本上跟map是相同(只有一个键),set是key-value 放在一起,map 是分开的,既然都加key ,所以set<> 的内容不可能有重复的情况出现 example: set<int> si; si.insert(1); si.insert(2); si.insert(1); cout << " 1 出现的次数 :" << si.count(1);   ----> 1 出现的次数:1 2.批量修改为当前系统时间

angular 4--指令笔记

1. Angular 模块引导 Angular没有了类似AngularJS中的<body ng-app="my-app">这样的引导指令了 通过显示调用 bootstrap 函数,并传入应用模块的名字( AppComponent)来启动应用. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComp

Angular 2 应用的 8个主要构造块

前面的话:最近空余时间在学 Angular 2,国庆节的时候看了官网的quickstart,还写了一篇文章,只是一个hello world demo.后面继续看了它的一个项目教程,刚开始还可以跟上,当后面就比较混乱了.的确,对于新手来讲,要了解一个框架还是比较麻烦的.所以停止项目,开始看看 angular 的整体框架是如何的,联系项目,分析下,慢慢来. 学习链接:中文官网 正文开始: angular 应用:用带 angular 拓展语法的 HTML 写模板,用组件类管理这些模板,用服务添加应用逻

angular架构预览(模块,组件.数据绑定等)

概念来自Angular官网 Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言(例如 Dart 或者 TypeScript ),来构建客户端应用的框架. 写Angualr应用的步骤 a.用 Angular 扩展语法编写 HTML 模板              template b. 用组件类管理这些模板                                    component c.用服务添加应用逻辑          

angular模块详解

原文: https://www.jianshu.com/p/819421ff955a 大纲 1.angular应用是模块化的 2.对模块(Module)的认识 3.模块的分类:根模块和特性模块 4.NgModel参数详解 5.imports数组与文件头部的import的对比 angular应用是模块化的 1.Angular 应用是模块化的,并且Angular有自己的模块系统,它被称为Angular模块或NgModules. 2.每个Angular应用至少有一个模块(根模块),习惯上命名为AppM

转发: Angular装饰器

Angular中的装饰器是一个函数,它将元数据添加到类.类成员(属性.方法)和函数参数. 用法:要想应用装饰器,把它放在被装饰对象的上面或左边. Angular使用自己的一套装饰器来实现应用程序各部件之间的相互操作. 这个地方是前面几个模块(Modules), 指令(Diretives).组件(Components).依赖注入(Dependency Injection)等从装饰器这个侧面的整理. 你需要做的: 1.搞清楚理解TypeScript的装饰器原理. 2.搞清楚这里面每一个装饰器的作用,

四:Angular 元数据

元数据告诉 Angular 如何处理一个类. @Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ } @Component装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图. @

Angular 显示英雄列表

在本页面,你将扩展<英雄指南>应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息. 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示. 最终,你会从远端的数据服务器获取它.但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是从远程服务器上获取的. 在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 的文件. 定义一个包含十个英雄的常量数组 HEROES,并导出它. 该文件是这样的. src/app/mock

前端知识点总结——Angular

前端知识点总结--Angular 一.Angular概述 基于命令行的开发方式? ①hot reload ②编译工作 ③集成了webpack打包工具 .... angular.cn 中文angular.io 正式官网angular.cn/guide/styleguide 风格指南 1.what? angular是一个Google推出的js框架,是以模块为基本单位,模块又可以包含组件.指令.过滤器.. 1.1 版本问题 angular angular2.0以后所有的版本统称为angular (当前