Short Intro to Angular
Angular is less popular than Vue.js and React.
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/cliCreate your first project in Angular
ng new my-first-projectcd my-first-projectng 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!
