Angle12를 빠르게 시작하는 방법은 무엇입니까? 가이드 공유 시작하기

빠르게 시작하는 방법angular12? 이번 글은 Angular12를 소개하고, Angular12를 시작하는 방법을 단계별로 알려드릴 예정입니다. 필요하시면 참고하시면 됩니다~

이 글은 주로 Angular에 관심이 있는 프론트엔드 아동용 신발을 대상으로 합니다. 중국에서는 대부분의 회사에서 사용하는 기술 스택이 Vue와 React입니다. Angular를 사용하는 회사는 거의 없고, 저도 우연히 사용하게 되어 기록하고 공유합니다. [관련 튜토리얼 권장 사항: "angular Tutorial"]

이 기사를 통해 다음 사항을 배울 수 있습니다.

• angular 환경 구성
• 개발 도구 구성
• CLI 프로젝트 구조
• 프로젝트 소스 코드 파일 구조
• 프로젝트 생성

1. Angular 환경 구성:

Node => NPM/CNPM => Angular CLI

• npm을 사용하여 프로젝트가 의존하는 소프트웨어 패키지를 관리합니다. 네트워크상의 이유로 대체 패키지 관리 도구로 cnpm을 사용할 수 있습니다. cnpm은 복잡한 구성에 대해 걱정할 필요 없이 Angular에 더 집중할 수 있도록 각도 CLI를 사용합니다.
• 설치 후 콘솔에 다음을 입력하세요.

npm install -g @angular/cli

• 버전 보기

angular version

2. 개발 도구 구성:

• Vscode용 권장 확장 프로그램:

• Chrome용 권장 확장 프로그램: Angular DevTools

프로그램 디버깅에 편리하며 Angular를 찾을 수 있습니다. 개발자 도구 Chrome 온라인 앱 스토어에서.

3. CLI 프로젝트 구조:

| -- myProject
    | -- .editorconfig  // 用于在不同编辑器中统一代码风格
    | -- .gitignore  // git中忽略文件列表
    | -- .README.md  // Markdown格式的说明文件
    | -- .angular.json  // angular 的配置文件
    | -- .browserslistrc  // 配置浏览器兼容的文件
    | -- .karma.conf.js  // 自动化测试框架Karma的配置文件
    | -- .package.json  //  NPM包定义文件
    | -- .package-lock.json  // 依赖包版本锁定文件
    | -- .tsconfig.app.json  // 用于app项目的TypeScript的配置文件
    | -- .tsconfig.spec.json  // 用于测试的TypeScript的配置文件
    | -- .tsconfig.json  //  整个工作区的TypeScript的配置文件
    | -- .tsconfig.spec.json  // 用于测试的TypeScript的配置文件
    | -- .tslint.json  // TypeScript的代码静态扫描配置
    | -- .e2e  // 自动化集成测试项目
    | -- .src  //  源代码目录
            | -- .favicon.ico //  收藏图标
            | -- .index.html //  收藏图标
            | -- .main.ts  //  入口 ts文件
            | -- .polyfill.ts  //  用于不同浏览器兼容版本加载
            | -- .style.css  //  整个项目的全局的css
            | -- .test.ts  //  测试入口
            | -- .app  //  工程源码目录
            | -- .assets //  资源目录
            | -- .environments  //  环境配置
                 | -- .environments.prod.ts  //  生产环境
                 | -- .environments.ts  //  开发环境复制代码

4. 프로젝트 소스 코드 파일 구조

1.app 디렉토리:

app 디렉토리는 작성되는 코드 디렉토리입니다. 새 프로젝트를 생성할 때 기본적으로 명령줄이 생성됩니다.

2.app.comComponent.ts(앱 디렉토리):

이 파일은 Angular 애플리케이션의 기본 빌딩 블록인 구성 요소를 나타내며 비즈니스 로직과 데이터가 포함된 HTML 조각으로 이해될 수 있습니다

import { Component,} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
}

다음으로 app.comComponent.ts 파일의 각 코드를 분석해 보겠습니다.

import {Component} from '@angular/core';复制代码

이 코드는 Angular 코어 모듈의 구성 요소 데코레이터를 소개합니다.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

이 코드는 데코레이터를 사용하여 구성 요소와 구성 요소를 정의합니다. 메타데이터 모든 구성 요소 이 데코레이터로 주석을 달아야 합니다. 구성 요소 메타데이터 Angular는 여기 속성을 통해 구성 요소를 렌더링하고 로직을 실행합니다.

