大佬教程收集整理的这篇文章主要介绍了Angular基础认识，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Angular基础认识
全局安装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.component.html文件
<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'); } }
import { Injectable } from '@angular/core'; @Injectable() export class Loggerservice { constructor() { } debug(msg: String) { console.log(msg); } }
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>Angular 2 快速上手</title>
<base href="/">
<style>
html {font-family:'Microsoft Yahei';BACkground-color:#F7F48B;}
p {margin:8px 0;padding:0;}
h1 {font-size:20px;}
button,input {font-size:16px;}
.cmp-1 {BACkground:#A1DE93;border-radius:5px;width:500px;height:300px;margin:100px auto;padding:20px;}
.cmp-2 {Border:1px solid #ccc;border-radius:5px;BACkground-color:#70A1D7;padding: 10px;margin:20px 0;}
</style>
</head>
<body>
<my-app>加载中...</my-app>
<script src="bundle.js"></script>
</body>
</html>
import 'zone.js'; import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; // JiT启动模式 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModulE);@H_364_12@module.exports = { entry: './main.ts',output: { filename: './bundle.js' },resolve: { extensions: ['.ts','.js'] },module: { rules: [ { test: /\.ts$/,loader: 'ts-loader' } ] } };
@angular/core 核心模块
@angular/common 通用模块
@angular/forms 表单模块
@angular/http 网络模块
以上是大佬教程为你收集整理的Angular基础认识全部内容，希望文章能够帮你解决Angular基础认识所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。