Angular CLI を使用して Angular プロジェクトを作成する手順の詳細な説明

今回は、Angular CLI で Angular プロジェクトを作成する手順について詳しく説明します。Angular CLI で Angular プロジェクトを作成する際の注意点について、実際のケースを見てみましょう。

プロジェクトを開始する前に、最初に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" }
  ];  
}

非常に単純なコンポーネントが上で定義されましたが、それを使用する前に、モジュール内で定義する必要があります (src/app/app)。 .ts:

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

登録が完了したので、それを使用できます。上記の例の使用法は非常に簡単です。つまり、カスタム タグ my-comp が使用されており、これは通常の p とまったく同じです。

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

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

1.selector: 'element-name'//カスタマイズされた

tag selector

;

2.selector: '.class '//スタイルセレクター;

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" }
    ];
  }  
}

次に、サービスとコンポーネントの登録とは少し異なります。デフォルトでは、arc/app/app.component.ts ファイルに登録します。 サービスの使用方法も非常に簡単です。ここでは

コンストラクター

を使用してみましょう:

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

カスタム コンポーネントのコードをまだ覚えていますか?その中でサービスの使用法をデモンストレーションしましたが、コードの変更された部分のみが上に示されています。

5: ルーティングの使用法

ここではルーティングの簡単な使用法を説明します。具体的な詳細は上記と同様ですが、この記事の目的はすぐに始めることです。 デモンストレーションの便宜上、デフォルトで MyComponent と My2Component という 2 つのコンポーネントを定義しました。 まず、 が、index.html ページの head タグ、またはこの要素を動的に生成するスクリプトで定義されていることを確認する必要があります。

最初に src/app/app.module.ts にルートを登録します:

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中文网其它相关文章！

推荐阅读：

Angular+Font-Awesome步骤详解

源生js实现哈夫曼编码步骤详解

以上がAngular CLI を使用して Angular プロジェクトを作成する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。