Angular 시작하기

Angular is a framework, or more generic, a tool to build interactive websites, and has many alternatives, React, VueJS, Svelte, EmberJS, even jQuery can be considered an alternative. There is AngularJS and there is Angular, these two are very different. This article is about Angular.

Angular uses semantic versioning and it starts with version 2. The next version is version 4. 🤣

Let me explain: The Angular team was working parallel on a router, so Angular 2.0 and Router 2.0, but because of breaking changes the Router got pushed to 3.0 and Angular remained at 2.0, so the router was one version ahead of Angular. To remove the inconsistency that the router is always one version ahead they skipped version 3 of Angular.

The Angular CLI is very powerful, so let's create a Hello World app with the CLI.

Install the Angular CLI:

npm install -g @angular/cli

Create a workspace and initial application with the name hello-world . The ng new command scaffolds your application and installs all required node packages.

ng new hello-world

Run the application

cd hello-world
ng serve --open

There are several benefits and features of Angular, some a very subjective and the list is by far not complete.

General benefits , when choosing any framework are:

• Reduction of Cost: Using a framework is reducing the amount of time spent, when building an application, for bugfixes and stability.
• Standards Compliance (Es6+, Modules, Internationalization & Accessibility)
• Open Source License (in most cases)

Angular specific benefits:

• Popularity in Enterprise Applications
• Documentation : A detailed documentation, which is maintained by Angular Team @Google.
• Opinionated framework You don't have to worry about choosing a Router, http library, forms handling library, rxJs, and many more.
• Fewer decisions : With this opinionated design, you have to make fewer decisions, but you can use whatever state management you want (mobX, ngrx).
• Uniformity : Every Angular application looks very similar, which reduces costs of on-boarding new developers.
• Corporate Sponsors : Google
• TypeScript : Angular uses TypeScript by default, though it's technically possible to just use JavaScript, it is not recommended.

Some features of Angular are:

• Progressive Web App support
• Lazy Loading
• Forms Library
• RxJs
• Fully featured router
• Animation Library
• SSR (Server-Side-Rendering) Support
• Mobile-friendly
• Angular Language Service (IntelliSense support build by Framework team)

Components are the main building block for Angular applications. Each component consists of:

• An HTML template that declares what renders on the page
• A Typescript class, which defines behavior
• A CSS selector that defines how the component is used in a template
• Optionally, CSS styles applied to the template

A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view, and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution.

Your application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive in order to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances.

In Angular, a template is a chunk of HTML. Within a template, you can use special syntax to leverage many of Angular's features.

Each Angular template in your app is a section of HTML that you can include as a part of the page that the browser displays. An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.

When you generate an Angular app with the Angular CLI, the app.component.html file is the default template containing placeholder HTML.

Angular offers two kinds of built-in directives: attribute directives and structural directives.

• Built-in attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components. You usually apply them to elements as if they were HTML attributes, hence the name. Examples are ngStyle , ngClass and ngModel .
• Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, and manipulating the host elements to which they are attached. For example: ngIf , ngFor and ngSwitch .

Dependencies are services or objects that a class needs to perform its function. Dependency injection is a design pattern in which a class requests dependencies from external sources rather than creating them.

The dependency injection by Angular provides dependencies to a class upon instantiation. You can use it to increase flexibility and modularity in your applications.

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates. It works with external templates in separate HTML files, and with in-line templates.