脚本宝典收集整理的这篇文章主要介绍了Angular基础认识，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Angular基础认识
搭建环境
如果要是安装比较慢的话，那就用淘宝镜像，也就是cnpm；
全局安装Angular
cnpm install -g @Angular/cli 创建项目目录
ng new angular2-demo-master --skip-install进入项目目录
cd angular2-demo-master起服务
ng serve安装webpack
cnpm install webpack --save运行程序
npm start编写程序
在项目目录下新建一个名为app的文件夹，所有的程序都在这个文件里编写；
<div class="cmp-1">
<h1>根组件</h1>
<p>
嘿嘿，{{ greeting }}！
<label>
<input type="checkbox" [(ngModel)]="isShowMore">
是否显示详细信息
</label>
</p>
<p highlight *ngIf="isShowMore">Angular 2 是 Google 推出的新一代的Web开发框架</p>
<my-child [message]="msgToChild" (outer)="receive($event)"></my-child>
<p>从子组件获得的消息：{{ msgFromChild || '暂无' }}</p>
</div>新建app.COMponent.ts文件
import { Component } from '@angular/core';
import { LOGgerService } from './logger.service';
@Component({
selector: 'my-app',
templateUrl: './app/app.component.html'
})
export class AppComponent {
PRivate greeting: string;
private isShowMore: boolean;
private msgToChild: string;
private msgFromChild: string;
constructor(private logger: LoggerService) { }
ngOnInit() {
this.greeting = 'Angular 2';
this.msgToChild = 'message from parent';
this.logger.debug('应用已初始化');
}
receive(msg: string) {
this.msgFromChild = msg;
}
}
新建app.module.ts文件
import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';
import { HighlightDirective } from './highlight.directive';
import { LoggerService } from './logger.service';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, ChildComponent, HighlightDirective ],
providers: [ LoggerService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
新建child.component.html文件
<div class="cmp-2">
<h1>子组件</h1>
<p>嘿嘿，我从父组件获取的值是：{{ message }}</p>
<button (click)="sendToParent()">发送到父组件</button>
</div>
新建child.component.ts文件
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-child',
templateUrl: './app/child.component.html'
})
export class ChildComponent {
@Input() private message: string;
@Output() private outer = new EventEmitter<string>();
constructor() { }
sendToParent() {
this.outer.emit('message from child');
}
}
新建highlight.directive.ts文件
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: "[highlight]"
})
export class HighlightDirective {
constructor(
private el: ElementRef,
private renderer: Renderer
) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
新建logger.service.ts文件
import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
constructor() { }
debug(msg: string) {
console.log(msg);
}
}注意：以上文件都是在app文件夹下创建的；
修改文件
index.html文件