I am introducing byte sized articles series on angular basic concepts.These article series will help you to create a simple angular application starting with the Angular CLI. Angular is basically a collection of Components. Tools such as angular CLI, allow you to easily create Components. Lets see how components in angular interact with each other through Services, Inputs, and Let us also understand the basics of styling components and how CSS.
Angular Series A1 : Lets-start-with-angular
We will be looking into below concepts in this article : 1.) Install Angular -> npm install -g angular-cli 2.) create angular project ->ng new project-name 3.) Start Server with cmd -> ng serve. 4.) Angular Life Cycle. -> Angular lifecycle hooks 5.) Check the prefix in angular.json
Prerequisite : NPM and Node Should be Installed.
Install Angular : npm install -g angular-cli
Create Angular Project :
Start Server : ng serve or npm start
npm start cmd will run the application on will start the server on localhost Port 4200 (Default). http://localhost:4200/
Angular Cli
Angular lifecycle hooks
Note : For better understanding of below section, please open it in Desktop.
Life Cycle hooks are the points where we can control the angular application. There are 8 life cycle hooks namely ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit ,ngAfterViewChecked, ngOnDestroy. ngOnChanges() — Called before ngOnInit() and whenever one or more data-bound input properties change. ngOnInit() — Called once, after the first ngOnChanges(). ngDoCheck() — Called immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run. ngAfterContentInit() — Called once after the first ngDoCheck(). ngAfterContentChecked() — Called after ngAfterContentInit() and every subsequent ngDoCheck(). ngAfterViewInit() — Called once after the first ngAfterContentChecked(). ngAfterViewChecked() — Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked(). ngOnDestroy() — Called immediately before Angular destroys the directive or component.
Angular has beautiful Guide : https://angular.io/guide/lifecycle-hooks Angular Life Cycle Example Sourabhhsethii/Let-Us-Start-With-Angular Byte Size Articles on Angular. Contribute to Sourabhhsethii/Let-Us-Start-With-Angular development by creating an… github.com Output Screen
You can check in console the sequence of hooks called on load of below sample application.
You can clone below repository on your machine and run the demo on your local machine.
Repository : https://github.com/Sourabhhsethii/Let-Us-Start-With-Angular/tree/master/Angular-Series-A1-Lets-start-with-angular
Check the prefix
In the angular.json file just modify the attribute prefix: It will prefix the name of project before every file in angular application which will help in project segregation.
"app": [
...
"prefix": "app",
...Interview Question
Question 1.) What is the possible order of lifecycle hooks? Question 2.) When will ngOnInit be called? Question 3.) How would you make use of onNgInit()? Question 4.) What is the difference between constructor and onNgInit()? Question 5.) Out of onNgInit and ngOnChanges, which one will be called first when there is no input?
Congratulations! You have created the basic structure of the angular project and I hope these byte size article series will help you to learn and understand Angular.
Comments