https://www.tektutorialshub.com/angular/angular-introduction/
Introduction to Angular - TekTutorialsHub
Angular Tutorial Architecture overview and concepts Angular 2 is now known as Angular is the new front end framework and is the successor to the most popular AngularJs. The Angular is an open-source and helps us build dynamic & single-page applications
www.tektutorialshub.com
Angular 2 is now known as Angular is the new front end framework and
is the successor to the most popular AngularJs.
The Angular is an open-source and helps us build dynamic & single-page applications (SPAs).
In this article, we will give you a brief introduction to Angular.
Angular 2 는 Angular 로 알려져 있으며 새로운 프론트 엔드 프레임워크이며
가장 인기 있는 AngularJs 의 후속 제품 입니다.
Angular는 오픈 소스이며 동적 및 단일 페이지 애플리케이션(SPA)을 구축하는 데 도움이 됩니다.
이 기사에서는 Angular에 대한 간략한 소개를 제공합니다.
Table of Contents
What is Angular?
Angular is a UI framework for building mobile and desktop web applications.
It is built using JavaScript.
You can use it to build amazing client-side applications
using HTML, CSS, and JavaScript.
Angular는 모바일 및 데스크톱 웹 애플리케이션을 구축하기 위한 UI 프레임워크입니다.
JavaScript를 사용하여 구축되었습니다.
HTML, CSS 및 JavaScript를 사용하여
놀라운 클라이언트 측 애플리케이션을 구축하는 데 사용할 수 있습니다.
Angular has many improvements over AngularJS.
It has lots of innovations,
which makes it easy to learn and develop enterprise-scale applications.
You can build extendable, Maintainable, Testable and Standardized Applications
using Angular.
Angular는 AngularJS에 비해 많은 개선 사항이 있습니다.
엔터프라이즈 규모의 애플리케이션을 쉽게 배우고 개발할 수 있도록 하는 많은 혁신이 있습니다.
Angular를 사용하여 확장 가능하고 유지 관리 가능하고
테스트 가능하고 표준화된 애플리케이션을 빌드할 수 있습니다.
Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10, Angular 11, Angular 12
Getting Started with Angular
We have created a great tutorial on How to Install and get started with Angular.
and find out how to Create your First Angular Application.
Features of Angular
Angular is loaded with Power-packed Features. Some of the features are listed below
- Two-Way Data Binding (양방향 데이터바인딩)
This is the coolest feature of the Angular. Data binding is automatic and fast. changes made in the View is automatically updated in the component class and vice versa
이것은 Angular의 가장 멋진 기능입니다. 데이터 바인딩은 자동이며 빠릅니다.
뷰에서 변경한 사항은 컴포넌트 클래스에서 자동으로 업데이트되며
그 반대의 경우도 마찬가지입니다. - Powerful Routing Support
The Angular Powerful routing engine loads the page asynchronously on the same page enabling us to create a Single Page Applications.
Angular 강력한 라우팅 엔진은 동일한 페이지에서 페이지를 비동기식으로 로드하여
단일 페이지 애플리케이션을 생성할 수 있도록 합니다. - Expressive HTML
Angular enables us to use programming constructs like if conditions, for loops, etc to render and control how the HTML pages.
Angular를 사용하면 if 조건, for 루프 등과 같은 프로그래밍 구성을 사용하여 HTML 페이지를 렌더링하고 제어할 수 있습니다. - Modular by Design
Angular follows the modular design. You can create Angular modules to better organize and manage our codebase
Angular는 모듈식 설계를 따릅니다. Angular 모듈 을 만들어 코드베이스를 더 잘 구성하고 관리할 수 있습니다. - Built-in Back End Support
Angular has built-in support to communicate with the back-end servers and execute any business logic or retrieve data
Angular는 백엔드 서버와 통신하고 모든 비즈니스 로직을 실행하거나 데이터를 검색하기 위한 기본 제공 지원을 가지고 있습니다. - Active Community
Angular is Supported by google and has a very good active community of supporters. This makes a lot of difference as your queries are quickly resolved.
Angular는 Google의 지원을 받으며 매우 활발한 지지자 커뮤니티를 보유하고 있습니다. 이렇게 하면 쿼리가 빠르게 해결되므로 많은 차이가 발생합니다.
Angular has changed massively from the AngularJS. Angular completely redesigned from scratch. There are many concepts of angularJS that have changed in Angular.
Angular는 AngularJS에서 크게 변경되었습니다. Angular는 처음부터 완전히 재설계되었습니다. Angular에서 변경된 angularJS의 많은 개념이 있습니다.
Key differences between AngularJs & Angular
AngularJ와 Angular의 주요 차이점
1. Support for ES6
Angular is completely written in Typescript and meets the ECMAScript 6 specification.
This means that it has support for ES6 Modules, Class frameworks, etc.
Angular는 완전히 Typescript로 작성되었으며 ECMAScript 6 사양을 충족합니다.
이것은 ES6 모듈, 클래스 프레임워크 등을 지원한다는 것을 의미합니다.
2. Components are new controllers
In AngularJS we had Controllers.
In Angular Controllers are replaced with Angular Components.
The controllers and view in AngularJS is defined as follows
AngularJS에는 컨트롤러가 있었습니다.
Angular에서 컨트롤러는 Angular 구성 요소 로 대체됩니다 .
AngularJS의 컨트롤러와 뷰는 다음과 같이 정의됩니다.
|
1
2
3
4
5
6
7
8
9
10
|
//View
<body ng-controller=’appController’>
<h1>vm.message<h1>
</body>
//Controller angular.module(‘app’).controller(‘appController’,appcontroller) {
message=’Hello Angular’;
}
|
In Angular, we are using Components. The simple component is shown below written using Typescript.
Angular에서는 컴포넌트를 사용합니다. Typescript를 사용하여 작성된 간단한 구성 요소는 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: '<h1>{{message}} </h1>'
})
export class AppComponent {
message: string=’Hello Angular’;
}
|
In Angular, a component represents a UI element.
You can have many such components on a single web page.
Each component is independent of each other and manages a section of the page.
The components can have child components and parent components.
Angular에서 컴포넌트는 UI 요소를 나타냅니다.
단일 웹 페이지에 이러한 구성 요소가 여러 개 있을 수 있습니다.
각 구성 요소는 서로 독립적이며 페이지의 섹션을 관리합니다.
구성 요소에는 하위 구성 요소와 상위 구성 요소가 있을 수 있습니다.
3. Directives
The AngularJS had a lot of directives. Some of the most used directives are ng-repeat & ng-if
AngularJS에는 많은 지시문이 있었습니다. 가장 많이 사용되는 지시문 중 일부는 ng-repeat&ng-if
|
1
2
3
4
5
6
7
8
|
<ul>
<li ng-repeat =customer in vm.customers>
{{customer.name}}
</li>
</ul>
<div ng-if=”vm.isVIP”> <h3> VIP Customer </h3> </div>
|
The Angular also has directives, but with a different syntax.
It has a * before the directive name indicating it as a structural directive
Angular에도 지시문이 있지만 구문이 다릅니다.
구조적 지시어로 나타내는 지시어 이름 앞에 *이 있습니다.
|
1
2
3
4
5
6
7
8
9
10
|
<ul>
<li *ngFor =#customer of customers>
{{customer.name}}
</li>
</ul>
<div *ngIf=”vm.isVIP”>
<h3> VIP Customer </h3>
</div>
|
The style directives like ng-style, ng-src & ng-href are all gone.
These are now replaced by property binding HTML elements to the class properties
ng-style, ng-src 및 ng-href와 같은 스타일 지시문이 모두 사라졌습니다.
이들은 이제 HTML 요소를 클래스 속성에 바인딩하는 속성으로 대체되었습니다.
The creation of Custom Directives is vastly simplified in angular as shown in the example below.
사용자 지정 지시문 생성은 아래 예와 같이 각도로 크게 단순화되었습니다.
|
1
2
3
4
5
6
|
@Directive({
selector: '[MyDirective]'
})
class MyDirective { }
|
4. Data Bindings
The powerful angular data bindings stay the same, with minor syntax changes.
강력한 각angular data binding 은 약간의 구문 변경을 제외하고는 동일하게 유지됩니다.
Interpolation
|
1
2
3
4
5
6
7
|
//AngularJS
<h3> {{vm.customer.Name}}</h3>
//Angular
<h3> {{customer.Name}}</h3>
|
Note that we used controller alias VM to specify the controller instance in AngularJS.
In Angular, the context is implied.
AngularJS에서 컨트롤러 인스턴스를 지정하기 위해 컨트롤러 별칭 VM을 사용했습니다.
Angular에서는 컨텍스트가 암시됩니다.
One way Binding
|
1
2
3
4
5
6
7
|
//AngularJS
<h3> ng-bind=vm.customer.name></h3>
//Angular
<h3 [innerText]=”customer.name” ></h3>
|
The Angular can bind to any property of the HTML element.
Angular는 HTML 요소의 모든 속성에 바인딩할 수 있습니다.
Event Binding
|
1
2
3
4
5
6
7
|
//AngularJS
<button ng-click=”vm.save()”>Save<button>
//Angular
<button (click)=”save()”>Save<button>
|
The AngularJS uses the ngClick directive to bind to the event.
In Angular ngClick Directive is removed. You can bind directly to the DOM events
AngularJS는 ngClick 지시문을 사용하여 이벤트에 바인딩합니다.
Angular에서 ngClick 지시문이 제거되었습니다. DOM 이벤트에 직접 바인딩할 수 있습니다.
Two- way binding
|
1
2
3
4
5
6
7
|
//AngularJS
<input ng-model=”vm.customer.name”>
//Angular
<input [(ng-model)]=”customer.name”>
|
5. $scopes are out
Angular is not using $scope anymore to glue view and controller.
AngularJS used to run a dirty checking on the scope objects to see if any changes occurred.
Then it triggers the watchers. And then it used to re-running the dirty checking again.
The Angular is using zone.js to detect changes. Zone.js apply patches on all the global asynchronous operations like click event, timer events, HTTP requests, etc. It then intimates the Angular, whenever the changes occur in Angular Application. The Angular then runs the change detection for the entire application
Angular는 뷰와 컨트롤러를 붙이기 위해 더 이상 $scope를 사용하지 않습니다.
AngularJS는 변경 사항이 발생했는지 확인하기 위해
범위 개체에 대한 더티 검사를 실행하는 데 사용되었습니다.
그런 다음 감시자를 트리거합니다.
그런 다음 더티 검사를 다시 실행하는 데 사용되었습니다.
Angular는 zone.js를 사용하여 변경 사항을 감지합니다.
Zone.js는 클릭 이벤트, 타이머 이벤트, HTTP 요청 등과 같은 모든 전역 비동기 작업에 패치를 적용합니다.
그런 다음 Angular 응용 프로그램에서 변경 사항이 발생할 때마다 Angular를 알립니다.
그런 다음 Angular는 전체 애플리케이션에 대한 변경 감지를 실행합니다
6. Filters are renamed to Pipes
In AngularJS, we used Filters and as shown below
|
1
2
3
|
<td>{{vn.customer.name | uppercase}}</td>
|
Angular uses the same syntax but names them as pipes
|
1
2
3
|
<td>{{customer.name | uppercase}}</td>
|
7. Platform-specific Bootstrap
In AngularJS we used the ng-app directive in our HTML,
then the Angular would bootstrap and attach itself the ng-app
AngularJS에서 HTML의 ng-app 지시문을 사용하면 Angular가 부트스트랩하고 ng-app을 첨부합니다.
|
1
2
3
|
<body ng-app=’app’> </html>
|
The bootstrapping in Angular is done through code. The bootstrapping of Angular is not simple as that of AngularJS. The sample code below shows how Angular application bootstraps the AppModule using platformBrowserDynamic Module
Angular의 부트스트랩은 코드를 통해 수행됩니다. Angular의 부트스트랩은 AngularJS처럼 간단하지 않습니다. 아래 샘플 코드는 Angular 애플리케이션이 platformBrowserDynamic Module을 사용하여 AppModule을 부트스트랩하는 방법을 보여줍니다.
|
1
2
3
4
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
|
The Bootstrap is also Platform-specific in Angular. You can have different bootstrapper for mobile & Web application.
You can read about Bootstrapping Angular Application
Bootstrap은 Angular에서도 플랫폼별로 다릅니다.
모바일 및 웹 응용 프로그램에 대해 다른 부트스트래퍼를 사용할 수 있습니다.
부트스트랩 앵귤러 애플리케이션 에 대해 읽을 수 있습니다.
8. Services
The AngularJS had Services, Factories, Providers, Constants and values,
which used to create reusable code.
These are then injected into Controllers so that it can use it
The Angular all the above is merged into a Service class.
AngularJS에는 재사용 가능한 코드를 만드는 데 사용되는
서비스, 팩토리, 공급자, 상수 및 값이 있습니다.
그런 다음 컨트롤러에 주입되어 사용할 수 있습니다.
Angular는 위의 모든 것이 Service 클래스 로 병합됩니다 .
9. Mobile Support
AngularJS was not built with mobile support in mind.
Angular designed with mobile development in mind.
AngularJS는 모바일 지원을 염두에 두고 제작되지 않았습니다.
Angular는 모바일 개발을 염두에 두고 설계되었습니다.
Conclusion
The Angular is changed drastically from AngularJS in many aspects and
it has become a lot easier and faster.
The list above is a brief list and not a complete one.
In the next tutorial, we will find out things you should have & know
before beginning the building application with Angular.
You can then move to read how to Create your First Angular Application
Angular는 여러 측면에서 AngularJS에서 크게 변경되었으며 훨씬 쉽고 빨라졌습니다.
위의 목록은 전체 목록이 아니라 간략한 목록입니다.
다음 튜토리얼에서는 Angular로 애플리케이션 빌드 를 시작하기 전에
알아야 할 사항과 알아야 할 사항을 알아보겠습니다 .
'Angular JS' 카테고리의 다른 글
| Bootstrapping in Angular: How It Works Internally (0) | 2022.01.15 |
|---|---|
| How to Create a new project in Angular (0) | 2022.01.15 |
| How to Install Angular and Set Up Development Environment (0) | 2022.01.15 |
| Angular Architecture Overview & Concepts (0) | 2022.01.14 |
| Complete Angular Tutorial For Beginners (0) | 2022.01.14 |
댓글