文档章节

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();
}

© 著作权归作者所有

共有 人打赏支持
那些薄凉的小时光91
粉丝 3
博文 23
码字总数 4753
作品 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学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
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

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
3
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
3
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
2
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
3
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部