Angular CLI が Angular プロジェクトを実装する方法

今回は、Angular CLI が Angular プロジェクトを実装する方法と、Angular CLI が Angular プロジェクトを実装する際の注意点について説明します。以下は実際のケースです。

Angular CLI は、プロジェクトの作成、ファイルの追加、テスト、パッケージ化、公開などの多くの開発タスクを実行できるコマンド ライン インターフェイス ツールです。ここでのクイック スタートは、このコマンドに基づいています。

プロジェクトを開始する前に、最初にnodeとnpmをインストールし、次にnpm install -g @angular/cliを実行してAngular CLIをインストールする必要があります。

1: コマンドラインを使用して新しいプロジェクトを作成します

ng new newApp --skip-install
cd newApp
cnpm install
ng serve --open

上記のコマンドを実行すると、新しい Angualr プロジェクトが自動的に作成され、プロジェクトが開始されます。

その中で、--skip-install は、ノード パッケージが最初にインストールされないことを意味します。その後、cnpm install を使用して、ノード パッケージをより高速にインストールします。

2: ディレクトリ構造

次に、ng コマンドが生成するのに役立つもの、つまりプロジェクトのディレクトリ構造とその中にあるものを見てみましょう。すべてを知る必要はありませんが、最初に重要だと思う以下のことを覚えておいてください:

1.src: アプリケーション コードが保存される場所;

2.src/app: コードが主に保存される場所。適切ですが、開発するときは、ほとんどの時間がここのコードの変更に費やされます。

3.src/assets: 画像などが保存され、ビルド時にリリース パッケージにコピーされます。 main.js: 基本的には変更しません。これはプログラムのメインの入り口です。

5.src/styles.css: 後で説明するように、特別に使用されるスタイルは対応する場所に記述されます。

6.karma.conf .js: Karma の単体テスト設定。ng テストの実行時に使用されます。

3: カスタムコンポーネント

import { Component } from '@angular/core';
@Component({
  selector: 'my-comp',
  template: '<ul><li *ngFor=&#39;let row of dataList&#39;>ID:{{row.id}} INFO:{{row.info}}</li></ul>',  
  styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]
  
})
export class MyComponent {
  dataList = [
    { id: 1, info: "Angular" },
    { id: 2, info: "React" },
    { id: 3, info: "Vue" }
  ];  
}

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
@NgModule({
  declarations: [
    MyComponent
  ]  
})
......

登録が完了したので、使用することができます。上記の例の使用方法は非常に簡単で、通常の p とまったく同じです。

閲覧の便宜上、登録例では無関係なコードを削除していることに注意してください。幸いなことに、実際の状況には、スタートアップ、他のコンポーネント、サービスなどの登録が含まれています。ここの手順では主に、より重要なことについて説明します。以下も同様です。

AngularJS と同様に、Angular のセレクターには上記のカスタム タグ以外にも次の機能があります:

1.selector: 'element-name'//カスタム タグ セレクター;

2.selector: '.class'/ /Style selector; ;

3.selector: '[attribute]'//属性セレクター;

4.selector: '[attribute=value]'//属性値セレクター: ': not(sub_selector)'/ /セレクターを反転します。

6.selector: 'selector1, selector2'//複数のセレクター。

4: カスタムサービス

コンポーネントと同じように、最初にサービスを定義しましょう。

import { Injectable } from '@angular/core';
export class DataFormat { 
  id: number; 
  info: string; 
}
@Injectable()
export class MyServ {
  getData(): DataFormat[] {
    return [
      { id: 1, info: "Angular" }, 
      { id: 2, info: "React" }, 
      { id: 3, info: "Vue" }
    ];
  }  
}

import { Component } from '@angular/core';
import { MyServ } from './my.service';
@Component({
  providers: [MyServ]  
})

ここではルーティングの簡単な使用法を説明します。具体的な詳細は上記と同様ですが、この記事の目的はすぐに始めることです。 デモンストレーションの便宜上、デフォルトで MyComponent と My2Component という 2 つのコンポーネントを定義しました。

import { MyServ } from './my.service';
......
export class MyComponent {
  dataList: any[];  
  constructor(private demoService: MyServ) {
     this.dataList = this.demoService.getData();
    }  
}

<a routerLink="/my">toMycomp</a>
<a routerLink="/my2">toMy2comp</a>
<router-outlet></router-outlet>

点击toMycomp或者toMy2comp就会跳转对应的路由设置的组件了。

六：HTTP

由于@angular/http库中的HttpModule保存着http相关的服务，需要先引入进来（这里是在src/app/app.module.ts中引入）：

import { HttpModule }  from '@angular/http';
@NgModule({
  imports: [HttpModule]  
})
......

现在，http就是一个服务，下面简单演示一种用法：

......
import { Http } from '@angular/http';
......
  constructor(private http: Http) {  
    http.get('assets/XXX.json').forEach(function (data) {    
      console.log(data['_body']);      
    });    
  }  
......

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

移动端怎样做出上拉下滑刷新加载

Vue做出弹窗功能（附代码）

以上がAngular CLI が Angular プロジェクトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。