Angular 2 [PART-1] – introduction

Download Employee Project

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 .

One thought on “Angular 2 [PART-1] – introduction

  • May 22, 2018 at 3:00 pm
    Permalink

    It is very much help full thank you sir

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *