Angular入門
23736 ワード
オープンソースWebフロントエンドフレームワークは、Googleに買収されました.
Angular 1.XとAngular 2.Xシリーズは違います.同時保守
機能:
特徴:
Angularインストール、プロジェクトの作成、ディレクトリ構造、コンポーネント、サービス
1.最新版Node.jsをインストールする.インストールに成功したら、コマンドプロンプトにチェックを入力します.
C:\Users\reid>node -v
v8.11.1
C:\Users\reid>npm -v
5.6.0
2.グローバルインストールAngular CLI
npm install -g @angular/cli
-- angular
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @angular/cli
3.プロジェクトの作成
* * [Angular ](#angular )
* [Angular 、 、 、 、 ](#angular - - - - )
* [ 、 、 、 、 、 、 、 ](# - - - - - - - )
* * [1\. ](#1- )
* [2\. ](#2- )
* [3\. *ngFor](#3- -ngfor)
* [4\. ](#4- )
* [5\. ](#5- )
* [6\. ](#6- )
* [7\. ](#7- )
* [8\. ](#8- )
* [get post jsonp ](#get-post-jsonp )
* * [app.module.ts HTPP JSONP ](#appmodulets htpp-jsonp )
* [ ](# )
* * * [ ](# )
* [app.moduel.ts ](#appmoduelts )
* [ 、 ](# - )
* [ ](# )
* [ @Input @Output @ViewChild](# -input-output-viewchild)
* [ ](# )
## Angular
Web ， Google 。
Angular 1.X Angular 2.X 。
：
- APP
- Ionic、React Native APP
- ， ， Mac、Windows Linux
：
-
-
-
:Visual Studio Code
## Angular 、 、 、 、
1. Node.js； ， ：
C:\Users\reid>node -v v8.11.1
C:\Users\reid>npm -v 5.6.0
2. Angular CLI
npm install-g@angular/cli--国内angularミラーインストールnpm install-g cnpm--registry=https://registry.npm.taobao.org cnpm install -g @angular/cli
3.
ng new my-app//プロジェクトcd my-app cnpm install//インストール依存ng serve--open//サービス開始
4.
1. e2e
2. node_modules Node.js ， package.json 。
3. src SRC
4. .editorconfig ，
5. .gitignore Git ， Git
6. angular.json
7. my-app.code-workspace
8. package-lock.json
9. package.json npm ， 。 。
10. README.md
11. tsconfig.json TypeScript
12. tslint.json TSLint Codelyzer ， `ng lint` 。Lint
1. SRC
1. app/app.component.{ts,html,css,spec.ts} HTML 、 CSS AppComponent 。 ， 。
2. app/app.module.ts AppModule， Angular 。 ， AppComponent。 。
3. assets/* ， ， 。
4. environments/* ， 。 。 API ， Token 。 。 ， CLI 。
5. favicon.ico 。 。index.html HTML 。 。 ， CLI js css ， <link> 。
6. main.ts 。 JIT compiler ， AppModule， 。 AOT compiler ， —— ng build ngserve --aot 。
7. polyfills.ts Web 。 （polyfill） 。 core-js zone.js ， 。
8. styles.css 。 ， ， ， 。
9. test.ts 。 ， 。
10. tsconfig.{app|spec}.json TypeScript 。
11. tsconfig.app.json Angular ， tsconfig.spec.json 。
13. AppModule
</code></pre>
<pre><code>app.module.ts
import { AppComponent } from './app.component'; /* */
/*@NgModule AppModule Angular （ NgModule ）。
@NgModule ， Angular 。 */
@NgModule({
declarations: [ /* */
AppComponent
],
imports: [ /* */
BrowserModule,
FormsModule,
HttpModule
],
providers: [], /* */
bootstrap: [AppComponent] /* （ ） AppModule
， */
})
/* ， 。 */
export class AppModule { }
</code></pre>
<pre><code>
## 、 、 、 、 、 、 、
#### 1.
Scaffold | Usage
---|---
componnet | `ng g component my-new-component ： ng g component components/Footer`
Directive | `ng g directive my-new-directive`
Pipe |`ng g pipe my-new-pipe`
Service|`ng g service my-new-service`
Class|`ng g class my-new-class`
Guard|`ng g guard my-new-guard`
Interface|`ng g interface my-new-interface`
Enum|`ng g enum my-new-enum`
Mudule|`ng g module my-module`
#### 2.
</code></pre>
<p>{{title}}<br> this.h="<h2> h2 [innerHTML] </h2><br> <div [innerHTML]="h"></div></p>
<pre><code>#### 3. *ngFor
</code></pre>
<p><ul><br> <li *ngFor="let item of list"><br> {{item}}<br> </li><br> </ul><br> <br> <ul><br> <li *ngFor="let item of list;let i = index;"><br> {{item}} --{{i}}<br> </li><br> </ul></p>
<p><ul><br> <li template="ngFor let item of list"><br> {{item}}<br> </li><br> </ul></p>
<pre><code>#### 4.
</code></pre>
<p><p *ngIf="list.length > 3"> ngIF </p><br> <p template="ngIf list.length > 3"> ngIF </p></p>
<pre><code>#### 5.
</code></pre>
<p><button class="button" (click)="getData()"><br> <br> </button><br> <button class="button" (click)="setData()"><br> <br> </button></p>
<hr>
<p>getData(){ /<em> </em>/<br> // <br> alert(this.msg);<br> }<br> setData(){<br> // this.msg=' ';<br> }</p>
<pre><code>#### 6.
</code></pre>
<p> id title<br> <div [id]="id" [title]="msg"> </div></p>
<pre><code>#### 7.
</code></pre>
<p><input type="text" (keyup)="keyUpFn($event)"/><br> keyUpFn(e){<br> console.log(e)<br> }</p>
<pre><code>#### 8.
</code></pre>
<p> :FormsModule<br> </p>
<p><input [(ngModel)]="inputValue"></p>
<p>import { FormsModule } from '@angular/forms';</p>
<p>@NgModule({<br> declarations: [<br> AppComponent,<br> HeaderComponent,<br> FooterComponent<br> ],<br> imports: [<br> BrowserModule,<br> FormsModule<br> ],<br> providers: [],<br> bootstrap: [AppComponent]<br> })<br> export class AppModule { }</p>
<p><input type="text" [(ngModel)]="inputValue"/> -- </p>
<p>{{inputValue}} -- </p>
<pre><code>## get post jsonp
#### app.module.ts HTPP JSONP
1. HttpModule、JsonpModule
import { HttpModule, JsonpModule } from '@angular/http'
2. HttpModule 、 JsonpModule
@NgModule({
declarations: [
AppComponent,
HomeComponent,
NewsComponent,
NewscontentComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
AppRoutingModule
],
providers: [StorageService,NewsService],
bootstrap: [AppComponent]
})
export class AppModule { }
3. Http、Jsonp GET
--
import {Http,Jsonp} from "@angular/http";
--
constructor(private http:Http,private jsonp:Jsonp) { }
-- HTTP GET
this.http.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2").subscribe(
function(data){
console.log(data);
},function(err){
console.log(' ');
}
);
-- JSONP GET &callback=JSONP_CALLBACK
this.jsonp.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2&callback=JSONP_CALLBACK").subscribe(
function(data){
console.log(data);
},function(err){
console.log(' ');
}
);
4. Http、Jsonp POST
-- Http、Headers
import {Http,Jsonp,Headers} from "@angular/http";
-- Headers
private headers = new Headers({'Content-Type': 'application/json'});
--
this.http.post('http://localhost:8008/api/test',
JSON.stringify({username: 'admin'}),
{headers:this.headers})
// .toPromise()
.subscribe(function(res){
console.log(res.json());
});
5. RxJS
-- Http 、 Jsonp、 RxJs
import {Http,Jsonp} from "@angular/http";
import {Observable} from "rxjs";
import "rxjs/Rx";
--
constructor(private http:Http,private jsonp:Jsonp) { }
--get
this.http.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2").map(res => res.json())
.subscribe(
function(data){
console.log(data);
}
);
--Jsonp &callback=JSONP_CALLBACK
this.jsonp.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2&callback=JSONP_CALLBACK")
.map(res => res.json()).subscribe(
function(data){
console.log(data);
}
);
http.get Observable ， RxJS map 。
##
#####
</code></pre>
<p>ng g service my-new-service<br> <br> ng g service services/storage</p>
<pre><code>##### app.moduel.ts
</code></pre>
<p>--app.module.ts<br> import { StorageService } from './services/storage.service';<br> -- NgModule providers <br> @NgModule({<br> declarations: [<br> AppComponent,<br> HeaderComponent,<br> FooterComponent,<br> NewsComponent,<br> TodolistComponent<br> ],<br> imports: [<br> BrowserModule,<br> FormsModule<br> ],<br> providers: [StorageService],<br> bootstrap: [AppComponent]<br> })<br> export class AppModule { }</p>
<pre><code>##### 、
</code></pre>
<p>import { StorageService } from '../../services/storage.service';</p>
<p>constructor(private storage: StorageService) {<br> }</p>
<pre><code>#####
</code></pre>
<p>addData(){<br> // alert(this.username);<br> this.list.push(this.username);<br> this.storage.set('todolist',this.list);<br> }<br> removerData(key){<br> console.log(key);<br> this.list.splice(key,1);<br> this.storage.set('todolist',this.list);<br> }</p>
<pre><code>## @Input @Output @ViewChild
1.
</code></pre>
<p> <br> <app-header [msg]="msg"></app-header></p>
<ol start="2">
<li> Input <br> import { Component, OnInit ,Input } from '@angular/core';</li>
<li> @Input export class HeaderComponent implements OnInit {<br> @Input() msg:string<br> constructor() { }<br> ngOnInit() {<br> }<br> }</li>
<li> <br> <h2> --{{msg}}</h2></li>
</ol>
<pre><code>2.
</code></pre>
<p> ， 。</p>
<ol>
<li> <br> run(){<br> alert(' run ');<br> }<br> 2． <br> <app-header [msg]="msg" [run]="run"></app-header>3. -- <br> -- <br> import { Component, OnInit ,Input } from '@angular/core';<br> -- <br> @Input() run:any;<br> -- <br> export class HeaderComponent implements OnInit {<br> @Input() msg:string<br> @Input() run:any;<br> constructor() { }<br> }</li>
<li> 。<br> export class HeaderComponent implements OnInit {<br> @Input() msg:string;<br> @Input() run:any;<br> constructor() { }<br> ngOnInit() {<br> this.run(); /<em> run </em>/<br> }<br> }</li>
</ol>
<pre><code>3. @Output
</code></pre>
<p>EventEmitter: emit: </p>
<ol>
<li> Output EventEmitter<br> import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';</li>
</ol>
<p>2. EventEmitter<br> @Output() private outer=new EventEmitter<string>();<br> /<em> EventEmitter output <string> </em>/</p>
<ol start="3">
<li> EventEmitter outer <br> sendParent(){<br> // alert('zhixing');<br> this.outer.emit('msg from child')<br> }</li>
</ol>
<p>4. ， , outer EventEmitter outer<br> <app-header (outer)="runParent($event)"></app-header><br> outer runParent ， outer.emit runParent<br> 5. runParent ， // <br> runParent(msg:string){<br> alert(msg);<br> }</p>
<pre><code>4. ， （ ）
</code></pre>
<ol>
<li> footer <br> export class FooterComponent implements OnInit {<br> public msg:string;<br> constructor() {<br> }<br> ngOnInit() {<br> }<br> footerRun(){<br> alert(' footer Run ');<br> }<br> }</li>
<li> <br> <app-footer #footer></app-footer>3. <br> <button (click)='footer.footerRun()'> </button></li>
</ol>
<pre><code>5. ViewChild
</code></pre>
<p>1. <br> <app-footer #footerChild></app-footer></p>
<ol start="2">
<li> ViewChild<br> import { Component, OnInit ,ViewChild} from '@angular/core';</li>
<li>ViewChild 。 <br> @ViewChild('footerChild') footer;<br> 4. <br> run(){<br> this.footer.footerRun();<br> }</li>
</ol>
<pre><code>##
1.
</code></pre>
<p>1. <br> ng new demo02 –-routing</p>
<ol start="2">
<li> <br> ng g component home<br> ng g component news<br> ng g component newscontent</li>
<li> app-routing.module.ts <br> <br> import { HomeComponent } from './home/home.component';<br> import { NewsComponent } from './news/news.component';<br> import { NewscontentComponent } from './newscontent/newscontent.component';<br> <br> const routes: Routes = [<br> {path: 'home', component: HomeComponent},<br> {path: 'news', component: NewsComponent},<br> {path: 'newscontent/:id', component: NewscontentComponent},<br> {<br> path: '',<br> redirectTo: '/home',pathMatch: 'full'<br> }<br> ];</li>
<li> app.component.html ， router-outlet <br> <h1><br> <a routerLink="/home"> </a><br> <a routerLink="/news"> </a><br> </h1><br> <router-outlet></router-outlet></li>
</ol>
<pre><code>2.
</code></pre>
<ol>
<li><p> <br> ng g component home<br> ng g component news<br> ng g component newscontent</p></li>
<li><p> app-routing.module.ts ,app-routing.module.ts <br> import { NgModule } from '@angular/core';<br> import { Routes, RouterModule } from '@angular/router';</p></li>
<li><p>app-routing.module.ts <br> import { HomeComponent } from './home/home.component';<br> import { NewsComponent } from './news/news.component';<br> import { NewscontentComponent } from './newscontent/newscontent.component';</p></li>
<li><p>app-routing.module.ts <br> const routes: Routes = [<br> {path: 'home', component: HomeComponent},<br> {path: 'news', component: NewsComponent},<br> {path: 'newscontent/:id', component: NewscontentComponent},<br> {<br> path: '',<br> redirectTo: '/home',<br> pathMatch: 'full'<br> }<br> ];</p></li>
<li><p>app-routing.module.ts <br> @NgModule({<br> imports: [RouterModule.forRoot(routes)],<br> exports: [RouterModule]<br> })<br> export class AppRoutingModule { }</p></li>
<li><p> app.module.ts <br> import { AppRoutingModule } from './app-routing.module';</p></li>
</ol>
<p>7.app.module.ts import <br> imports: [<br> BrowserModule,<br> AppRoutingModule<br> ]<br> 8. app.component.html ， router-outlet <h1><br> <a routerLink="/home"> </a><br> <a routerLink="/news"> </a><br> </h1><br> <router-outlet></router-outlet></p>
<pre><code>3. Angular routerLink
</code></pre>
<p><a routerLink="/home"> </a><br> <a routerLink="/news"> </a><br> // <br> {<br> path:'',<br> redirectTo:'home',<br> pathMatch:"full"<br> }<br> // <br> {<br> path: '<em><em>', /</em> </em>/<br> // component:HomeComponent<br> redirectTo:'home'<br> }</p>
<pre><code>4. Angular routerLinkActive routerLink
</code></pre>
<p><h1><br> <a routerLink="/home" routerLinkActive="active"> </a><br> <a routerLink="/news" routerLinkActive="active"> </a><br> </h1><br> -- css <br> .active{<br> color:red;<br> }</p>
<pre><code>5. .
</code></pre>
<p>1. <br> const routes: Routes = [<br> {path: 'home', component: HomeComponent},<br> {path: 'news', component: NewsComponent},<br> {path: 'newscontent/:id', component: NewscontentComponent},<br> {<br> path: '',<br> redirectTo: '/home',<br> pathMatch: 'full'<br> }<br> ];<br> 2. <br> import { Router, ActivatedRoute, Params } from '@angular/router';<br> constructor( private route: ActivatedRoute) {}<br> ngOnInit() {<br> console.log(this.route.params);//<br> this.route.params.subscribe(data=>this.id=data.id);<br> }</p>
<pre><code>6. js .
</code></pre>
<ol>
<li> <br> import { Router } from '@angular/router';<br> 2. <br> export class HomeComponent implements OnInit {<br> constructor(private router: Router) {<br> }<br> ngOnInit() {<br> }<br> goNews(){<br> // this.router.navigate(['/news', hero.id]);<br> this.router.navigate(['/news']);<br> }<br> }<br> 3. <br> this.router.navigate(['/news', hero.id]);</li>
</ol>
<pre><code>7. js get
</code></pre>
<ol>
<li> NavigationExtras<br> import { Router ,NavigationExtras,ActivatedRoute } from '@angular/router';<br> 2. goNewsContent ， NavigationExtras 。<br> goNewsContent {<br> let navigationExtras: NavigationExtras = {<br> queryParams: { 'session_id': '123' },<br> fragment: 'anchor'<br> };<br> this.router.navigate(['/news'],navigationExtras);<br> }<br> 3. get <br> constructor(private route: ActivatedRoute) {<br> console.log(this.route.queryParams);<br> }</li>
</ol>
<pre><code>8.
</code></pre>
<p> <br> import { NewsaddComponent } from './components/newsadd/newsadd.component';<br> import { NewslistComponent } from './components/newslist/newslist.component';</p>
<ol start="2">
<li> <br> {<br> path: 'news',<br> component:NewsComponent,<br> children: [<br> {<br> path:'newslist',<br> component:NewslistComponent<br> },<br> {<br> path:'newsadd',<br> component:NewsaddComponent<br> }<br> ]<br> }</li>
<li> router-outlet<br> <router-outlet></router-outlet></li>
</ol>
<pre><code></code></pre>
</article>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1394645681125281792"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">