Angular CLI가 Angular 프로젝트를 구현하는 방법

이번에는 Angular CLI에서 Angular 프로젝트를 구현하는 방법과 Angular CLI에서 Angular 프로젝트를 구현하는 방법에 대한 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

Angular CLI는 프로젝트를 생성하고, 파일을 추가하고, 테스트, 패키징, 게시와 같은 많은 개발 작업을 수행할 수 있는 명령줄 인터페이스 도구입니다.

프로젝트를 시작하기 전에 먼저 node와 npm을 설치한 후 npm install -g @angular/cli를 실행하여 Angular CLI를 설치해야 합니다.

One: 명령줄을 사용하여 새 프로젝트 만들기

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

위 명령을 실행하면 자동으로 새 Angualr 프로젝트가 생성되고 프로젝트가 시작됩니다.

그중 --skip-install은 노드 패키지가 먼저 설치되지 않는다는 의미이며, 그런 다음 cnpm install을 사용하여 훨씬 빠르게 설치합니다.

둘: 디렉토리 구조

이제 ng 명령이 생성하는 데 도움이 되는 항목, 즉 프로젝트의 디렉토리 구조와 그 안에 무엇이 있는지 살펴보겠습니다. 모든 것을 알 필요는 없지만 먼저 중요하다고 생각되는 사항을 기억하세요.

1.src: 애플리케이션 코드가 저장되는 위치

2.src/app: 코드가 주로 저장되는 위치가 아닐 수도 있습니다. 적절하지만 개발할 때 대부분의 시간은 여기에서 코드를 수정하는 데 소요됩니다.

3.src/assets: 사진 등이 저장되고 빌드 시 릴리스 패키지에 복사됩니다. main.js: 기본적으로 수정하지 않습니다. 프로그램의 주요 입구입니다.

5.src/styles.css: 특별히 사용되는 스타일은 나중에 설명하겠지만 공개 스타일입니다. 여기에 작성됩니다.

6.karma.conf .js: ng 테스트를 실행할 때 사용되는 Karma의 단위 테스트 구성입니다.

세 가지: 사용자 정의 구성 요소

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인 모듈에서 정의해야 합니다. ts에 등록합니다.

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

이제 등록되었으므로 사용하실 수 있습니다. 위 예제의 사용법은 일반 p와 완전히 동일한 my-comp 라벨을 사용자 정의하는 것입니다.

보기의 편의를 위해 등록 예시에서 관련없는 코드를 제거했다는 점을 참고하시기 바랍니다. 다행히 실제 상황에는 스타트업, 기타 구성요소, 서비스 등의 등록이 포함되어 있습니다. 명령줄 여기에 있는 지침은 주로 아래와 같은 더 중요한 사항을 설명합니다.

AngularJS와 유사하게 Angular의 선택기에는 위의 사용자 정의 태그 외에 다른 기능이 있습니다.

1.selector: 'element-name'//사용자 정의 태그 선택기

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

3.selector: '[속성]'//속성 선택기;

4.selector: '[attribute=value]'//속성 값 선택기;

5.selector: ': not(sub_selector)'/ /선택기 반전

6.selector: 'selector1, selector2'//다중 선택기.

Four: 맞춤형 서비스컴포넌트와 동일합니다. 먼저 서비스를 정의해 보겠습니다.

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]  
})

서비스 사용도 매우 간단합니다. 여기서는 생성자를 사용하여 설명하겠습니다.

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

사용자 정의 구성 요소의 코드를 기억하시나요? 우리는 그 안에서 서비스의 사용법을 시연했으며, 위에는 코드의 수정된 부분만 나와 있습니다.

다섯 번째: 라우팅의 사용 여기서는 라우팅의 간단한 사용법을 제공합니다. 구체적인 세부 사항은 위와 유사하며 빠르게 시작하는 것이 이 문서의 목적입니다.

시연의 편의를 위해 기본적으로 MyComponent와 My2Component라는 두 가지 구성 요소를 정의했습니다.

먼저 index.html 페이지의 head 태그나 이 요소를 동적으로 생성하는 스크립트에 가 정의되어 있는지 확인해야 합니다.

먼저 src/app/app.module.ts에 경로를 등록합니다:

......
import { RouterModule } from '@angular/router';
@NgModule({
  declarations: [MyComponent,My2Component],  
  imports: [  
    RouterModule.forRoot([    
      {path: 'my',component: MyComponent},      
      {path: 'my2',component: My2Component}      
    ])
  ]
  ......
})
......

사용이 매우 간단합니다:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!