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

php中世界最好的语言
リリース: 2018-06-06 15:26:29
オリジナル
1482 人が閲覧しました

今回は、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" }
  ];  
}
ログイン後にコピー
非常に単純なコンポーネントが上で定義されていますが、それを使用する前に、モジュール (src/app/app.module) で定義する必要があります。

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" }
    ];
  }  
}
ログイン後にコピー
次に、サービスとコンポーネントの登録は少し異なります。デフォルトでは、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中文网其它相关文章!

推荐阅读:

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

Vue做出弹窗功能(附代码)

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

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