집 > 기사 > 웹 프론트엔드 > Angular 5 초보자가 알아야 할 사항

Angular 5 초보자가 알아야 할 사항

php中世界最好的语言원래의: 2018-04-16 10:42:041453검색

이번에는 Angular 5 초보자가 꼭 알아야 할 주의 사항을 가져왔습니다. 실제 사례를 살펴보겠습니다.

Angular5라고 부르지만 실제로는 2012년에 탄생한 이 프런트 엔드 프레임워크의 네 번째 버전입니다.

angular 역사

거의 반년 만에 새로운 버전이 출시되는 것 같지만, 사실 재작성된 버전 2부터 개발 인터페이스와 핵심 아이디어가 안정화됐고, 기본적으로 이전 버전과의 호환성을 유지하고 있다.

이 새 버전 5에서 Angular 팀은 다음 기능 개선에 중점을 둡니다.

더욱 쉬워진 프로그레시브 웹 앱 구축 - 프로그레시브 웹 앱
빌드 최적화 프로그램을 사용하여 작은 앱과 더 빠른 네트워크 로드 시간에 불필요한 코드를 제거
구체화된 디자인 구성 요소가 서버 측 렌더링과 호환되도록 만드세요

PWA는 Google이 제안한 표준으로, 웹 애플리케이션에 모바일 단말기의 기본 애플리케이션에 필적하는 사용자 경험을 제공하는 것을 목표로 합니다. PWA 애플리케이션은 주로 서비스 워커와 브라우저 캐시를 사용하여 대화형 환경을 개선합니다. 휴대폰 데스크톱에 직접 배포할 수 있을 뿐만 아니라 오프라인에서도 사용할 수 있습니다.

둘째, Angle 환경을 소개합니다

Angular는 TypeScript를 사용하여 애플리케이션을 개발할 것을 권장합니다. 이를 위해서는 온라인 컴파일러(JIT)를 사용하여 실시간으로 코드를 컴파일하거나 프리컴파일러(AOT)를 사용하여 개발 중에 코드를 미리 컴파일해야 합니다.

이러한 번거로운 프로세스가 Angular 프레임워크의 본질에 대한 생각에 영향을 미치는 것을 피하기 위해 우리는 온라인 글쓰기 및 실험에 적응하는 데 필요한 이러한 필수 사항을 구성하고 패키지했습니다. 이제 라이브러리 a5-loader만 도입하면 됩니다.

Angular 프레임워크가 파란색이 아니라는 것을 알 수 있습니다. 실제로 우리는 이를 a5-loader에 패키징하지 않고 애플리케이션의 필요에 따라 모듈 로더(SystemJS)가 자동으로 로드하도록 했습니다. 이것의 목적은 후속 과정에서 사용되는 백엔드 구성 방법과 애플리케이션 코드가 일치하도록 만드는 것입니다. 이 라이브러리에 관심이 있다면 github의 http://github.com/hubwiz/a5-loader 저장소를 방문하세요.

3. 각도 구성 요소 만들기 Angular는

컴포넌트 지향 프런트엔드 개발 프레임워크입니다.

C/S그래픽 애플리케이션 개발에 참여했다면 컴포넌트라는 단어의 의미를 알아야 합니다. 기본적으로 구성 요소는 그래픽 인터페이스와 고유한 논리적 기능을 갖춘 일부 프로그램 단위를 나타냅니다. 다음 그림에는 핑퐁 전환을 구현하는 데 사용되는 세 가지 구성 요소가 나열되어 있습니다. 구성품 샘플

컴포넌트는 우수한 재사용성을 제공하며, 간단한 글루 코드를 사용하여 매우 복잡한 대화형 기능을 구현할 수 있습니다.

이제 Angular 구성 요소를 만들어 보겠습니다. 코드는 매우 간단합니다.

@Component({ selector: "ez-app", template: `<h1>Hello,angular5</h1>`})class EzComp{}