• selector는 CSS 선택기입니다. app-root의 HTML 태그를 통해 구성요소를 호출할 수 있음을 나타냅니다. index.html<에 <code><app-root>Loading...</가 있습니다. /code> app-root> 태그, 이 태그는 구성 요소의 콘텐츠를 표시하는 데 사용됩니다. selector 是一个css选择器。表示该组件可通过app-root的HTML标签来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容。
• templateUrl 指定了一个html文件作为组件的模板，定义了组件的布局和内容。在这里定义app.component.html，最终在index.html中<app-root>/<app-root>这个标签的内容将展示app.component.html里面的内容。也就是templateUrl所定义的页面定义了用户最终看见的页面的布局和内容。
• styleUrls 指定了一组css文件。可以在这个css中编写这个组件模板要用到的样式。也就是app.component.html和app.component.css两个文件。

export class AppComponent {
    title = 'hello Grit';
}

这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写

• AppComponent 本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据加到这个类上，Angular就会把AppComponent当组件来处理

3.app文件中的app.module.ts：

该文件表示模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ScrollableTabComponent,ImageSliderComponent } from './components';
@NgModule({
  declarations: [
    AppComponent,
    ScrollableTabComponent,
    ImageSliderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，在app.module.ts文件中，这个根模块就可以启动你的应用。

• declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。

• exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。

• imports（导入表） —— 导入其他模块

• providers

  templateUrl 은 html 파일을 구성 요소의 템플릿으로 지정하여 구성 요소의 레이아웃과 콘텐츠를 정의합니다. 여기서 app.comComponent.html를 정의하고 마지막으로 index.html에서 <app-root>/<app-root>를 정의합니다. 태그의 app.comComponent.html 내부 콘텐츠가 표시됩니다. 즉, templateUrl로 정의된 페이지는 사용자가 최종적으로 보게 되는 페이지의 레이아웃과 내용을 정의합니다. 🎜🎜styleUrls 는 CSS 파일 세트를 지정합니다. 이 CSS에서 이 구성 요소 템플릿에 사용되는 스타일을 작성할 수 있습니다. 즉, app.comComponent.html와 app.comComponent.css라는 두 개의 파일이 있습니다. 🎜🎜

  ng new myProject  //项目默认会新建一个目录（项目工程）
  cd myProject 
  ng serve  //会启动开发环境下的Http 服务器复制代码

  로그인 후 복사

  로그인 후 복사
  🎜이 클래스는 실제로 구성 요소의 컨트롤러입니다. 우리의 비즈니스 로직은 이 클래스에 작성되었습니다.🎜🎜🎜AppComponent 는 원래 일반 typescript 클래스이지만 위 구성 요소 메타데이터는 Angular에 AppComponent는 구성 요소이며 일부 메타데이터를 이 클래스에 추가해야 합니다. Angular는 AppComponent를 구성 요소로 처리합니다🎜🎜

  3.app 파일 app.module.ts: 🎜🎜이 파일 🎜rrreee🎜모듈을 나타냅니다. Angular 애플리케이션은 모듈식이며 NgModule이라는 자체 모듈식 시스템을 가지고 있습니다. 모든 Angular 애플리케이션에는 루트 모듈인 NgModule 클래스가 하나 이상 있습니다. app.module.ts 파일에서 이 루트 모듈은 애플리케이션을 시작할 수 있습니다. 🎜🎜🎜🎜선언(선언 가능한 개체 테이블) - 이 NgModule에 속하는 구성 요소, 지침 및 파이프입니다. 🎜🎜🎜🎜exports(내보내기 테이블) - 다른 모듈의 구성 요소 템플릿에서 사용할 수 있는 선언 가능한 개체의 하위 집합입니다. 🎜🎜🎜🎜imports (가져오기 테이블) - 다른 모듈 가져오기🎜🎜🎜🎜providers - 종속성 주입🎜

• bootstrap —— 设置根组件

五、项目创建、运行

ng new myProject  //项目默认会新建一个目录（项目工程）
cd myProject 
ng serve  //会启动开发环境下的Http 服务器复制代码

参考文献：Angular官网

原文地址：https://juejin.cn/post/6994378585200918564

作者：Grit_1024

更多编程相关知识，请访问：编程入门！！

위 내용은 Angle12를 빠르게 시작하는 방법은 무엇입니까? 가이드 공유 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!