이번에는 Angular CLI를 사용하여 Angular 프로젝트를 생성하는 단계에 대해 자세히 설명하겠습니다. Angular CLI를 사용하여 Angular 프로젝트를 생성할 때 주의 사항은 무엇입니까?
프로젝트를 시작하기 전에 먼저 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의 단위 테스트 구성입니다.
3: 컴포넌트 사용자 정의import { Component } from '@angular/core';
@Component({
selector: 'my-comp',
template: '<ul><li *ngFor='let row of dataList'>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 ] }) ......
tag selector
2.selector: '.class'// 스타일 선택기; sub_selector)'//선택기 반전
6.selector: 'selector1, selector2'//다중 선택기. 컴포넌트와 동일합니다. 먼저 서비스를 정의해 보겠습니다.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] })
constructor를 사용하여 여기서 보여드리겠습니다. 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中文网其它相关文章!
推荐阅读:
위 내용은 Angular CLI를 사용하여 Angular 프로젝트를 생성하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!