Getting started with Angular

What is Angular and why does it exist?

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. 🤣

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

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.

Hello World App with Angular 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

The --open (or just -o) option automatically opens your browser to http://localhost:4200/. The standard port in Angular applications is 4200.

Benefits & Features of Angular

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

Benefits of Angular

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.

Features of Angular

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)

Angular Architecture

Components

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

Component Lifecycle

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.

Templates

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.

Directives

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.

Dependency Injection

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.

Angular Tools

Ahead-of-time (AOT) compilation

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.

Server-side rendering (SSR) with Angular Universal

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.

Angular Language Service

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.

Sample Project

The Angular docs provide extensive sample projects. Why don't you start to build the Tour of Heroes app (details in the Angular docs), to get a basic understanding of how Angular works?

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.

If you want to know more about Angular, have a look at these Angular Tutorials.

References (and Big thanks): Google - Angular Guide, Joe Eames