 Hey guys, so I want this session to be more interactive, you can ask me any question, any doubt during the whole session we will be going through. At the structure of our session, the 3 hours will be, first 20-25 minutes I will be sharing more over an introduction to Angular 2. I guess a couple of you are already working on Angular 2 so you would not need this but for the benefit of everyone who has not heard of Angular 2 or has not worked on Angular before, I will be introducing this. So, then after the introduction of these 20 minutes, then we will just open to a hands-on session. So, for the very easy use case of a basic thread application and we all know that almost all applications need an enterprise app, a personal project or a commercial project requires these basic operations like you want to show a list of objects, you want to edit a particular object out of them or you want to create a new object using a form or something. So, we will do a hands-on for 1 hour about how we will code an Angular app from scratch and build a great application. Then I will be talking about the migration, the major pain point of any developer today who is planning to learn Angular 2 or adopting Angular 2 is that most of you guys in the past 1 year could have shifted from some backend thing or some other to Angular 1. And now Angular 2 says that now Angular 1, the next one of Angular is not supported by or is not migratable. So, how will we actually migrate our all Angular apps, Angular 1 apps to Angular 2? We just discussed some migration strategies around that. So, then post my session, we will see the other speaker, we will see Lucif will come and he will be speaking about how you can take any Angular 2 application and create a professor web app around that application. That will be also very interesting. So, this is how our 3 hours will go. So, just quickly wanted to discuss about how we have seen the web evolution of web going forward like from static HTML pages to dynamic PHP applications or dynamic CMS systems where there was advent of Drupal, Joongla, WordPress, Magento, all of these things made it more like the web was now not of static information but more of user curated content. So, the web 2.0 world was more like the world web of the users by the users for the users and stuff like that. Then came an era of ok now the dynamic content was there. Every user was blogging something, never curating the content, creating dynamic websites but now those dynamic information was also becoming very monotonous. So, the web needed some very engaging user experiences. Then came an era of rich internet applications. How many of you have heard of RIA apps, RIA rich internet applications? They were called. And if anyone can name two important technologies that were or any two or three technologies that were very important regarding this. Anyone can tell me that RIA apps what you say rich internet applications? Which were the main technologies that were focusing on building a rich internet application flash? Flash, yeah. So, it was back then macro media flash but now it is Adobe flash. Any other technology? Any other? Xtra was maybe you can say later but not completely. Silver light, yeah. So, macro media flash, silver light, Adobe. These all were applications where in the browser you could make very engaging user experiences but there was a downside that you needed a plugin for them. There was a flash plugin, there was an Adobe plugin. So, those experiences were not native to the web. A separate run time or a separate plugin runs your code or any other third party language. Like macro media flash, you used action script or your silver light, you used C sharp and Rammel and Adobe use something else. Web was not native or the rich internet experience was not native to HTML or web technologies per se. Then came the era of CSS3 animations, responsive design and what not which made possible for you to create rich engaging experiences on the web itself using the native web technologies like HTML5, CSS3, JavaScript. So, now you don't need all these plugin based systems which were creating a havoc for users to install these systems to get access to these engaging experiences. And we all know that in the past two years the experiences have been more performant and more engaging with the advent of best practices and new frameworks in the front end world which we all use as single page apps that we load an app once or we load a page once and then we just work upon the same UI or use the same user experience. So, what are single page apps? Why do we want to use single page apps per se? So, if you are 10 years but even 5-6 years earlier if you used to open up computers or laptops we probably went to a program, I don't even remember program What was it called in Windows? All programs All programs or there was program manager I guess or something So, we used to find some, I meant that we used to use some native desktop apps to open some news reader or any kind of native app But right now if you open your laptops, what do you open first? I guess all could have directly opened Google Chrome or Google Chrome could have been opened in your app So, now the citizen of your user experience or that factor for using any kind of software So, if I talk about software in terms of now, you would not talk to anyone regarding software regarding the native app on a MacBook or on a Windows desktop app but you will talk about web app So, web app have become the de facto software as per standards So, the single page app concept was more responsible because the single page app feels more like a native app of a desktop experience or a native OS experience Am I right? So, one app like user experience then the single page applications enabled us some constructs in which we could have more robust client-side logic So, and again then the next thing is all the single page apps should have proper navigation history so that you can represent a state of your view with a route so that you can share the app state or you can share that link with someone so that he can come to that particular state directly So, this is a very important paradigm of a single page app person then your single page app should also support offline things it should also have dynamic templates and data binding that you could have a common template to show different kind of data So, for example, you are showing a user profile you can use a sample template of a user profile and bind the data of any user and then display that data or that view onto your browser Then there should be very nice animating or few transitions between different routes and views and one other concept is nested views of single page apps So, your single page app is with some main views and then having some nested reusable views along with them I guess you might have used kind of some routing mechanism So, every single page app framework has either in-built or community supported routed along with it which can help you create these like routable views or nested views So, just raise your hand how many apps you have used Angular 1 So, I guess 70% of you have used Angular 1 So, if someone can tell me what are the most or the biggest pain points of Angular 1 which you have faced in building some large-scale application or some enterprise app Compile time errors Not compile time, I can say that People give the exception that come Anything else? So, I know that this is a big problem You always see that digest loop has occurred this many times You don't know why the digest loop has occurred this many times or what is the reason for causing it And you get some URL AngularJS.org website that takes you to this and that's a generic message for every exception and you don't know what to do with that That is the biggest pain point Any other pain point? Guys, all of you have used AngularJS At some point in time gets frustrating You must come up with some pain points But I would think that you don't need Angular 2 If you are so happy with Angular 1 The biggest nightmare is that you can share any one scope with any other person You can share or you can call the root scope into any controller So, that was a nightmare that developers exploited Developers for their use of development at that particular moment If frustrated the developer will be working on that project two months down the line I know because I have worked on some projects which were developed by earlier developers and it is a painstaking to know that which scope or which event is affecting which view or something That's such a big problem So, again the problem is that Angular 1 gave the developer control of adding any watcher anywhere So, that means that Angular have to do the dirty checking of watching every watcher and then seeing that if some watcher again affects some other So, just rehydrating that cycle till the application is stable And that creates such a problem that if there one state or one scope is watching the variable of other scope and the same for a watcher is watching it back it could create an indefinite loop and your application would get stuck Again, one more thing is that life cycle of Angular 1 app is so complex that when there is a route change start when your view come into the route when your directors get initialized and earlier there was no concept of components so it was very difficult Then we have this scope inheritance was a problem Then the painstaking digest cycle and dollar are blank We never knew if something could have So, I remember most of the developers if we called it something and something was not displaying on the UI we just did that Now everything will display That was a very bad practice Without knowing you didn't know what to do I don't blame you guys but blame the founders or blame the people who made that thing possible and gave it to the developers We already discussed about excessive watchers Then no input nested routing The nested router which we had to use in Angular 1 was a third party router And the ng if and ng repeat Not ng if I would say ng if was better but I guess ng show and ng repeat were the biggest benefits Right? So ng show we used like anything And ng show means that So if you have an app and if you have like five different views of that app and you want that only one view should be shown at one moment from that particular controller or base If you apply ng show all the five would have been into your DOM And if your page was complex enough that your DOM was bloated up with thousands of elements every time ng if was better And same with ng repeat ng repeat would blindly re-render every time any of your list items or any of your changes were deep So one thing which we never tried to use or initial application developers never thought of using was track-by optimization that anyone should have used from the beginning of your first hello world application But I guess there were not enough tutorials or demo apps where they were using track-by out of the box So everyone kindly followed that track-by should not be used and we can use directly then We won't know that using track-by simply enables you to not re-render your whole application because Angular would track your ng-repeat list by the unique key you bind with with a particular row So much of pain Okay, so you know that even more pain was there Suggested that you can't migrate your app from Angular 1 to Angular 2 and Angular 2 was a rewrite of I guess the developer community sent so many hit-read messages to the builders of So you are saying that the next version of Angular won't be a direct path from Angular 1 and everyone had to do something else to do Angular 2 So Angular 2 team not Angular 2 but just Angular 2 So from now on this presentation also I refer it to Angular only So now if you refer to it can be called AngularJS and if you refer to any version that is like after 2 that will be referred to the first class citizen or the main goal of your secondary goals like inbuilt there should be some conventions in which you should write your Angular 2 apps and such like that you write once and then run anywhere then you should write a port once only because the logic remains same across all platforms only some part of your rendering or your styling is different for each platform So out of the box Angular should support some constructs in which you can write a port bus and then run it across high smartwatches and performance speed and performance along with the basic core application architecture they wanted to support universal rendering use of service workers and barracks and stuff like that and then pitch take of people who have switched from back end development to front end development feel that the absence of tooling in front end is the biggest like it is the biggest hindrance of those developers moving to the front end apps you guys who have used visual studio or eclipse or something when you move towards a given sublime text without any plugins you feel what the heck I am doing here I can't even go to a particular file and see search from the corridor inspect that particular corridor add a debug point in my so one is that this Angular 2 team has not a lot about collaborating with multiple things and getting a better tooling for that for that we launched the incredible CLA we launched a Chrome Dev extension called Augury that is your Chrome inspector and then a lot of other things like static code analyzer 2.0 by millions and it has been now supported by millions of developers worldwide who earlier shifted from Angular 1 to Angular 2 react or some other framework, meanwhile Angular was being developed. But after Angular 2 has been released and seen the performance of Angular 2, people are now, Angular is made. You know that JavaScript is at core of framework per se. But now JavaScript, as we know, is not being used in all of our frameworks and all. And the current version of JavaScript is not even ES6, it's an old slide that has been made. Now ES7 and now it will be called only ECMAScript because ECMAScript has decided that it will be releasing the new features in a very short time span, approximately yearly. And all the next features that will be coming are called ES.next. And all the features that have been developed, launched in 2015 are called ES6. And all the features that have been released in 2016 are called ES7. But we don't refer them now by ES6 or ES7. So, again, this TS, can someone tell you what is TS? Yes, it is TS. So, do you guys know when it started, it was not using TypeScript? Principles taking from the... 80script. 80script, yeah. So the Google team, internally for type checking and this, but developing an ecosystem or a superset of JavaScript called Adscript, 80script. People at Microsoft have been using TypeScript to internally, like, give typing to their JavaScript apps. So, now everyone thought the Google and Microsoft collaborated on this and thought that why we are reinventing the wheel and why we are doing the same things, apparently, we should collaborate so that our powers become more and the community can get a better thing. So, TypeScript, they collaborated and said that we'll... Google said that we'll stop the development of Adscript and whatever features we want you to develop in Adscript, we should together form in TypeScript and Microsoft also said, okay, we'll open source TypeScript and everything the community can develop on TypeScript. So, TypeScript was open sourced. Now TypeScript is at the core of Angular 2. Although it is not a necessity, you can write Angular 2 code without TypeScript also, but all the examples, all the samples online you would get will be with TypeScript, so I would suggest you use TypeScript. And literally, in fact, a variable you would give polar and the type of that particular variable, what should be the type of a variable? The type of a variable can be of a primitive type, like string, boolean, undefined, null, void, or it can be of a composite type like some class you have made or some interface you have made. So, it is a normal... So, TypeScript is just a super sort of JavaScript bringing good parts of computer science principles like classes, interfaces and types to your JavaScript code. If you used any JavaScript which you write normally, it can be written in TypeScript. There is no difference. So, people generally get scared that TypeScript now we have to learn a new language. It is not new, it is same JavaScript, it is same ESX, just adding types to your variables or whatever you are passing because it gives you a benefit of reducing your errors 50 percent because your 50 percent error can be like unconventional or unintentional mistakes that you make in your code. So, at the compile time only, it will check that this type is being passed properly or not and it will provide you compile time. The next is end. It is node package manager. It is like we include JAR files, include DLL files in .NET. Similarly, then we have some testing frameworks along with Angular 2 which is Jasmine and Mocha or Karma and some other tools. One is the test runner which runs your test and the other is your scripting language in which you write your tests. So, now if you guys have followed Angular 2 from last one year initially when Angular 2 was being developed it was a very complex way of setting up a Angular 2 app. I guess most of you might know it was very difficult you had to do system dot import something or not. Now, it is very easy. So, we not follow the old setup. The new setup we will be using Angular CLI today post this session whatever workshop we will be doing we will be using Angular CLI. So, meanwhile we are having this session. I guess most of you have Node.js installed in your system. So, Angular CLI is very easy to use with simple commands. There are a lot of scaffolding providers in that. Some commands which will create some scaffolding templates for different constructs like components, services and stuff like that. It will automatically apps e-commerce apps which have like hundreds of products and each of your dynamic products should be indexed by the search engine so that their results come on Google. So, universal rendering supports that every dynamic route has its own SEO tags and is SEO-optimizing. The next thing is the Angular mobile and the progressive web app. So, Angular thinks that this mobile support should be out of the box because these days any Angular app or any web app per se is most of the time open on mobile devices rather than being opened on your web devices. So, any app should support proper responsive design as well as proper enriching user experience on mobile as well. So, they have like you can create a mobile specific Angular project by moving your dash dash mobile set up. This is an old URL, don't go by this material. Now, Angular team has taken the Angular material into their own hands and now you can access the material components of Angular using material.angular.io. So, now just discussing a few things about how Angular 2 achieves the speed and performance. One more interesting question I want to ask. How many of you use Angular 1? Then when Angular 2 was not there for one year thought about shifting to React.js or some other like Ember.js or some other. How many of you? We shifted to React. You shifted already. So, most of the teams have worked upon or have interacted with each other. They thought that now Angular 2 will come but everyone in the world, in the front end world was intrigued by the virtual diffing concept of everyone knew that the most expensive operation on your front end app is dog manipulation. You can't do excessive dog manipulation in your single page app. It will not be performant in it. And that virtual diffing algorithm, it was a simple algorithm. No one thought of it about that we should only do minimal dog manipulations. So, the same principle was thought about by the Angular 2 team as well. So, there is a system called change detection in which Angular also sort of does very intelligent detection of whatever dog changes need to be actually applied on your dog or whatever your component hierarchy change has occurred or not. Okay. Then, talking about code splitting, this is like your code, the user should be able to load only the code which is required for that particular view and not your full bundle file. This has been supported by the bundling processes and all. And Angular 2 has optimized the default bundling process that has been coming in the Angular CLI. Then the code generation CLI, CLI, Selbert, Embrym, ahead-of-time evaluation, these are all some features which Angular 2 team decided on to make Angular 2 more performant enough. And then using tree shaking, another important concept. I think these are very advanced topics. I am just telling you how Angular 2 is faster than other. Today, we will mostly cover on the basics and how to make a simple credit application using Angular 2. So now, these days the front-end libraries are more of a view framework in your MPC pattern. It is more like just the rendering part of it. Along with the rendering part of it, you would need some extra library to manage your state of your application or the data flowing in your application. So generally, Angular 2 has good examples of supporting these all libraries like Firebase, Angular 5, real-time databases. Then Angular, Meteor, Apollo, Apollo is a concept where Angular 2 can be integrated with GraphQL. Then you have support for ARAx.js out of the box in Angular 2 that ARAx.js is a reactive data management library which you can use. Then Angular 2 Redux, Redux is a very nice state management library which most of the React apps are using. So Angular 2 has integrations of support from community side, not from maybe the core team but from community side integrating to all of these libraries. Then the problem was Angular 2 cross-platform. Ionic, how many of you have worked on Ionic? Okay, couple of you. So, now we also need that the same web application we run should be running on different mobile devices or different platforms per se. So Angular 2 had this in mind that we should support these cross-platform things out of the box. So they had some principles in mind and they decided with the largest frameworks in the community. So the largest framework in the Angular community for hybrid apps was Ionic. So they collaborated a lot with Ionic team so that the Ionic 2 version should much inclined with the Angular 2 principles and the Ionic 2 should be very performant enough for hybrid apps. So Ionic 2 is a platform where you can use some people have even tried React Native with Angular 2. So I don't know how they have tried but they have tried. Another important thing is native script for Angular 2. So native script is a framework in which you can write an Angular 2 app. The same Angular 2 app will have a mapping, one-to-one mapping with the native component. So ultimately on your mobile devices the native components of that OS like in iOS you have iOS native components and in Android you have native Android SDK components or Java view components. So whatever you write in Angular will be mapped to the view components in that specific 2S language. And the other part of it leaving the mobile part we also want to run our web apps as native apps on desktops as a Windows EXE file or as a Mac file or as a Linux file. So Electrons is a framework that could support out of the box. And Angular 2 has a lot of examples along creating a universal Windows apps or creating an Electrons app. Just 2 lines. So now discussing about what is the core structure of the core architecture of Angular 2 app. So the major change from Angular 1 or change from a generic UF framework to Angular 2 is thinking about our web apps as not a set of pages but a hierarchy of components. So our whole application we should not now think as a set of pages or a set of some views that change randomly. But we should think that our whole application is a root application when we have some different bunch of views or states in them and that states should be bind up with a particular component that should drill down in a proper hierarchical manner in a hierarchical structure. So in Angular 2 we think of our root application as an app component like our whole application is a component in itself that we call it we can call it anything. I'm just saying an example you can call it an app component. If it is a crud app component if it is an e-commerce app component. So your whole application can be a root component and then probably in the most practical scenarios after your root component so your root component or your module will have so okay before the router you may have a layout for the component for your app. Then your app only there are some fixed parts of your app like your header, your footer or something. The app will have a layout component where you could have a master kind of a scenario if you are a master you can have a nested component which will have it around in itself. So by nesting these components even you can nest routes as well. So you won't need nested router but say from Angular 1. So your annual app should be component. So component is the helm of affairs any component. So now we will talk about the structure of all other constructs of Angular 2. So there is one component class or you can say a plain JavaScript function. It is an object in JavaScript. That object in JavaScript will define the behavior of your component so the behavior of a component is generally some initialization data massaging which you do or just some event handling like in your component if there are some browser events or there are some user interaction events how will you handle it or if you want to make some request to the server to get some data and then display some data right. Anything else? So now after you define this behavior in a component in the function you want to render the actual structure on your browser. That is done via a template which contains your HTML code on your markup code which will display elements or display the visual things on your browser right. So earlier whatever one achieved it was bad. So that's why we should not implement leap of that digest cycle pattern. So how Angular 2 does is we will see how just starting. Just taking one two minutes. So in Angular 1 what they do is anyone could attach a watcher to a particular JavaScript object and the DOM will get updated regarding that watcher and the same thing that your JavaScript object was watching the input elements some in the DOM whatever DOM changes it updated accordingly and this was creating a cycle in Angular 1 it was not hierarchical in nature. So this anyone could add a watcher to anytime or anyone else. So that created a problem of maintaining this whole list of watchers and then reiterating this watchers every time one single change happened in your own. So now in Angular 2 any questions? Any doubts? So now how Angular 2 achieves this data binding? So now after this two-way data binding went bad in Angular and stuff like that all other frameworks thought that we will never try to achieve this two-way data binding directly or we will not say it two-way data binding. So there was an important concept in US frameworks used this that we should have a unidirectional flow. Always flow from top to bottom and nothing else because and we should maintain that the source of data should be at one place and whatever data changes are doing at that place it should always propagate all the changes to the to its children and it will reach the leaf node but the data will always from top to bottom. So now we have decided that our application will be a hierarchy of components in that hierarchy if you want to pass a data we can only pass from top to bottom. So generally top to bottom also would mean that from a component to template to your view actual long node or your browser you will always pass the data from your component to your view. Your view should not pass the data or change the data of your component back. So what happens is that there is a way called property binding. So these are normal properties any component if it defines a data property it will bind to the template in a one unidirectional manner and the template will get updated whenever the property changes into the component. Anything change to the property in your template will not update your this initial component. Okay, how but then now how will we achieve to a data binding if it doesn't update. So the unidirectional data flow says that the data flow will be done in one direction and if there are any changes to your data you should propagate an event property and action or any event action is called in redux and you can say in normal terms it should be an event that the UI or the browser should tell the system that I want some changes to the data or any kind of message that it wants this event should happen whatever the event processing will do to the data will change some data and then again the new data will be the unidirectional flow. So there can be a it's like you see that in generally in India traffic jams are caused because anyone can go from any side because there is not a proper direction people following that's what happened probably in Angular 1 I guess. So if you want to update anything from your template to your component you bind an event to your component. So your template can initiate an event and an event can be a browser event, an interaction event or some custom events as well. There is something called in Angular 2 I will tell you more about it metadata decorating your component with some initialization or meta properties that your components should behave in this way it should extend from this type of component it should inject these kind of services or these kind of dependencies that have these are the meta properties that will be defining over our Angular 2 components. Dependency Constructor So that means in the code dependencies come in the constructor but your decorator has to know what it has to inject into the constructor. Controller So we don't have controller anymore. So controllers are a thing of past because controllers could be appended to any dog code because there was no construct of proper component and proper hierarchy. So in one case where in a particular route page you can have 10 dog nodes inside the 10 dog nodes only 2 dog nodes were editor controller. So the whole component didn't know what are the subcomponents inside that particular component also. So controllers are replaced by components mostly directed also. Then after we do this data binding parts of component we know that if we have to do any kind of dog manipulation in Angular we have to create a directive. Yes? Anyone have this principle in mind that if we want to do any dog manipulation use a directive. So the same thing is there in Angular 2 but in a more constructive manner in a more standardized manner. There are 2 types of directives in Angular 2 one is called attribute directives and one is called structural directives. So structural directives are used whenever we want to add a node to the dog, remove a node to the dog or modify the dog. So any dog changes require us to create structural directives. But there are some directives where we only change the behavior of that same dog node and don't change like add a click event listener or change some CSS properties or nothing else. Those are called attribute directives. Okay? Then coming back to services. So what were services in Angular 1? They were nothing but a constant where you define set of functions and expose their functions someone would use that function. So it is just a piece of reusable code which you could use in multiple places right? In Angular 2 also it is the same services are nothing but your plain TypeScript classes or ESX classes where you could write some methods and some properties and then some component can reuse those properties or use that logic. So you can add your component to a namespace kind of thing which is called an Angular module. So Angular always believed that to organize a large application or a large structure you have to make modules of your full application. So you could add a set of services or a component or a directive to a particular module construct and any other import it into any other app or any other module that is it. So any questions on the architecture part? Any doubts? No it is always the same. It is always the same. So much talk. Look at it the real time. I can ask different components which are totally different than they can be replaced with how does that work? So you are saying you can have two different components and then they can be replaced with your root component. So this type now you always have to have an app component that will be at the root of component. Now the children can be different. Any number of children of that root component but it will be in a hierarchy. So Angular would know that there is a root component which we have to define or give it while bootstrapping our Angular app and then all the rest of the components will be the project structure setup. The big problem with Angular 1 was also that to find the best starter template or how would you start a new project what will be the scaffolding, what should be the project structure and all. This gives you a basic structure and is it visible? The files automatically created inside our project got written config got getting more Angular, CLI, Json, Karma.conf. So it will setup some meta properties regarding the CLI regarding the test runner state and also the buttoner. So if we go to the source file we will see that we have another 2-3 folders called app, assets and environments and then we have our main which is main.ts inside the app there will be app.ts So if we go to our main.ts So this is the place where the bootstrap happens for your app. So what happens is that we will see that your main app will have a module. So we will see that first. So in order to create your whole app you will have modules that Angular 2 provides to create your app structure. So the basic module is like to require ng module from Angular code to define your module. ng module and then a bunch of properties or a bunch of objects that define the right ng module. Someone should have asked that question till now. Decorator. Some meta properties is that most of you who must have coded something in java or dotnet there is something called annotations in some backend languages that you annotate a particular function or a particular property to define some extra behavior regarding that. Similarly there is a javascript type script it was there for cats. The cat was the initiated a spec around decorators to be included in javascript or in ECMAScript inherently. So this decorator is a stage 3 spec which is there in your ECMAScript specification which will be coming to browsers soon also. So decorator is nothing but you can annotate a javascript class you can annotate a function and annotate a property. So annotate or defining some extra layer on top of that particular function on top of that class or on top of that property to change the behavior of that particular property. So ultimately for you Angular 2 uses this concept of decorator this is an advanced concept we need not to go into the detail of what decorators does is. We will see a lot of things that we will define some meta properties for some class some function or some property using decorators using these add properties. So generally the decorators have nothing but functions like add engine module we are invoking that function and then we are passing an object that object contains some key value pairs. So decorator is nothing but another function that is used to change the behavior of the function which is written just next to that decorator and that decorator takes in input some kind of properties meta properties to change or to derive that behavior. So here in our ng module ng module is the core of Angular 2 everything in our Angular 2 will be inside a particular module generally for a small application which we will be coding today we will be having only one module that will be called our app module. So this file is called app.module.ts which contains the definition of our module and what all things are required by this app module. There are four important properties of this decorator or the configurations we can pass in this decorator which are called declarations. Declarations mean that any component that will be used inside this particular module. So generally declarations we pass only view based components or anything that will be affecting the view. In Angular 2 means will be affecting the view one is your components and the other thing is pipes. Pipes is nothing but your filters in Angular 1. Those are called pipes in Angular 2. So any pipe or any component you make and you are using anywhere in your this module you have to keep you have to remember to keep them in the declarations part or pass them in the declarations part of it. Then there is imports. So imports means any other module this module is dependent on and wants to import will be imported here. So any other ng module if you are using in this module needs to go inside imports. Then providers providers are nothing but like it represents your dependency injection. Any services you want to inject into your module you use a provider to inject that particular service. So if you remember also any value any constant any service or any factory was ultimately a provider and those all were called syntactic sugars on top of a provider. Has anyone used the provider in Angular 1? Couple of them. So providers is nothing but that will be used in this. Then the last part is bootstrap bootstrap means and in this particular application or this particular module will be bootstrap using these components. You can pass an array of components. Then coming to main.ts so now in the main.ts we include the basic modules by Angular like platform browser dynamic. This is some internal browser usage module. Then we enable prod mode to enable the prod mode. So there is something called environments. This is just to give you the best practices of the code principles. Angular 2 has scaffolded this project to provide this space because we all know that in our enterprise apps or in proper apps that we use in our day to day lives we have different environments like a staging environment, production environment or a pre-prod environment. So they give you to define some configurations for each environment into this environments folder. If you show you have environments folder environments folder has two things called environment.prod.ts and environment.ts. This is nothing but a configuration object which will define your configurable properties of a particular environment. That's it. It's just a place where you can define different properties and you can access that in your app using environment.something and what it does it whenever you run in a particular mode it will copy that particular file like this file is environment.prod.ts if you say enable prod mode it will just copy this environment.prod.ts into environment.ts file. That's it. Now coming back now in order to bootstrap our module we use the platform browser dynamic function to call the method.bootstrap module and pass it the module which we want at the root of our whole app. So any particular app will have a module at the root and that module will bootstrap internally with some component. So now if we say that in our app module we had said that this app module should get bootstrap with our app component. So now we will see what our app component is. So our component is nothing it is importing from Moin component class or the component decorator from Angular 4 and then just doing add component which is a decorator taking input some meta properties like selector select what is selector selector is nothing but name of the html element which you will be using in your html templates. So you will say angle brackets app-root and then closing angle brackets app.zoot. Then whatever template we want to bind with this component we use template url or you can use the template string as well using template. The same is the third is file url if you want to attach some CSS properties to the style of Angular 2 you can pass in the CSS relative. So always this path have to be relative path to this particular component structure or component place in the folder structure. Then you can pass some properties. So you define a class of your component that class can have two things one is any properties and the second is methods you can have different methods that will be attached to some event on the app. Now in order to run this example run the app if someone has used Angular 2 6-7 months before I guess two people have talked to me you have to use the system import and then you have to do that dot you have to import the definition types definitions of that typescript and something like that that is now not needed. Now you just do ng-serve and do cd go into that directory it takes a small amount of time because it is combining all the typescript initially to your JavaScript code finally it creates a bundle see our bundle is so less because we don't have a code in it but the vendor bundle is 2.833 we can reduce this vendor bundle size by gzping our bundle when we release it in prod mode. So if I go to localhost 4200 I will be able to see my basic app that has a word app that is here which just renders a string in our app component. Any questions in this? So what happens is that our main.ts is the entry point for our app this is the place where which is like the first most JavaScript which will be in our bundle.ts this will be at the top after the vendor code and then after this code our app module will be called app module will bootstrap a particular component and that component will be displayed. One more thing but how does actually our app comes on the html in your my web app is serving our bundles js files those bundles js files are injected into this html by the dev server and ultimately we are including that html app.root which we had as selector of our app. So this is where the initial bootstrap happens that whenever the angular passes the root of your template and then sees this particular app dash root and it will initialize all the construct of your app and place it inside this component of your html page. So now let's go to the next step. Now we will do some basic type checking. So we will see how we can check our types in our this component and stuff like that. So we will just update this code. So as I told you that we have less time so if you don't follow it right now you can go to this link and copy exact steps and you will be able to achieve whatever we are achieving this. So we have to go into the app component.ts5 and we copy this. So what I am doing is I have created some new properties in my component like title and session and I told you TypeScript is nothing but plain javascript along with colon and then type of your element. So title is a property we are defining on the class. Column we are saying that it should be of type string and then session info I want some other property and then colon session. So this session we know that it is not a primitive like a string or value or boolier or something. It has to be some type defined. So if we go below we see that we have to find this simple interface that is a composite object and that composite object defines the type of that particular. So I will define an interface session. Interface is nothing but we all know in serial computational interface is nothing but just a definition of a particular class. So we have to define whatever properties and methods should be implemented by a particular class or a object. So we define that it should have a topic as strings, speaker as string and duration in minutes as numbers. Then in the constructor of our interface we have some data to pass in to get displayed. The next part would be we have to update our template in order to show these things. So I mean another thing is that now see I don't have to do refresh or anything because another thing in bit bit to the lie is your what do you say hot module replacement which automatically replaces whatever bundle is getting updated whatever code you update it gets compiled on the go and it gets updated and the browser gets notified that there is some update and it gets refreshed automatically. So nothing you have to do on yourself. So we see that all our data has been displayed session, feedback manager, topic, that which we added. If we just see our template how it does. So the normal binding syntax is similar to angular one. You use double curly brackets to get any property from your component into your template. So this will be only one way data binding. This will not have to be data binding. It will be only the property which you define in your component which will get binded to the particular place in your template and get it. That's it. These are expressions. These are expressions binding. Yeah this is expressions like only one way expression. These are not angular expressions like two wave expressions. Normal angular expressions. We have a data type expression. So data type, I showed you the data type is in your component. In your not in your view. In your view ultimately it is a property that has been binded to. But the time checking is always in the javascript part but javascript don't have any type. Yeah so what happens is that I am having title string. So what happens is that if I pass this 90, I have passed the 90 should be numbered. If I pass it as string it will give me an error in this my if if you see in your command prop it will say that the type of property duration in minutes are incompatible. String is not assignable to type number. So this the type checking is at the compile time and not the run time. So it will be present in your javascript code and not in the html code. So one thing I am just including from my database example. I will update the, I had used some CSS to style our view. I will update the online link with this CSS file. I won't update it till now. So just show some nicely whatever we are seeing. So this is nothing. Now we have created a simple module. We have this some data. The first data topic was a normal string. Title was a normal string and then the session information is a object that we bind. Okay. Any questions still here? Why do we construct it? I am not very much aware about it. Okay. So then you have to go and construct some things. The constructor is anything you want to initialize into that particular class uses constructor. Because constructor is you can think of an entry point or initialization at the time of initialization if you want to do anything. You put that in constructor. So I could do the same thing here also. Rather than doing in the constructor, I can pass it here if it was a starting property it would work. Static need work. It got updated. So why do we use inside constructor because if you don't want static data, if you want some data from a service or an Ajax request so any code, any behavioural code you want to write in the initialization you have to write in the constructor to call that service and then fetch some data. Outside the constructor you can only initialize static data. So these all initialization to a property inside a class can be static or some dynamic based on some most variables that are defined in this code would be in this. But you can't do some behavioural or javascript code if there is some conditional code. You can't write outside your constructor. These constructors have different scope. So constructors have a scope of this particular component only. Why do we use these laws? So any time your object gets initialized it has its own scope. Every function has its own scope. In javascript if you use inside a function you have to use this to access the scope of this. These are very basic javas or whatever. That is basic. But the title you have initialized outside the constructor which means title should be inside the constructor without using this. This is as you have to see. So constructor is for this component. This whole class has the scope of this. Anything we write inside the class will be having this scope. Constructor is just to initialize or bind some properties on this. So ultimately the constructor function when this class will get converted into javascript it will be app component constructor. The name of that function will be automatically app component is a function. And your constructor is inside that function. So internally it implements that. It cause the constructor function at the top. And it gets initialized. So quickly moving towards the next thing. Now we will do a new component. We will try to create a new component and see how it is easy. It is to create a new component. We will create a new directly inside our app source as main component. So I am just making a new direct. So wherever you want to create a new component you have to go to that directly. And using an angular command angular CLI command called ng space g. And then writing whatever type of component you want to make. And that the name you want to give to that particular component or construct. So when I say ng g component feedback. If you see it has created all the necessary things for me inside my component folder. There is a feedback folder. Feedback contains four necessary files. One is your feedback from component or CSS file. Your template file. Your spend.ts. spend.ts is nothing but initial testing unit test for the component. And then there is feedback.component.ts that is the actual class of your write a basic component and copy this. So right now if you see that the basic component which it has created it has nothing but only a empty constructor and an ng on it. So I will tell you something about on init why it is on init. So this on init it imports from the angular code. This is just to explain that you should have the life cycle method of ng on init to this particular component. So whenever we implement this particular interface. This is not anything but interface which ensures that your component should have an ng on init method. If I remove this and I can so if you just quickly just for the sake of showing if I remove this and save this it will give me an error that I should have defined the ng init because I implement this interface. So whenever we implement an interface we have to define all the properties and methods of that interface. Implements is nothing but inheritance. Implements is not inheritance extends inheritance implements it ensures that whatever interface you are implementing you should have all the properties and methods of that particular interface. It is not mandatory to inheritance. It is just priority for inheritance So now I have created this basic new feedback component. I will explain what I have. So there is access specifiers also which you can use along with defining properties. So you can define the access and then define what property type it is. This is the name of the property and this is the type. So I should have an interface for feedback info which I have at the info interface which gives name, company, email, mobile, speaker rating, radio rating, some stuff. Now private is nothing but ssss Yeah that's what I am saying. So what we have internal protected all these things? I guess it is private, public and not protected and anything. Only private and public. Because whatever specifiers or whatever types you could define into your normal JavaScript function. So inside a normal JavaScript function if we define anything under this keyword it becomes public and whatever we defined as var in a local function scope it becomes private. So this is following the same constant. So now the other important thing is now if our component wants to take some input from some outside parent component how would it take? So then there is a property called there is an input decorator which you have to include from an Angular code input property can be written at input. This decorator right now doesn't need anything so it doesn't need anything. You can see input binding property if you want to get an alias to this property you can pass in the alias name inside that input we will see it later. Now add and into the normal input tags you can also define as getter and setter methods. So after you define add input you can write set or you can even write getter. So inside set I am saying that it will take input as info object as of type feedback info. Feedback info is nothing but that interface which I have shown you. So I will initialize another standard info object what I am doing this is because I am defining a null check for all these feedback info if any property wouldn't be there I will assign to my info property which I am getting from here on top of this so that if any of these fields is not there in the input element it will be overwritten by the default fields. This is just the screen which I am providing to show if so do you know what object.assigned does object.assigned will overwrite only the properties which are there defined in this over to this so if there is any null property it will only take this property back. Now we will also update the template of this particular document. So my template is nothing but now the variable which I define all underscore data the property which I defined on my component. So whatever I need to display I need to use this underscore data into my So this I named as underscore data and I pass this into when the center of this property whenever this particular component will get input from a it will invoke this center function it will do this logic and assign that whatever input it has got into my this underscore dot data. App component to have a static object to pass this data to the subcontinent. So I just don't update everything because this code is only for the app component. So I have updated my app component with new property session info and it was there I set feedback one important thing I wanted to tell here is if you do not know the type of any particular variable you can say colon any is a type that can take any kind of object if you don't know the exact type because sometimes you are integrated into some third party APIs and you do not know what type of object they will give you can use the color any don't use it for everything because it is there just use it when you really do not know what input you are getting. Now I have just initialized some static data on this. Now what we have to do is inside our main app component we have to render this particular component in order to render so if you see our feedback component we have given selector feedback if I write feedback there it will render. So if I go to my app component.html that is that I need to input this with the info that property which I had. So as I told you in order to input any property into a particular component we always use square brackets square brackets inside the property name and we have to pass something from the scope of this particular component. So if we go to our app component we see that I have to find this feedback as a property that will contain all the information regarding this feedback. So I will pass this feedback property into my info property of my feedback element. So I will say just the name into the string nothing else. You don't have to use the expression the country presence here. You have to use equal to the name of the current components property which you want to pass to this component as an input element property like this. Clear? Now we will see if no error came in my so now all that information is being displayed like name that dynamic one that I will change the name so that we can see if something gets changed from our so now our app component the root component is passing the data back to a child component that is the feedback component. So we see that this has got updated. So immediately my data is flowing from my parent component to my child component to display. I will just add the CSS to this. I just made this tutorial like one week back so just for it I will add the CSS to that only in things. You can give them your own styling. So this is how I am just showing the data here in the name company email, mobile, speaker reading and all. Clear? So generally it is better to keep it component by component so I am keeping it in component. So this I have pasted in my feedback component. So then you could use something called CSS or CSS where you can create mixings of users. So CSS is a separate lighting model and CSS in itself is a separate task. So I will update the I was giving a class to it. Now we have done this now, create a list of these feedbacks. So now we have displayed a normal so we have created a child component and we have shown a particular for example we have passed that data and shown that data. Now we want to generally create a list of elements and show that data somewhere. So we will create another component called feedback list to display this so what you will do inside your components folder again run this g component feedback list. It will automatically create all the necessary file. I guess this is a feature which I miss in React which I also develop in React. So if I have to create a component in React I have to create the CSS file and the index of JS to export it. So now we see that the feedback list component has been created like that only. So now generally we want that all our definitions for these interfaces of our types we should keep it in a separate file we should not keep it everywhere it is dependent on you. Generally I prefer that if we keep it separately it will be better. So you can create a new folder called interfaces inside the app and move any kind of interfaces there. So I can create inside my app a new folder called interfaces inside my interfaces I can create a new file. Included the feedback interface there you probably have to export. That would be to make my list anyway to show a particular list or initialize that with the list. So just update the feedback list component with this just the class don't update copy paste whole they can win. Only the class but where I have written only the class only the class and we have to also here it is saying input is because it was giving a red line. Now it is also saying that feedback I am defining a feedback list component and then I am defining some property like which row I want to show out of the list. Maybe at later stage I want to create a list where I want to expand a particular option so for that expanding I am just writing a flag or a property that which row it takes number I want to expand to. I want to input a data. So we in the last component we saw if you want to take an input as property we have to use any input. So here I have defined a string. This string will just create an alias of the property that has come from outside and this property we will be expecting on our component we will see. And then type of this would be the interface and property will expect an array of these interfaces or an array of objects of feedback now I have to import that feedback info type also coming here has gone because it has got. Just wanted to show that apart from the constructor where you are initializing your some properties why do we have to use ng on in it when we have the constructor right and constructor inside the constructor any input element we are getting from parent will not be accessible here because this is the constructor which is creating the JavaScript instance of it and Angular has not yet binded its own bindings on top of it so inside your constructor if you will try to list that list it will fail but if you do it inside your ng on in it it will work so for example if I do it here so now the next step is we will modify the template of a list to show the list of elements in a table like structure so what I have done is I have a header feedback list then a pure table this is just a class given then a table showing the headers of that particular table and now a body so now we will see what is this ng for so what is the alternative for ng repeat now wherever you want to list a particular you want to render a list of items earlier you were using ng repeat but we should have a syntax more familiar with the basic native construct so the javascript now has a for loop part right a temporary variable that will hold the iterator of that particular row and you can write off the list item so this is a temporary variable which will always point to the current iterator out of this particular array and it will it is more like for each loop you must have written now for off is in native support of all the browsers you can use for off loop javascript directly also and along with that I want to also initialize automatically whenever you run this ng for there is an index property similar to ng repeat and I will pass this index property to another temporary variable called net9 all of you must know that in typescript or ES6 net and const are variables that have block scoping in javascript there was nothing like block scoping in bad variables but here using this entity won't be accessible outside the scope of this ng for in javascript we would have like if else our for loop didn't have its own scoping if we define anything inside the for loop it would also available outside that for loop also because the scoping of any variable in javascript was the function scope so it would always take that function scope now I want to list in every row I want to write to x-ray and in you use have a star written all the internal directives you use should have a star on the starting this is just the syntax out there when you have to write ng for in camel case then inside this scope we will have this feedback element so I will display feedback.name feedback.company.email I will have some buttons now the other part I told you the data binding is done by a one way unidirectional by properties from your parent class to your template and if you want to emit some event from your template to your you have to use an event method that is called this square brackets are for property bindings and the round brackets are for event bindings any event you want to bind from your component to your class or code you have to use this okay so now I can pass so this method to whatever expression this is similar to angular mark you have to call a particular method this method should be present on the scope of this particular component which is rendering this template okay there is no other parent and all you can't go to parent scope now if you want to go to some parent you want to access some data you have to pass the data as an input if you want to call some event on the you have to call an event on your scope and then again you have to call an output event of your VCR events are events are also changed at ng click yeah so ng click is not there now you don't have to use so in angular mark they used to have this pseudo directive so all of these were directive ng click and all which were internally calling this click event now directly on click events and all will be bound on this property so there are some basic events that are there which you can use inside your home and it will trigger that event then these are called event bindings so these event bindings are available because you are extending your component you are decorating your component with that add component and then in component so this is the core feature of an angular core component so now I am passing the feedback this particular feedback object again to my detailed row this is another row which I will only show if my show row index is coming to this editor this index I wanted to display a list of elements and I wanted to expand a particular element so whenever I set the show row index of this particular list component to any particular index it will get shown so this whole table row will be shown or not even not even shown is wrong but this will be brought into the DOM so we know ng if is another directive which will if this expression is false everything inside or everything in this element is taken out of the DOM not even inside the DOM and whenever this expression evaluates to true this whole element is brought into the DOM so I will add this to css to the list so why my feedback list is not showing because I haven't updated my app component to display the list instead of this feedback element here I can say yes sir you have missed any step I will add this to this I think I missed the step that we have to change the information which we are passing here into an array rather than so here right now it is just an object so I have to probably change it to an array component my list was expecting something called list data that was alias to my local list property of that particular element and here I can pass this it's an error let's figure out the error also so unbind list data since it's a known property of feedback list say it is not a known property of let me just see develop this so now we have defined this feedback list feedback list app okay I have to change this app to feedback list was not a delete element I have to change the list again to list data because list isn't a known property so all the known properties are defined by your input element list was earlier a known property but I have alias list let's see if it works like this yeah so now it lists it shows the list one list and if I do list data in my app component.html I have to this change this to list data so you can write an alias to your input property using that add input decorator passing the string to that okay now displaying a list if I want to create a list of feedback copy some data let's just copy this and then change some data and also in my click event if I see if I go to my list element this function on my class that is on show button click and row index I am taking as input which should be a type of number and I am updating the property this is not shown row index to that row index and whenever this gets updated automatically my NGAF directly would have triggered and ultimately my element should show so if I go back if I click on this show so it's showing that particular row element I click on this dot show row index is updated with the row index of that particular row and my NGAF for that particular row gets triggered and it gets shown any questions in now now the next thing is forms and input how do we create a form output of all these tutorial steps right go back to my scan mocker JSON file so whatever that feedback list I had I have kept it in a mocking this is the web service how it looks and it comes now that I have been made out of my would be like this we already completed this part now coming to the admin part to show a particular form so I have this form that is being displayed and whatever I form I will show you where the code validity is being done after I add a number it will say motor value form that list if I want to see the data which I have added I can see it like this going through the code now in that feedback list we have to add another component called feedback form to display that form on the click of add new button so how do we property called form builder form control and value of forms module so this is a new module in the core of Angular which will enable you to quickly build your forms so what you can do is your whole form can be found as a group so in the constructor of this you have to inject the form builder firstly you have to include that form builder from here and then you can inject the instance of form builder into this apart from these things you have to keep in mind that in your app module you have to keep adding the declarations of any component which you make generally this is automatically done when you do ng serve or ngg component when you create a component it automatically adds it here you also also remember that if you want to use the forms you have to import the forms module and react a form module from Angular forms and then include it here okay I have created you have to create a structure of this form that's all the properties or all the input elements that will be there in the form then you have to assign a particular array this is the initial values of that array and any kind of validations you want to do the custom validation of an indian mobile number 10 digit there can be a plane function as a validator you can add a plane function as a validator that will take input and finish it so here is the plane function that takes a form control validates and returns if it is value is also not and while saving or click of saving I will get then this dot feedback form the whole feedback element and it will have properties like if it is valid or not if there is an error or not I can check that and do something this can be also there on the control properties this feedback form will have different control and you can see which control has error so you can always drill it up to the control which has the validation elements that's it and how do we we integrate to our services we can create a common service that can integrate to our HTTP APIs you need HTTP and response variables from your Angular HTTP headers request options and something called observables to cut it short for observables I will not go into detail it is similar to promise we will see all your functions that want to return some data have to return or type take input as a feedback only so what we do is normally the HTTP module will both like not get or something the response of this will be available as a map of object so map is nothing but the response will be an array I have to iterate through the response and convert it into jsoc and then pass it or return it to whoever is trying to consume it maybe after this session we can discuss more about if anyone wants feedback how to consume it is in this list feedback list component we will see that we have included this feedback service as a provider and then in the ng on it I have just called this dot feedback service instead of dot then which we don't in terms of promises we have to do dot subscribe and we want to listen the response of an observable and then we listen to this like this so this is all about what we had to achieve but to cut short time I just told you about this you can go on to that link and follow the steps if anything is missing please tell me I will add to that particular surely I will add the CSS before going today just for 5 more minutes I will be talking about the migration strategies if in your particular companies if you want to migrate your so migrating from angular 1 to angular 2 you would think that there was some magic hat and you would just pass the angular 1 and angular 2 should come everyone is expecting this why it is a problem we should have something like a converter you pass in your angular 1 and angular 2 apps should come architecture of that that is not possible even apps are not performant enough and if you want something like a shiny car without lot of effects there is no magic migration for angular 1 apps that is just you have to forget so migrate to learn if you want to learn angular 2 just don't start with the migration you would go into a new path and you would say that I don't want to learn angular 2 and don't want to use angular 2 and migrate to some other so learn build some hobby projects in angular 2 first and then try on your so there are 3 strategies on migration one is a total conversion so if your app is a very tiny project you should probably do a total conversion and create a new app and code by code just take your JavaScript logic into that new constructs the new constructs components on all you should just take those such are there and put it there but the problem is there is no incremental validation you will not be able to tell that you are doing right or not you have to just evaluate manually yourself it is similar to complete rewrite of your application it is a good opportunity to improve your application it will be tough for complex app if you have a large app I would not suggest this but this method will give you the best performances of the application so there are some examples how earlier we used to bootstrap it like angular dot bootstrap now in v2 v2 bootstrap it like sorry now in angular 2 v2 bootstrap it like we have seen this total complex stuff in controllers in v0 there was controllers then angular total that controllers should be written as controller if you remember controller as syntax controller as syntax is similar to using constructor and this and dollar on internet it is more like your angular 2 apps so firstly I would suggest that convert your angular 1 apps basic controllers into controller as syntax and using this angular dot 1.5 plus components then this is the new component v2 we have already seen this is how modules were in v1 angular dot module and this is our module that in v2 within 4 bootstrap and declarations your router in v1 is like user state way into your route provider or state provider in v2 your routes are nothing but every path is corresponding to a component so I told you your router is nothing but component driven router then the second strategy if you don't want to do a total you have to do an ng forward or ng meta data so this is an open source project which was created by someone with suitable for legacy projects what happened is in this strategy your angular 1 app and angular 2 apps could coexist and you could only upgrade one by one file and keep on working on that but this was an open source project by some third party similar to this there was another thing called ng upgrade this particular library has been supported and backed by google core angular team so this is the best way to go forward for you it has it is also running angular 1 and angular 2 and angular 1 is at core and then everything else is inside the steps would be setup webpack and all I will share this probably that is the part you can upgrade controller's directive services your controllers will get upgraded to components directives will get upgraded to your components services will get upgraded to angular 2 services what you cannot upgrade is your structural directive because there is something different in angular 2 you have to rewrite these things you have to rewrite in a different manner so it does also you have to rewrite this upgrade will be possible using this ng upgrade module in civil top something about ng upgrade sure so I am done with so thanks guys I will share this ppt which has some important links space it has been a challenge for a lot of people it exists as a component you can use there are certain guidelines and restrictions in terms of how you can use ng upgrade and one of the fundamental benefits of an ng upgrade is you can have an angular 1 component and an angular 2 component in a single piece but for that to work you obviously need to be on an angular 1.5x version and you need for any component space architecture it is only then that ng upgrade works very well and what you are seeing practically is that not many projects is on 1.5 many times a project is on 1.5 but it has just been there I think it is working pretty well most of the challenge that we usually face are where projects are on a legacy version that is where your cyclists are hitting your performance and you are trying to migrate that to an ng2 and that is where ng upgrade does not really work and you need to figure out some other strategies and some other ways you can do that and this is actually an open discussion in fact I was hoping to get feedback from you all in terms of how you guys tried what are the challenges you guys have faced maybe if you have got an ng1 app the hackathon will try to figure out ways of how you can migrate there is one thing called ng migrate this is from the deliric guys they have a certain set of kind of principles of how you can migrate some other things that we are trying to advocate is ok fine you may not be able to do a component level migration but can you look at doing a model level migration or a page level migration so say you have got say if you have a new e-commerce site you have a home page, a product listing page a product details page your home page may be an ng1 you can click on the link and go to the listing page maybe that is an ng2 page the first one is ng1 library that would be a performance impact but then that is only during the phase when you are migrating so some of these strategies are if you are doing a page level migration then what are the things that you need to take into account so some of the things that come to the top of the mind for me are outing how to link between an ng1 and an ng2 you might need to hard port certain things that works, secondly comes a session management how do you do session management suppose I want the ng1 side of the app I will add a couple of items to car when I go to the ng2 app I should still get to see my car titles or I should still be logged in so how do you handle those kind of scenarios and I think those are the good questions to discuss but going forward I think it is going to be a pretty serious problem an interesting and challenging problem to solve because every case is going to be unique you cannot have this one framework or one product listing page this is a magic map you will have to figure out one in one case and how you can like it okay this is how you can manage it these are the 5 or 6 things that you need to worry about so if you have this checklist in place you can start working on that it is an open discussion I mean it is too hard to pass and I guess most of us know that this is a lot of people discussing yesterday also a lot of fintech companies have moved towards AngularJS type and we have made such large projects in AngularJS that this can be a market in whole that accreditation huge business is not on the service line to do that so a lot of fintech companies like Capital One Fittel and India Mognix and Hufford even MasterCuts, they are all on AngularJS whatever reason they start to stop and say how do we migrate? you cannot do a big bank migration saying you are running on AngularJS and you are on AngularJS and everything just works perfectly no business is going to be ready for that so how do we try and get that that is what the question is actually I am talking about that Shishap and Vibhigar there is some converter they have implemented and it pretty much gives the similar code so here right now we don't have anything you know that yes we like Angular 2 we need some components and Angular 1x has some controllers so if we put something here they said it comes with components not as so ng-upgrade is the solution to that what ng-upgrade does is it allows you to upgrade a component or downgrade a component so even there you can have a strategy where saying I have an engine, one component you can move it between an engine and an engine downgrade that so there are strategies for that the challenge to that is that code has to be written in the right way what we are seeing practically is that people have written Angular code the way they want root scopes, controllers jqueries inside it's an amazing word inside Angular so the challenge is there because it's not very structured in every we have a project we are working with Angular 1x we have around 600 forms which is amazing for one product we have different verticals like the same sets like 3 more weeks are there we can just take the same and plug it to the other one so planning to go for the other migration now so migrate with that so suppose the formant components what we have like security now so we can say admin model so that I can take from the Angular 1 and then the top of that I can give with Angular 2 both will work so what? so are you referring to services? no I am not so actually upgrade is project which will enable you to learn how to do services simultaneously but you have to do some manual efforts in there that you have to make your Angular 1 code such that it is upgradable by this NTFJ so you have to write proper your controller should have controller as syntax you should have this coping properly you should have life cycle events and like that so if I don't want to fight it I will teach as it is like in Angular 1 it will not just another what was going to develop so I can do that so the question is do we have to migrate as a user when I am advocating for applications am I going to jump from an Angular 2 to an Angular 1 or are you going to be siloed it will be one will be there and top of that so this NTFJ thing it doesn't let you have an Angular 2 app on top so all of these migration has run inside an Angular 1 app so Angular 1 app is your core app and inside you some parts you can run that is the problem so the strategy with NTFJ is you have an Angular 1 app you decide what components you want to convert to Angular 2 so the component when you start migrating them and as you are migrating them your run time is degrading into one experience but your code is Angular 2 which in one period of time all your components become Angular 2 so that is the way they are building it this is an interesting news case having 600 forms in an application and my personal opinion is also discussed I discussed beyond 15 developers should understand that if you have a single page app it is not fair because we can create 600 or 700 using one app if you have a website if you see your traditional website each website if it have one function, if one section had one function it would have different server side routes so generally what we suggest is that if you have a large web application you should always have micro single page apps depending on different route sections that would render your different apps this is the best architecture or the best structure you could follow for your large apps complex apps have side road micro apps rendering on different server side routes but it is a CPU product it has to be that much number what is the number? it is just a ERP product I am saying that but divide your 600 forms into logical units of like 2 or 5 pages it would be a collection of small apps I have a small app maybe your 600 forms are in one angle right? it is a CPU product in the CPU product it is just a one product it is a number of performance so if you see that if you want to ship a web app you can ship it as a native app using electrons you can provide your server in bit and you could have different routes rendering your different micro apps there are different architectures it is on the menu but when we discuss this you can take it offline it will be interesting ok many questions everybody has got what will be the break in that we can from that side