Welcome to the Angular Tutorial. We have created a simple Angular tutorial for beginners to professionals to learn the all the features of the Angular. This tutorial is for those who want to learn Angular from scratch. This Tutorial uses Typescript. Learn Angular starting from basic concepts, with simple example codes and move to advanced topics like Routers, data binding, directives, HTTP etc. This Tutorial covers Angular 2, Angular 4 & Angular 5.
What is Angular
The Angular is the latest version of the AngularJS, which is a development platform for building mobile and desktop web applications. The Angular now comes with every feature you need to build a complex and sophisticated web or mobile application. It comes with component, Directives, Forms, Pips, HTTP Services, Dependency Injection etc
Angular is a complete rewrite of AngularJS. The Early version of the Angular was named as Angular 2. Then later it was renamed to Just “Angular”. Then Angular Team releases new versions of the Angular versions Regularly and the last Version that is available is Angular 4.3.
Angular 2: Initial Release 14.09.2016
Angular 4: Release on 23.03.2017 ( current Version 4.4.6 (2017-10-18) )
Angular 5: Currently in RC 9 release 31.10.2017
You can read the latest versions at https://github.com/angular/angular/blob/master/CHANGELOG.md
Prerequisites for Angular Tutorial
We are going to use Typescript as our language. If you have knowledge of C# or Java, then you would find it very easy. Take a look at the Typescript Tutorial
Table of Content
Angular incorporated many improvements & innovations into the product. These changes make it easy to learn and develop enterprise scale applications.
2. Getting Started
- Angular Architecture Overview & Concepts
It is very important to know how the framework works before you start using it. In this article let us look at some of the important Angular building blocks & Architecture of Angular.
- Installing and Setting Up an Angular Development Environment
The AngularJs was very easy to set up and get started. That is not the case with the Angular. We need to choose our editor, choose language and find a package manager to load Angular library and all other dependent libraries.In this tutorial, we look at the editors and other libraries that we need and how to set up our development environment.
- Create Your First Angular Application
This step by step tutorial takes you through the process of creating an Angular application using Angular Command Line Interface (CLI). You can create your Angular project just using a single command. Configuration & initialization of various libraries is taken care by the Angular CLI
- Bootstrapping Angular Application
The previous tutorial uses Angular CLI to quickly generate the Angular application. In this tutorial let us look at what’s happening behind all those boilerplate codes that are generated by Angular CLI and see how Angular Application gets bootstrapped
3. Angular Components
- Introduction to Angular Components
The Component is the main building block of an Angular Application. A component contains the definition of the View and the data that defines how the View looks and behaves. In this Tutorial, we are going to look at Angular Components. We will look at the building blocks of the component and the important metadata properties of Components like selector, template, styleURL etc. We also show you how to create a simple component in Angular
- Data Binding in Angular
Data Binding is a process where data is passed from controller to view and vice versa. The Data Binding is used to bind DOM Elements to component properties. Binding can be used display component class property values to the user, change element styles, respond to a user event etc. In this Angular Tutorial, we will explore the data binding in detail
- Adding Child Component in Angular
In this tutorial, we look to Extend the Angular Application we built in Tutorial 3 (Create Angular Application using Angular CLI) by adding a child component to the existing component.
In this Introduction to Angular Directive, we are going to look at the Angular Directives. We will look at three types of directives that Angular supports like Component, Structural and Attribute Directives. We also look at the few of the most commonly used Angular directives.
The ngFor is an Angular structural directive, which repeats a portion of HTML template once per each item from an iterable list (Collection). The ngFor is similar to ngRepeat in AngularJS.
- ngSwitch Directive
The ngSwitch is an Angular structural directive, which allows us to Add/Remove DOM Element.It is similar to switch statement of C#. In this tutorial, we will look at the syntax of ngSwitch. We will show you how to use ngSwitch using an example code.
- ngIf Directive
The ngIf is an Angular Structural Directive, which allows us to Add/Remove DOM Element. It is similar to the ng-if directive of AngularJs. In this Tutorial, we will look at the syntax of ngIf. We will show you how to use ngIf using an example code.
- ngClass Directive
The ngClass Directive is an Angular Attribute Directive, which allows us to add or remove CSS classes to an HTML element. Using ngClass you can create dynamic styles in HTML pages
- ngStyle Directive
The ngStyle directive allows you to modify the style of an HTML element using the expression. In this tutorial, we will look how to use ngStyle with few examples. Using the ngStyle you can dynamically change the style of your HTML element. You also can bind these properties to components properties.
Angular pipes are the new way to Transform Data. They are similar to Filters in AngularJS. In this Tutorial, we are going to look at what is pipes are & how to use them. We will see how to pass arguments to the pipe and how to chain pipes. We are also going to look at the few of the angular built-in pipes like currency pipe, date pipe, number pipe, percent pipe, decimal pipe, slice pipe.
In this tutorial, we will look at how to create Angular Custom Pipes. We looked at Angular Pipes in our last tutorial. The Angular comes with few built-in pipes like Date pipe, Currency pipe, and Number pipe etc. But these pipes might not be sufficient to our needs. That is where you need to build a Custom pipes in Angular
7. Advanced Components
In this tutorial, we learn how Angular Passes the data to the child component. The Angular Components communicate with each other using @Input Annotation. We also look at how child components detect changes to these Input properties using OnChanges life Cycle hook or with a Property Setter.
In this tutorial, we will learn how to Pass data to Parent Component from Child Component in Angular. In the Previous tutorial, we looked at how the Parent component communicates with its child by setting its input property. The Child can send data to Parent by raising an event, Parent can interact with the child via local variable or Parent can call @ViewChild on the child. We will look at all those options in this article.
In this tutorial, we learn how to use Angular lifecycle hooks. The life cycle hooks are the methods that angular invokes on directives and components as it creates, changes, and destroys them. Using life-cycle hooks we can fine-tune the behaviour of our components during creation, update, and destruction.
In this tutorial, we will be learning how Angular ngOnInit and ngOnDestroy life cycle Hooks work. We learned about the Angular lifecycle hooks in the Previous tutorial. In This chapter let us learn ngOnInit and ngOnDestroy hooks
In this article, we are going to look at how ngOnChanges Life cycle hook works in Angular. ngOnChanges or OnChanges event fired when the Angular detects changes to the @Input properties of the Component. It gets the changes in the form of simplechanges object. We will be learning all these in this tutorial
In this tutorial, we will learn how ngDoCheck lifecycle hook works. We will find out how to keep track of the changes to @Input properties using the DoCheck hook. We also look at the how key-value differs and Iterable differs works
The data entry forms can be a very simple to very complex. The Forms contains large no of input fields, a variety of fields like Text boxes, Dates, Numbers, Emails, Password, Check Boxes, Option boxes etc. These fields can Span multiple tabs or multiple pages. Forms may also contain complex validation logic interdependent on multiple fields.
The Angular forms modules are designed to handle all of the above and lot more. The Angular Forms now supports Model Driven approach to Forms development. The older way of Template based approach is also supported
- Angular Forms Fundamental & Concepts
In the Angular Forms Tutorial, we look at the basic building blocks of the Angular Forms. These Building Blocks are FormControl, FormGroup, & FormArray. The FormControl represents a single input element along with its validation state etc. FormGroup & FormArray make it easy to group FormControls in a meaning full way. Find out all these from the above tutorial
- Template Driven Forms in Angular
The Time-tested Template Driven Forms, which we used in Angular 1 has made its way into Angular. Most of the concepts you learned have stayed the same, but the underlying system has changed and has become more efficient. Learn How to build a Template Driven forms in this tutorial
- Validation in Template Driven Forms
A Forms Model, which does not support validation is useless. The Template Driven Forms supports validation by binding directives to the Form elements. In this tutorial, learn how to add validation to the Angular Form. We are adding required & Minlength validators to a sample application.
- Model Driven Forms in Angular
The Model Driven Forms are the new way to build Data entry Forms. Here we will be writing a lot of code while building our Forms model in component class. The Component class then powers our Form. The model-driven Forms gives a lot of flexibility & power in the hands of the developer. In this tutorial, we will build a simple Angular Form using Model Driven Approach from scratch.
- Validations in Model Driven Forms
The Validation in model Driven Forms is added in the component class. In this tutorial, we will be adding required and minlength built-in validators to Model Driven form, which we built in the previous tutorial
- Angular Services
In this Angular Services tutorial, we will show you how to build a simple component that fetches the list of products from an Angular Service and display it in our template.
Our components need to access to data. You can write data access code in each component, but that is very inefficient. The Best way is to create a single reusable code and use it to retrieve data in every component that needs it. That is exactly where services come in.
- Angular dependency Injection Framework
In this tutorial, we look at how to use Angular dependency Injection Framework. We will update the service, which we created in the previous tutorial (Angular Services) to use the Dependency injection.
Angular is designed from the ground up to support and leverage dependency injection
- Angular Providers
Angular Providers allow you to define set of Dependencies. It provides the instance of dependencies to the injector when asked by the injector. We let angular know that, we have a dependency to be injected by registering the dependency with the Providers
- Angular Hierarchical Dependency Injection
In this tutorial, we will look at Angular Injector, one of the parts of the Angular dependency Injection Framework. The Angular creates a tree of injector & Providers which resembles the Component Tree. This is called hierarchical pattern.
In this Angular HTTP tutorial, We learn how to use HTTP Module to query the Remote API source to get data into our Application. We also learn how to Subscribe to the Returned response using RxJs observables.
11. Angular Router
- Routing and Navigation in Angular
In this Routing & Navigation in Angular Tutorial, we look at how navigation & Routing works in Angular using the Angular Router. We will see what routing is and the components of the Angular Router Module. We will show you how to setup and configure the router in the Angular application. Finally, we will create a sample application with four components and create menu navigation system using the Angular Router.
- Location Strategies in Angular Router
In this Tutorial, we look at the Location Strategies (browser URL styles) supported by the Angular. Angular Supports Pathlocation strategy and HashLocation Strategy. We will look at what is client side routing and how it works. We take a look at how hash style & HTML5 routing works and pros & cons of each. Finally, we will learn how to build the Angular application using the PathLocationStrategy (HTML5 routing ) & HashLocationStrategy.(hash style Routing )
- Passing Parameters to Route
In this tutorial, we look at how to pass parameters or data to the Route in Angular. We look at how to define the route, which accepts the parameter. We then learn how to pass the parameters to the route using the routerLink directive. Finally, we learn how to retrieve the parameters using the ActivatedRoute Service. The parameters can be retrieved by using the either by snapshot method or by subscribe method. We take a look at both of these methods.
- Child Routes / Nested Routes
In this tutorial, we look at how to add a child or nested routes to an Angular route. Child Routes or Nested routes are a powerful new feature in the Angular router. Nested routes are routes within other routes. In this Tutorial, we will show you how to create a child route and display the child components. The Angular allows us to nest child routes under another child routes effectively creating a Tree of routes
- Passing Optional (Query) Parameters to a route
In this tutorial, let us look at how to pass and access the Optional or query parameters in Angular. Query parameters allow you to pass optional parameters like page number to the component. In this tutorial, we look at how to pass the query parameters using the queryParams directive. We then look at how to retrieve the parameter in the component using the ActivatedRoute Service.
In this Angular Tutorial, we are going to build a small application from scratch using SystemJS module loader. The application displays “hello messages” in the browser. To do that, First, we create required config files, Use npm package manager to load Angular, Typescript, SystemJs, and other dependencies. Next, we l build a root component and then we add the root component to root Angular module. Finally, we use the Angular bootstrapper to bootstrap our application.
The Previous chapter showed how to create the Angular Application using Angular CLI & SystemJS. In this tutorial, we are going to build a small application from scratch using Webpack as our module loader.