Angular 5 Tutorials – Angular Framework
Hi learner i am thankful to you to reading this article , in this article we will be discussing about the structure of the AJS Application and Angular Flowchart .Like how the control will be moving in between .js files to render content on website, without leave experience to user or (Round_Trip In_Between JS)
Before diving into this article have look on previous article. In previous one we discussed about The definition of AngularJS and the way of installing of process of Angular with help of NodeJS
In previous article we created an Angular application with name LearnAngular. So open that application in visual code terminal
Visual studio code is one of the open source to create angular js application The below captures will guiding you to down load visual studio code and open the AJS Application in visual studio code
Angular 5 Flowchart
The structure of An AngularJS application will be look like below capture . The left hand side you filed the couple of folders , bunch of .ts files and few config file .At this level no need know about those config files
At let top of the visual studio code terminal you will find couple folders with name e2e,node_modules and src . Now open src folder in that folder you will three more folders with name asserts , app , environment .
Expended source folder ,in that folder you will find bunch of .ts files and one html files .click on html file in that you will find couple of markup tag .so how the Angular CLI will render the html markup on you view port ?
And how the control was transformed from one ts file to another ts file
Flow of AJS Application
In application folder you will find index.html file it will be look like as showed below
The Entry point of any Angular js application is main.js.The control will be moving form main.ts file to app.module.ts. How the control is moved form main.ts to app.module.ts bcz of the Angular CLI was import the app module and bootstrap that module.
Angular 5 Life Cycle
Which module will be bootstrapping first at the time of application is deployed to local machine ?
The Answer is app.module ts.
Form app module the control will be moving to app.componet
In componet.ts you will find the declaration ,name , import and export the component .in next article you will learning about components like the way pf creation of Angualr components
In declaration section you will finding name of the component it’s look like key value pairs .The name of component is stored in selector key , sample markup assigned to templateurl and sample css styles assigned to styleurl.
With help of component name the Angular CLI will be identified in which part this component templateurl will be rendering in angular application
In next article you will learning about angular components .For more Angular Articles Like my Fb