Intention for this series is lean all the main areas of angular 2 or 2 plus versions with a single project , learning theory without practical is too time taken ,take much effort . so here each of the section explain with code and related information’s .
Here I created a simple Employee Application , which will be cover all the sections , i wish you you can do your own application after complete this tutorials, please read and exercise each part one by one , because each section will be continuation for previous one
Why Angular 2
Angular 2 is a JavaScript framework , angular 2 communicate back end with web API so we can independently handle front end and back end , angular 2 support Type Scripts , TypeScript includes many aspects of object orientation such as inheritance and interfaces. angular 2 application made with number of components , we can reuse components we will discus in our next section .
About Example project
This tutorial is explain with a simple App call Employee App , application contain 3 pages Home page, Employee list population and Add new Employee , and all the areas are covered so that easily create your own project.
Project Cover
- Modules
- Components
- Data binding
- interpolation vs property binding
- attribute Binding
- Class binding
- Style Binding
- Two way bindin Angular ngFor directive (ngFor)
- Angular ngFor trackBy
- Angular pipes
- Custom Pipeline
- Angular component input properties
- Angular component output properties
- HTTP Server Request ( Get data from Database as Json Data )
- Add Bootstrap
- Routing
- POST data to the back end
Home Page
Home page
Contain Just a this is home page Text display page
Employee List
Employee list have populate employee details , which is populated from json API . Filter Employee With gender functionality , format display name , price using default and custom pipes .
Click on any row of Employee list will be populate general and salary details of employee , which will be explain by using angular we can easily access data without back end hit .
Save form data is important in development , so here created a add employee form and explain how to create an angular form and how to send data to the back end without page reload .
It is very much help full thank you sir