Learn Angular step by step (Covering Angular 2 and Angular 4) By Shivprasad Koirala (Part of Core advisory group of Indiamentor) www.indiamentor.com Contents About IndiaMentor.com ......................................................................................................................... 6 About the Author .................................................................................................................................... 6 Why should we Learn Angular ? ............................................................................................................. 7 How does this book teach you Angular ?................................................................................................ 7 Why do we need Angular ? ..................................................................................................................... 9 Lab 1:- Practicing NodeJS ...................................................................................................................... 11 Theory :- What is NodeJS ? ............................................................................................................... 11 Step 1 :- Installing NodeJs ................................................................................................................. 11 Step 2:- Practicing NPM Install command......................................................................................... 12 Step 3:- Understanding package.json file ......................................................................................... 13 Lab 2:- Practicing TypeScript ................................................................................................................. 14 Introduction :- Why do we need typescript ? ................................................................................... 14 Step 1 :- Installing typescript ............................................................................................................ 15 Step 2 :- Compiling a simple Typescript to Javascript ....................................................................... 15 Step 3 :- Using tsconfig.json file ....................................................................................................... 16 Lab 3:- Practicing VS Code ..................................................................................................................... 17 What is VS Code? .............................................................................................................................. 17 Point number 1 :- All actions happens in a folder ............................................................................ 17 Point number 2 :- Creating files and folders ..................................................................................... 18 Point number 3 :- Explorer and Open Editors ................................................................................... 18 Point number 4:- Reveal in explorer ................................................................................................. 19 Point number 5: - Integrated terminal.............................................................................................. 19 Lab 4:- Understanding Module loaders using SystemJs....................................................................... 20 Step 1 :- TypeScript Modules and Import / Export keywords .......................................................... 20 Step 2 :- Module formats in JavaScript CommonJS , AMD , ES6 ....................................................... 21 Step 3 :- Calling Javascript module loaders in HTML UI .................................................................... 24 Lab 5:- Components and Modules ( Running your first Angular Application) ...................................... 26 Introduction ...................................................................................................................................... 26 Step 1:- NPM install to get Angular framework ................................................................................ 27 Step 2:- Typescript configuration tsconfig.json ................................................................................ 29 Step 3:- Configuring SystemJS module loader .................................................................................. 30 Step 4:- Configuring the task runner ................................................................................................. 31 Understanding Angular Component and module architecture ........................................................ 33 Step 5:- Following MVW Step by Step – Creating the folders .......................................................... 34 Step 6:- Creating the model .............................................................................................................. 35 Step 7:- Creating the Component ..................................................................................................... 36 Step 8:- Creating the Customer HTML UI – Directives and Interpolation ......................................... 39 Step 9:- Creating the Module ............................................................................................................ 40 Step 10:- Creating the “Startup.ts” file ............................................................................................. 42 Step 11:- Invoking “Startup.ts” file using main angular page ........................................................... 42 Step 12:- Installing http-server and running the application ............................................................ 44 How to the run the source code? ..................................................................................................... 45 Lab 6:- Implementing SPA using Angular routing ................................................................................. 45 Fundamental of Single page application ........................................................................................... 45 Step 1 :- Creating the Master Page ................................................................................................... 46 Step 2:- Creating the Supplier page and welcome page .................................................................. 47 Step 3:- Renaming placeholder in Index.html ................................................................................... 48 Step 4:- Removing selector from CustomerComponent................................................................... 48 Step 5:- Creating Components for Master , Supplier and Welcome page ........................................ 49 Step 6: - Creating the routing constant collection ............................................................................ 50 Step 7: - Defining routerLink and router-outlet ................................................................................ 52 Step 8:- Loading the routing in Main modules ................................................................................. 53 Step 9:- Seeing the output ................................................................................................................ 54 Step 10:- Fixing Cannot match any routes error ............................................................................... 55 Understanding the flow .................................................................................................................... 55 Lab 7 :- Implementing validation using Angular form .......................................................................... 56 Requirement of a good validation structure .................................................................................... 56 There are 3 broader steps to implement Angular validation ........................................................... 57 What kind of validation will we implement in this Lab ? .................................................................. 57 Where to put Validations ? ............................................................................................................... 57 Step 1 :- Import necessary components for Angular validators ....................................................... 58 Step 2 :- Create FormGroup using FormBuilder ............................................................................... 58 Step 3 :- Adding a simple validation .................................................................................................. 58 Step 4 :- Adding a composite validation ........................................................................................... 59 Full Model code with validation........................................................................................................ 59 Step 5 :- Apply formGroup to HTML form ........................................................................................ 60 Step 6:- Apply validations to HTML control ...................................................................................... 60 Step 7:- Check if Validations are ok .................................................................................................. 60 Step 8:- Checking individual validations ........................................................................................... 61 Step 9 :- standalone elements .......................................................................................................... 61 Complete code of Customer UI with validations applied ................................................................. 63 Run and see your validation in action ............................................................................................... 64 Dirty , pristine , touched and untouched .......................................................................................... 64 Lab 8 :- Making HTTP calls..................................................................................................................... 65 Importance of server side interaction .............................................................................................. 65 Yes , this is a pure Angular book ....................................................................................................... 65 Step 1 :- Creating a fake server side service ..................................................................................... 65 Step 2 :- Importing HTTP and WebAPI module in to main module .................................................. 67 Where do we put the HTTP call ? ..................................................................................................... 67 Step 3 :- Importing HTTP in the Customer component .................................................................... 68 Step 4:- Creating header and request information ........................................................................... 68 Step 5 :- Making HTTP calls and observables .................................................................................... 69 Step 6 :- Creating a simple post and get call .................................................................................... 69 Step 7 :- Connecting components to User interface ......................................................................... 71 Lab 9:- Input, Output and emitters ....................................................................................................... 72 Theory ............................................................................................................................................... 72 Planning how the component will look like ...................................................................................... 73 Step 1 :- Import input , output and Event Emitter ............................................................................ 73 Step 2 :- Creating the reusable GridComponent class ...................................................................... 73 Step 3 :- Defining inputs and output ................................................................................................. 74 Step 4 :- Defining Event emitters ...................................................................................................... 75 Step 5 :- Creating UI for the reusable component ............................................................................ 76 Step 6 :- Consuming the component in the customer UI ................................................................. 78 Step 7 :- Creating events in the main Customer component ........................................................... 78 Step 8 :- Defining the component in the mainmodule ..................................................................... 79 Lab 10:- Lazy loading using dynamic routes ......................................................................................... 79 Theory ............................................................................................................................................... 79 Step 1 :- Creating three different physical modules ........................................................................ 80 Step 2 :- Removing Supplier and Customercomponent from MainModule ..................................... 81 Step 3 :- Creating different Route files ............................................................................................. 82 Step 4 :- Calling Child routes in Supplier and Customer modules .................................................... 85 Step 5 :- Configuring routerlinks ....................................................................................................... 86 Step 6 :- Replacing browser module with common module ............................................................ 87 Step 7 :- Check if Lazy loading is working ......................................................................................... 89 Acronym used in this book.................................................................................................................... 90 About IndiaMentor.com Indiamentor is a community for all Indian Mentors of various fields. Whoever walk with great people will be great. But those who dare read the history of great men and women will be greater. Every mentor has many stories to share which will guide you to succeed in your journey of life. Great mentorship is priceless. By starting this community, we salute all our Indian Mentors. “Know about great legends of India. Who made history with their hard work and dedication”. IndiaMentor is proud to support everyone in various fields for their various activities. We’d like to help you in your areas/fields so that you can continue to make a positive impact on the healthy development of a new era. Do visit us at www.indiamentor.com for more details. About the Author Mr Shivprasad Koirala is an ex-MVP , an author and a programmer. He runs www.questpond.com and also he is in core advisory group of www.Indiamentor.com . This ebook would not have seen light if India Mentor was not backing it up. I would like to thank Mr. Gaurav Arora and team for the great effort they have put in building this initiative. You can catch his Learn Angular in 8 hours step by step video series from https://www.youtube.com/watch?v=oMgvi-AV-eY Why should we Learn Angular ? Why should we learn Angular? , the below stack overflow graph says it all. Its popular, its hot with lot of job openings. This book teaches your Angular step by step via 10 great Labs. So if you are here to learn Angular then you are at the right place and with the right book. AngularJS vs Angular. There are two versions of Angular the old is named as AngularJS and the new one is name as just Angular. So when someone says AngularJS it means Angular 1.X and when some says JUST Angular its Angular 2/4. How does this book teach you Angular ? The best way to learn Angular or any new technology is by creating a project. So in this step by step series we will be creating a simple Customer data entry screen project. This project will have the following features:-  Application should have capability of accepting three fields Customer name , Customer and Customer Amount values.  Customer name and Customer codes are compulsory fields and it should be validated.  Application will have a “Add” button which help us to post the current customer data to a Server. Once the data is added to the server it should displayed on the grid.  Application will have a navigation structure where in we will have logo and company name at the top , navigational link at the left and copy right details at the bottom of the screen. So above is the road map of this book. It has three phases: - Theory Phase :- In this phase we will understand what is Angular and why do we need it. Pre-requiste phase :-In this phase we will four important things Node , Typescript , VSCode and Module loaders ( systemJS). Main learning phase :- This is where actual angular starts.In this we will be having 7 labs and while covering those labs we will creating the customer data entry screen project as discussed previously. So do not wait any more start LAB by LAB and STEP by STEP. Should I start from Angular 1, 2 or 4. Angular 1.X and 2.X are very much different. So even if you have done Angular 1.X you have to restart fresh from Angular 2.X. Angular 2.X and Angular 4.X are backward compatible so if you are learning Angular 2 you are learning Angular 4 and ahead. So people who are new to Angular just start from Angular 4 and this book teaches Angular 4. Why do we need Angular ? “Angular is an open source JavaScript framework which simplifies binding code between JavaScript objects and HTML UI elements.” Let us try to understand the above definition with simple sample code. Below is a simple “Customer” function with “CustomerName” property. We have also created an object called as “Cust” which is of “Customer” class type. function Customer() { this.CustomerName = "AngularInterview"; } var Cust = new Customer(); Now let us say in the above customer object we want to bind to a HTML text box called as “TxtCustomerName”. In other words when we change something in the HTML text box the customer object should get updated and when something is changed internally in the customer object the UI should get updated. <input type=text id="TxtCustomerName" onchange="UitoObject()"/> So in order to achieve this communication between UI to object developers end up writing functions as shown below. “UitoObject” function takes data from UI and sets it to the object while the other function “ObjecttoUI” takes data from the object and sets it to UI. function UitoObject() { Cust.CustomerName = $("#TxtCustomerName").val(); } function ObjecttoUi() { $("#TxtCustomerName").val(Cust.CustomerName); } So if we analyze the above code visually it looks something as shown below. Your both functions are nothing but binding code logic which transfers data from UI to object and vice versa. Binding Code Now the same above code can be written in Angular as shown below. So now whatever you type in the textbox updates the “Customer” object and when the “Customer” object gets updated it also updates the UI. <input type=text [(ngModel)]="Customer.CustomerName"/> In short if you now analyze the above code visually you end up with something as shown in the below figure.You have the VIEW which is in HTML, your MODEL objects which are javascript functions and the binding code in Angular. Now that binding code have different vocabularies.  Some developers called it “ViewModel” because it connects the “Model” and the “View” .  Some call it “Presenter” because this logic is nothing but presentation logic.  Some term it has “Controller” because it controls how the view and the model will communicate. To avoid this vocabulary confusion Angular team has termed this code as “Whatever”. It’s that “Whatever” code which binds the UI and the Model. That’s why you will hear lot of developers saying Angular implements “MVW” architecture. So concluding the whole goal of Angular is Binding, Binding and Binding.