Hi guys! From now in this tutorial, I am going to start a project “Employee” angular 2 app. I will start it from very basic level, and don’t worry if you are at beginner level. You will see step by step, how to implement angular 2 application. It’s basically an Employee listing application where you will see a list of employees with their data, user can insert new employee records, user will be able to sort them in various ways. So, you will learn lots of angular 2 features in this Employee angular 2 project.
Note: – I will cover this project in different parts with step by step. And I will use Visual Studio code for this Employee angular 2 application project.
Prerequisite for this project.
Note: – If you are not an expert one them above, then don’t worry. Basic level will also be helpful for this project. And more important thing, I will use Angular 2 in this project. If you don’t know about angular 1 or Angularjs, then don’t need to be panic. Angular 2 is totally different from Angular 1.
Before going to next, I want to share something about angular CLI. Because I will use Angular CLI (Command Line Interface) framework in this project. The first question comes to our mind is that “What is Angular CLI (Command Line Interface)”?
What is Angular CLI (Command Line Interface)?
Angular CLI stands for Angular Command Line Interface. As the name implies, it is a command line tool for creating angular apps. It is recommended to use angular Command Line for creating angular apps as you don’t need to spend time installing and configuring all the required dependencies. So, it gives us the ability to wire up angular2 application with just a few commands. If you want to learn more about angular CLI then just click here.
Install Visual Studio Code
If you don’t have installed Visual Studio Code in your system, then you need to install Visual Studio Code in your system. Just click here to download.
Before installing angular cli, you need to install Nodejs 6.9.0 or higher together with npm 3. Because Angular CLI have some dependencies that require Nodejs. Click here to get Nodejs or click here to get to know how to install Nodejs.
Let’s create a new project using Angular CLI
Open visual studio code. Then open command terminal by pressing (ctrl + `). Now, write the command “npm install -g @angular/cli” in terminal to install angular cli in your machine.
Note: – -g stands for you install the package globally in your system. It means you make it available anywhere on your machine.
After installing it, you will see lots of option or commands that you can use using angular cli. If you want to see those options or commands, then just write the command “ng help”. Then you will see a list of following commands with their descriptions.
- ng build – Builds your app and places it into the output path (dist / by default).
- ng completion – Adds autocomplete functionality to ‘ng’ commands and subcommands.
- ng doc – open the official angular api documentation for a given keyword.
- ng e2e – Run e2e tests in existing projects.
- ng ejects – Ejects your app and output the proper webpack configuration and scripts.
- ng generate – Generates and/or modifies files based on a schematic.
- ng get – get a value from the configuration.
- ng help – shows help for the Angular CLI.
- ng lint – Lints code in existing project.
- ng new – Creates a new directory and a new angular app.
- ng serve – builds and serves your app, rebuilding on file changes.
- ng set – set a value in the configuration.
- ng test – run unit tests in existing project.
- ng version – outputs Angular CLI version.
- ng xi18n – extracts i18n messages from source code.
Now it’s time to create a new project using Angular CLI.
Go to command terminal => open your destination folder in your system (E.g. Desktop or any other) => write the command “ng new Employees” => It will create and install all the packages that we need for npm.
Now open your folder in VS Code. To open it, just go to file => choose open folder or press Ctrl + k Ctrl + O. It will open a new popup => now choose that particular folder “Employees” in my case => and then click “select folder” button.
Now you have created your first ever angular project using Angular CLI. So, after creating project, you will see it has bunch of files already in your project. If you want to understand project folder structure, then click here, I have already discussed it in one of my previous tutorial.
Let’s start to understand the anatomy of Angular 2 project.
Note: – If you want to understand the complete project folder structure then click here.
Open app.module.ts file
First of all, we will understand the code of app.module.ts file. Just go to src folder => app => open the app.module.ts file.
Basically app.module.ts class is the root module class. Let’s understand the code of this class.
Line # 1 & 2: These are all the packages that are published by npm. And each of these packages has various modules within them that we consume in our own application. E.g. we have core module in line number 2, it means, it gives us some functionality of core framework. If you want to use any angular2 package, just import here that package.
Line # 4: In this line, angular CLI imports the AppComponent that is created by Angular CLI. If you want to know more about angular component, just click here, because I have discussed here in detail. So, if you create any component, then you need to import here as AppComponent is imported. We will create components in later part of this tutorial series.
Line # 6 to 15: NgModule is a decorator. This is a decorator function that takes a metadata object that tells angular how to compile and run module code. The first thing in this decorator is declarations in line # 7, in this part we need to tell our application about the components that we have created in the application. Any time we create a new component, we just need to put it in this part as you see the AppComponent is declared in this part. And the second thing in this decorator is imports list part in line # 12, if we want to use the modules that angular2 provides, we need to list them here in this imports list. This will tell our application that we imported some modules and we want to make use of them in our application. The third one thing in this decorator is providers in line # 13, if we will create any injectable service, then we will register that injectable service here in this array. We will create service in this project later. And the fourth one thing in this decorator is bootstrap in line # 14, in this array, we will tell our application about the top-level component of our application. AppComponent is the top-level component of our application. So, if we create any of the component, that will be the child component of our main AppComponent here.
Open app.component.ts file.
Basically, the components are the basic building blocks of angular 2 application. If go more simply, then Everything is a component in Angular 2 application.
A component in Angular is a class with a template and a decorator. And we can say that, a component in angular is composed of three following parts.
Template: It defines the user interface part. It contains HTML, Directives and bindings and etc.
Class: It is just like a class in any other Object-Oriented programming language such as C# or Java.
Decorator: It is used to add the metadata for the class.
Let’s understand the above code of app.component.ts file.
Line # 4: This is decorator part of the angular 2 component. This @component has several properties. But here just only three properties are used.
- Selector: We use selector property to use this component on any HTML page. This selector “app-root” becomes the directive on index HTML page. And then at run time, the directive <app-root> is replaced by HTML template, which is specified below.
- TemplateUrl: The TemplateUrl contains the HTML to render. As you can see the “app.component.html” file under the app folder. This file is rendered using the path.
- stylesUrls: The stylesUrls contains the CSS to render. As you can see the “app.component.css” file also under the app folder. This file is rendered using the path.
Line # 11: This is the class part of Angular 2 component. This part will contain the logic of our application.
If you want to get to know more about angular 2 components, then go to below links.
Next Tutorial Coming soon