Angular 프레임워크에서 구성 요소는 구성 요소 데코레이터가 적용된 클래스를 참조합니다. 구성 요소 데코레이터의 기능은 데코레이팅된 클래스에 메타데이터 정보를 추가하는 것입니다.

주석

Angular 프레임워크는 애플리케이션을 컴파일하고 부트스트랩할 때 이러한 메타데이터를 사용하여 뷰를 구성합니다. 메타데이터 중 두 가지는 매우 중요합니다.

selector: DOM 트리에서 구성 요소의 렌더링 앵커 포인트를 선언하는 구성 요소 호스트 요소의 CSS 선택기

template: 구성 요소의 템플릿, 프레임워크는 이 템플릿을 청사진으로 사용합니다. 뷰를 구축하세요

4. 각도 모듈 만들기

Angular 프레임워크의 핵심은 구성요소화이며, 설계 목표는 대규모 애플리케이션 개발에 적응하는 것입니다. 따라서 다양한 구성요소(및 서비스)를 구성하기 위해 애플리케이션 개발에 모듈(NgModule) 개념이 도입됩니다. Angular 애플리케이션은 적어도 하나의 모듈을 생성해야 합니다.

JavaScript

언어 자체의 모듈 개념과 구별하기 위해 본 강좌에서는 Angular 모듈을 표현하기 위해 NG 모듈을 사용합니다.

컴포넌트와 마찬가지로 NG 모듈은 NgModule 데코레이터가 적용된 클래스입니다. 예를 들어 다음 코드는 NG 모듈 EzModule을 생성합니다.

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ EzComp ],
 bootstrap: [ EzComp ]
})
class EzModule{}

마찬가지로 NgModule 데코레이터는 데코레이팅된 클래스에 모듈 메타데이터를 연결하는 데 사용됩니다. 데코레이팅된 클래스의 주석 속성을 보고 결과를 관찰할 수 있습니다.

ngmodule annotations

NgModule装饰器声明了一些关键的元数据，来通知框架需要载入哪些NG模块、编译哪些组件以及启动引导哪些组件：

imports：需要引入的外部NG模块

declarations：本模块创建的组件，加入到这个元数据中的组件才会被编译

bootstrap：声明启动引导哪个组件，必须是编译过的组件

需要强调的是，bootstrap元数据声明的组件必须是编译过的组件：它要么属于使用imports元数据引入的外部NG模块，要么是已经在declarations元数据中声明的本地组件。

NG模块BrowserModule定义于包@angular/platform-browser，它是Angular跨平台战略的重要组成部分。BrowserModule封装了浏览器平台下的核心功能实现，与之对应的其他平台实现还有：

ServerModule：服务端实现
WorkerAppModule：WebWorker实现

通常情况下开发Web应用时，我们都需要引入BrowserModule这一NG模块。

五、启动Angular应用

前面课程中，我们已经创建了一个组件和一个NG模块，不过似乎只是定义了一堆的元数据，几乎没有写太多有价值的代码。
但这就是Angular框架的一个特点：声明式开发。这些元数据是用来向框架声明如何引导启动应用程序的重要信息。

启动代码很简单，引入platformBrowserDynamic()工厂函数、创建平台实例、启动指定模块：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
const pref = platformBrowserDynamic()
pref.bootstrapModule(EzModule)

√ 平台对象：PlatformRef

platformBrowserDynamic()函数返回一个PlatformRef对象（Angular对平台的抽象），这个函数最重要的作用，在于其内部创建了一个即时（Just In Time）编译器，可以在线实时编译NG模块和组件，这也是它被称为动态（Dynamic）的原因：dynamic bootstrap

平台对象的bootstrapModule()方法用来启动指定的NG模块，启动的绝大部分工作，在于利用JIT编译器编译NG模块和组件，当这些编译工作都完成后，则根据启动模块的bootstrap元信息，渲染指定的组件。

六、为什么这么复杂？

可能你已经感觉有点复杂了：只是为了写一个Hello,World，就要写这么多代码。

