文档章节

angular2笔记

那些薄凉的小时光91
 那些薄凉的小时光91
发布于 2017/09/04 11:13
字数 876
阅读 5
收藏 1

1.使用[(ngModel)]="name",必须选择使用FormsModule模块

虽然NgModel是一个有效的Angular指令,但它默认情况下却是不可用的。 它属于一个可选模块FormsModule。 我们必须选择使用那个模块。

在app.module.ts文件中

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

2.ngFor

<li *ngFor="let hero of heroes">

ngFor*前缀表示<li>及其子元素组成了一个主控模板。

ngFor指令在AppComponent.heroes属性返回的heroes数组上迭代,并输出此模板的实例。

引号中赋值给ngFor的那段文本表示“heroes数组中取出每个英雄,存入一个局部的hero变量,并让它在相应的模板实例中可用”。

3.事件

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> ... </li>

圆括号标识<li>元素上的click事件是绑定的目标。 等号右边的onSelect(hero)表达式调用AppComponentonSelect()方法,并把模板输入变量hero作为参数传进去。

4.*ngIf="selectedHero"

5.<li [class.selected]="hero === selectedHero" > </li>

6.命名

文件名:hero-detail.component.ts(大驼峰形式,并且以Component结尾)

组件类名:HeroDetailComponent(小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾)

7.组件

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

@Component({
  selector: 'hero-detail',
})
export class HeroDetailComponent {
}

要定义一个组件,我们总是要先导入符号Component

@Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名,用于在父组件的模板中标记出当前组件的位置。

总是export这个组件类,因为你必然会在别处import它。

父组件与子组件之间的通信(父组件是列表页,子组件是详情页)

父组件的模板中:<hero-detail [hero]="selectedHero"></hero-detail>

子组件:import { Component, Input } from '@angular/core';

            export class HeroDetailComponent { @Input() hero: Hero; }

            然后在子组件的模板中就能用hero.xxx了

它所做的一切就是通过它的输入属性hero接收一个英雄对象,然后把这个属性绑定到自己的模板中。

具体参照父子组件之间通信http://blog.csdn.net/u010730126/article/details/68080139

8.定义的组件要在AppModule中声明

import { HeroDetailComponent } from './hero-detail.component';

HeroDetailComponent添加到该模块的declarations数组中。

declarations: [
  AppComponent,
  HeroDetailComponent
],

9.创建服务

命名:文件名:special-super-hero.service.ts 服务名:SpecialSuperHeroService

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

@Injectable()
export class HeroService {
}

我们导入了 Angular 的Injectable函数,并作为@Injectable()装饰器使用这个函数。

当 TypeScript 看到@Injectable()装饰器时,就会记下本服务的元数据。 如果 Angular 需要往这个服务中注入其它依赖,就会使用这些元数据。

导入HeroService

import { HeroService } from './hero.service';

在运行中获得一个具体的HeroService实例

注入 HeroService

  • 添加一个构造函数,并定义一个私有属性。

  • 添加组件的providers元数据。

 

constructor(private heroService: HeroService) { }

我们还得注册一个HeroService提供商,来告诉注入器如何创建HeroService。 要做到这一点,我们在@Component组件的元数据底部添加providers数组属性如下:

10.如何创建服务并使用

一.新建一个服务my-comp.service.ts及使用方法

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

@Injectable()

   export classMyCompService{

     constructor() {}

     hello(){

       console.log(3456)

       alert(3456)

    }

  }

二,创建服务

app.module.ts,引入服务,在declarations中声名服务,并在provides中注册服务

三,在组件函数中调用服务

注册

import{MyCompService}from'./my-comp.service';

使用

constructor(private serves: MyCompService){
serves.hello();
}

© 著作权归作者所有

共有 人打赏支持
上一篇: scss
下一篇: 构造函数
那些薄凉的小时光91
粉丝 3
博文 23
码字总数 4753
作品 0
昌平
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
读书笔记“使用AngularJs开发下一代web应用”

国内一个挺好的读书笔记 http://www.sunzhongwei.com/angularjs.html 源码下载地址https://github.com/shyamseshadri/angularjs-book Angular SEO http://www.yearofmoo.com/2012/11/angula......

lilugirl
2014/01/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo分析之Cluster层

系列文章 Dubbo分析Serialize层 Dubbo分析之Transport层 Dubbo分析之Exchange 层 Dubbo分析之Protocol层 前言 紧接上文Dubbo分析之Protocol层,本文继续分析dubbo的cluster层,此层封装多个提...

ksfzhaohui
16分钟前
0
0
linux Ubuntu 安装 hyperledger fabric

一、apt-get update 二、安装docker sudo apt-get install docker.io 如果安装报错:E: Unable to locate package,请执行第一条。 # docker -v Docker version 1.6.2, build 7c8fca2 # dock......

八戒八戒八戒
20分钟前
1
0
神经网络基础及Keras入门

神经网络定义 人工神经网络,简称神经网络,在机器学习和认知科学领域,是一种模仿生物神经网络(动物的中枢神经系统,特别是大脑)的结构和功能的数学模型或计算模型,用于对函数进行估计或...

Python女神
20分钟前
1
0
Pycharm上Django的使用 Day9

编辑条目: 1.创建edit_entry的URL模式 形参entry_id存储在URL中传递的ID,这个URL模式将预期匹配的请求发送给视图函数edit_entry() 2.编写视图函数edit_entry() 1处获取用户要修改的条目对象...

不会TC的猫
20分钟前
1
0
夹点getGripPoints/捕捉点getOsnapPoints

已知圆外一点,以及圆心半径,求圆的切点: 方法1: (b-y/a-x)*(n-y/m-x)=-1(a-x)平方+(b-y)平方=r平方联立方程组求解 方法1: CPoint CalcQieDian(CPoint ptCenter, CPoint ptOutside, do...

一个小妞
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部