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

php中世界最好的语言
リリース: 2018-04-27 13:40:08
オリジナル
2383 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!