事实上这些复杂性是随着Angular的发展逐步引入的，从好的一方面说，是提供给开发者的可选项逐渐增多了，适用场景变多了。

比如，在Angular2正式版之前，都没有NG模块的概念，你只要写一个组件就可以直接启动应用了。Angular团队的预期应用场景是大规模前端应用开发，因此显式的NG模块声明要求也是容易理解的。不过即使是小型的应用，由于可以只使用一个NG模块，因此这一点的复杂性增加倒也不多，只是增加了学习和运用这个新概念的成本。

另一个显而易见的复杂性，在于多平台战略的引入。Angular希望让应用可以跨越浏览器、服务器等多个平台（基本）直接运行。因此免不了抽象一个中间层出来，我们需要在应用中显式地选择相应的平台实现模块：multiple platform

第三个复杂性来源于对预编译（AOT：Ahead Of Time）的支持。在早期，Angular只有即时编译（JIT：Just In Time），也就是说应用代码是在运行时编译的。即时编译的第一个问题是在应用中需要打包编译器代码，这增加了最终发布的应用代码的
大小；另一个问题在于编译需要时间，这增加了用户打开应用的等待时间。因此现在的Angular是同时支持JIT和AOT的，但启动JIT编译的应用，和启动AOT编译的应用，在目前需要显式地进行选择：aot vs. jit

对于Angular而言，编译将入口NG模块定义转换为NG模块工厂（NgModuleFactory）。对于JIT而言，这一步是隐含在bootstrapModule()中的。而对于AOT而言，生成模块工厂就结束了，应用启动时使用bootstrapModuleFactory()调用生成的模块工厂即可。

尽管AOT编译通常在构建阶段运用，我们可以在浏览器里模拟这个分两步的过程。

7. Angular의 원래 의도를 이해하세요

프레임워크 자체의 강력한 기능으로 인한 복잡성 외에도 Angular의 또 다른 복잡성 원인은 고도로 캡슐화된 선언적 API에 있으며, 이는 개발자가 프레임워크의 구현 메커니즘을 파악하고 통찰력을 얻기 어렵게 만듭니다. , 일단 문제가 발생하면 죄책감을 느낍니다. 분석 및 문제 해결이 어렵습니다. 각도 오류

Angular를 블랙박스로 사용할 수 없습니다.

그 이유는 Angular가 선언적 템플릿 구문을 핵심으로 하는 API 개발 인터페이스를 제공하기 때문입니다. 개발자가 작성한 템플릿은 최종 뷰 객체를 렌더링하기 전에 프레임워크에서 상당히 복잡한 컴파일 처리를 거칩니다. 템플릿에서 뷰 개체까지의 과정에서 어떤 일이 일어나는지 이해하려고 노력하지 않으면 항상 통제 불능이라는 느낌을 받을 것이라고 믿습니다.

반면, Angular는 애플리케이션 프레임워크를 설정하고 개발자가 채워야 할 공백을 남겨두는 프레임워크이기 때문입니다. 프레임워크의 작동 방식을 최대한 이해하지 않고는 프레임워크를 최대한 활용하기가 어렵습니다.

Angular 개발의 출발점은 HTML을 사용하여 사용자 인터페이스를 작성하는 것입니다. 정적 웹 페이지를 개발하는 것이 얼마나 쉬운지 생각해 보면 그것이 얼마나 좋은 아이디어인지 알게 될 것입니다. html 챌린지

네이티브 HTML의 문제점은 우선 적절한 사용자 상호 작용을 달성하기 위해 JavaScript가 필요하고, 두 번째로 사용 가능한 태그가 너무 많아서 사용자 인터페이스 개발 작업을 수행하기 어렵다는 것입니다.

브라우저는 와 같은 태그를 직접 해석할 수 없기 때문에 Angular 팀은 컴파일러의 개념을 도입했습니다.
이를 브라우저로 보내기 전에 먼저 확장 태그가 포함된 HTML을 브라우저에서 지원하는 기본 HTML인 html로 변환합니다. 컴파일러

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!