Angular Tutorial For Beginners to Professionals

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

The Angular is a complete rewrite of AngularJS. It has some of the breaking changes like Typescript replacing Javascript, Built in Mobile Support, $scope are gone, components replacing the controllers,  Change detection has become more efficient with zone.js etc.

Angular Versions

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.

Version History

Angular 2: Initial Release   14.09.2016

Angular 4: Release on 23.03.2017

Angular 5: Currently  in beta 4 release 16.08.2017

You can read the latest versions at https://github.com/angular/angular/blob/master/CHANGELOG.md

Prerequisites for Angular Tutorial

The Angular tutorial requires a working knowledge of Javascript, HTML & CSS. It also requires the concept of OOP. Prior knowledge of AngularJs is not required.

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

Angular Tutorial

Table of Content

1.Introduction to Angular

This Introduction to Angular Tutorial gives you a glimpse of Angular. Angular is a UI framework for building mobile and desktop web applications. It is built using Javascript. You can use it to build amazing client side applications using HTML, CSS, and Javascript.

Angular incorporated many improvements & innovations into the product. These changes make it easy to learn and develop enterprise scale applications.

2. Getting Started

1. Angular Architecture Overview & ConceptsIt 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.
2. Installing and Setting Up an Angular Development EnvironmentThe 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.
3. Create Your First Angular ApplicationThis 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
4. Bootstrapping Angular ApplicationThe 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

1. 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
2. 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
3. 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.

4. Angular Directives

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 the few of the most commonly used Angular directives.

1. ngFor
   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
2. 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.
3. 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 let us look at the syntax of ngIf. We will show you how to use ngIf using an example code.
4. ngClass Directive
   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
5. 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 ngStyle you can dynamically change the style of your HTML element. You also can bind these properties to components properties.

5. Angular Pipes

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.

6. Angular Custom Pipes

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

1. Passing data to child component
2. Passing Data to Parent Component
3. Component Life Cycle
4. OnInit & OnDestroy
5. Onchanges
6. DoCheck

8. Angular Forms

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

1. 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
2. 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
3. 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.
4. 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.
5. 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

9. Angular Dependency Injection

1. Angular Services
   In this Angular Services tutorial, we will show you how to build a simple component that fetches 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.
2. 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
3. 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
4. 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.

10. Angular HTTP Tutorial

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

1. 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.
2. 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 )
3. 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.
4. 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
5. 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.

12. Create Angular Application using SystemJS

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.

13. Create Angular Application using Webpack

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.

Angular Resources

The Official Page