Welcome to the Angular 2+ Tutorial. This Tutorial covers all version of Angular Starting from Angular 2, Angular 4, Angular 5, Angular 6, Angular 7 & Angular 8. We have created a simple and step by step tutorial for beginners to learn the all the features of the Angular.The tutorial also covers the some of the advanced features of Angular
This Tutorial Applies to: Angular 2 Tutorial, Angular 4 Tutorial, Angular 5 Tutorial, Angular 6 Tutorial & Angular 7 Tutorial, Angular 8 Tutorial
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 features like component, Directives, Forms, Pipes, HTTP Services, Dependency Injection etc
Angular Versions
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 7.2.1.
The Angular 8 Beta version is released on 16.01.2019
Version History
Angular Version | Date | Description |
---|---|---|
Angular 2 | 14.09.2016 | Initial Version of Angular |
Angular 4 | 23.03.2017 | |
Angular 5 | 11.11.2017 | Version 5 |
Angular 6 | 03-05-2018 | Version 6 |
Angular 7 | 18-10-2018 | Version 7 |
Angular 7.2.1 | 16-01-2019 | Latest Version |
Angular 8 Beta | 16-01-2019 | Beta Version of Angular 8 |
You can read the latest versions at https://github.com/angular/angular/blob/master/CHANGELOG.md
Prerequisites
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
Table of Content
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.
Recommended Books:
The Best Books On Angular.
The 8 Best Angular Books, which helps you to get started with Angular.
Architecture and Concepts
It is very important to know how the Angular framework works before you start using it. A Typical Angular Application looks like a Tree of Components.
Installing and Setting up 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.
Creating 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. Angular CLI takes care of Configuration & initialization of various libraries.
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. The Angular Components are plain javascript classes and defined using @component Decorator. This Decorator provides the component with the View to display & Metadata about the class
The Component passes the data to the view using a process called Data Binding. This is done by Binding the 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.
Directives
The Angular directive helps us to manipulate the DOM. You can change the appearance, behavior or a layout of a DOM element using the Directives. They help you to extend HTML. The Angular directives are classified into three categories based on how they behave. They are Component, Structural and Attribute 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 ngSwitch allows us to Add/Remove DOM Element. It is similar to switch statement of C#. The ngIf allows us to Add/Remove DOM Element.
The ngClass Directive is an Angular Attribute Directive, which allows us to add or remove CSS classes to an HTML element. The ngStyle directive allows you to modify the style of an HTML element using the expression. Using the ngStyle you can dynamically change the style of your HTML element.
Pipes
The Angular pipes are used to Transform the Data. For Example, the Date pipe formats the date according to locale rules. We can pass arguments to pipe and chain pipes. The Angular also allows us to create the Custom Pipe
Component Communication
The Components are useless if they do not share data between them. The Parent Component communicates with the child component using the @Input Annotation. The child components detect changes to these Input properties using OnChanges life Cycle hook or with a Property Setter. The child component can communicate with the parent by raising an event, which the parent can listen.
Component Life Cycle Hook
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.
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
- Angular Forms Fundamental & Concepts
- Template Driven Forms in Angular
- Validation in Template Driven Forms
- Model Driven Forms in Angular
- Validations in Model Driven Forms
Services & Dependency Injection
Services allow us to create a reusable code and use it every component that needs it. The Services can be injected into components and other services using the dependency injection system. The dependencies are declared in the Module using the Providers metadata. The Angular creates a tree of injector & Providers which resembles the Component Tree. This is called the hierarchical pattern.
- Services
- Dependency injection
- Injector, @Injectable & @Inject
- Providers
- Hierarchical Dependency Injection
HTTP
The newly designed HttpClient Module allows us to query the Remote API source to get data into our Application. It requires us to Subscribe to the returned response using RxJs observables.
Router
The Router module handles the navigation & Routing in Angular. The Routing allows you to move from one part of the application to another part or one View to another View.
- Routing and Navigation in Angular
- Location Strategies in Angular Router
- Passing Parameters to Route
- Child Routes / Nested Routes
- Passing Optional (Query) Parameters to a route
- Navigation between Routes
- Angular Route Guards
Angular Module
- Introduction to Angular Modules
- Routing Between Angular Modules
- Angular folder structure : Best Practices
- Lazy Loading in Angular
- Preloading Strategy
- CanLoad Guard
Styling the Application
The Angular uses the several different ways to style the Application. You can style the app globally and then override it locally in the component very easily. The component styles have local scope, which is achieved using the various View Encapsulation strategies. Learn all these in the section
- Angular Global Styles
- View Encapsulation
- Style binding in Angular
- Class Binding in Angular
- Component Styles
Configuration
Handling Errors
Angular CLI
Learn how to use Angular CLI to speed up development of Angular Application
Module Loaders
The Angular application can use either SystemJs or Webpack module loader. We will demonstrate a how to make use of both the Loader by building a small application.
Easily Understandable. Thanks, Can you please provide a good example of making complete app from start to end like: Step by step of making Header, Navigation, Content area and Footer so that one can easily make a app after seeing that.
Thanks for the feedback. We will definitely do a complete app
one of the best tutorial 🙂 among other site what i have seen
Could you please include ‘Lazy loading’ ?
good
great tutorial
Easily Understandable. Thanks, Can you please provide a good example of making complete app from start to end like: Step by step of making Header, Navigation, Content area and Footer so that one can easily make a app after seeing that.
easily understandable tutorial. Please provide reactJs tutorial. thank you
Thank you, Tutorial on NativeScript is next.
Simply super tutorial
Great Work!!
awesome tutorial
Extremely good tutorial! Thank you!