Short Intro to Angular

Angular GitHub Repo

Angular Documentation

Angular is less popular than Vue.js and React.

npm trends

Angular is the modern web developer’s platform, according to their website.

Google released the Angular version 1.0 in the year 2010. Angular version 2.0 was launched in September 2016 as a complete rewrite of AngularJS.

Angular is a development platform, built on TypeScript.

It includes:

• Component-based framework for building scalable web applications
• A collection of integrated libraries that cover a wide range of features, including routing, form management, client-server communication
• A suite for developer tools to develop, build, test and update your code

Projects in Angular are structured into Modules, Components and Services.

Components

Each component contains a template, a class that defines the application logic and decorators.

An angular decorator is a function, that add meta data, properties or functions, eg. @Component @Directive

The @Component() decorator specifies the following Angular-specific information:

• A CSS selector that defines how the component is used in a template. HTML elements in your template that match this selector become instances of the component.
• An HTML template that instructs Angular how to render the component
• An optional set of CSS styles that define the appearance of the template’s HTML elements

The following is a minimal Angular component. To use this component, you write the following in a template.

Templates

Templates are written in HTML

Every component has an HTML template that declares how that component renders.

You can insert dynamic text by using the mustache syntax.

<p>{{ message }}</p>

The value for message comes from the component class

Services

Services are used by components to delegate business-logic tasks such as fetching data or validating input.

Components shouldn’t fetch or save data directly.

Services are a great way to share information among classes.

Run this to create a new service:

ng generate service <service-name>

Example on StackBlitz for a Service

Directives

Directives are classes that add additional behavior to elements in your Angular applications.

ngIf

<app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>

ngFor

<div *ngFor="let item of items">{{item.name}}</div>

Get started

The Angular CLI is the fastest, straightforward, and recommended way to develop Angular applications.

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

Installing Angular CLI

npm install -g @angular/cli

Create your first project in Angular

ng new my-first-project
cd my-first-project
ng serve

Add new component

ng generate component <component-name>

By default, this command creates the following:

• A folder named after the component
• A component file, <component-name>.component.ts
• A template file, <component-name>.component.html
• A CSS file, <component-name>.component.css
• A testing specification file, <component-name>.component.spec.ts

Now you can start creating your own components!