Learn How to Write Angular 2 Scripts

0
2820
angular-2-scripts

angular-2-scripts

In this article, we are going to focus on the Angular 2 scripting, which is done in the TypeScript language. It is a typed language which is nothing but a super set of JavaScript. It is chosen by the Angular team for being a very robust language and is maintained by Microsoft Inc. The Angular 2 set up compiles the TypeScript files (file extension as .ts) into the JavaScript files (file extension as .js) and is very less susceptible to run time errors due to the presence of types in TypeScript language.

Pre-requisite for building a basic Angular 2 App
To begin with scripting in Angular 2, we need to make sure that the angular 2 framework setup is successfully installed which includes the installation of Node.js module and executing the number of npm installation commands on the command line. The steps could be referred to from the article ‘My first Angular 2 program’.

Employee Details App in Angular 2

Step 1: Firstly, we need to create the directory structure as ‘app’, ‘assets’, ‘resource’ and index.html file. The index.html starter file has the selector ‘employee-app’ in the body section of the HTML as shown below. This is the start point of the ‘Employee Details App’ which we are creating in this article.

Index.html

As discussed, the programming of Angular 2 is done in TypeScript, therefore we will be developing the following TypeScript files along with their styles and the HTML template file.

Step 2: We create a model class as ‘Employee’ that has two attributes namely id and name with their defined data types as shown below.

  • File employee.ts: It is a Typescript file and should be created under the app folder.

Step 3: We need to supply data i.e. the list of employees with their id and name. Therefore, we are creating the following Employee array that is defined with the const EMPLOYEES as shown below. In this app, we will be playing around with the data supplied through this Employee array.

  • File mock-employees.ts: It is a Typescript file and should be created under the app folder. It has the employee’s data that includes their ID and Name.

Step 4: Now, we need to create a way through which we can get this data as a service in other controller classes’ method. Therefore, we will be creating an EmployeeService class which is capable of injecting dependency to retrieve Employee data. We have the Injectable function present in ‘@angular/core’ package which helps in dependency injection.

  • File employee.service.ts: It is a Typescript file and should be created under the app folder. It has a dependency injection class as EmployeeService that provides the employee data as a service which is injectable.

Step 5: Next, we are creating an EmployeesComponent controller class which has the following methods ‘getEmployees ()’, ‘onSelect (employee: Employee)’, and ‘gotoDetail ()’.

  • File employees.component.ts: It is a Typescript file and should be created under the app folder. It has the component and the controller class as EmployeesComponent which implements OnInit interface. The component has a selector as ‘my-employees’, styleUrls as ‘assets/employees.component.css’ and templateUrl as ‘resource/employees.component.html’.

The following are the content of styleUrls as ‘assets/employees.component.css.

The following is the content of the templateUrl as ‘resource/employees.component.html’.

Step 6: Next, we are creating an EmployeeDetailComponent controller class which displays the employee details and has the go back button to take a web page history back.

  • File employee-detail.component.ts: It is a Typescript file and should be created under the app folder. It has a component and the controller class as EmployeeDetailComponent which implements OnInit interface. The component has a selector as ‘my-employee-detail’, styleUrls as ‘assets/employee-detail.component.css’ and templateUrl as ‘resource/employee-detail.component.html’.

The following is the content of styleUrls as ‘assets/employee-details.component.css.

The following is the content of the templateUrl as ‘resource/employee-detail.component.html’.

Step 7: Next, we are creating a DashboardComponent controller class which serves as a home page that has two methods ‘ngOnInit ()’ and ‘gotoDetail (employee: Employee)’.

  • File dashboard.component.ts: It is a Typescript file and should be created under the app folder. It has a component and the controller class as DashboardComponent which implements the OnInit interface. The component has a selector as ‘my-dashboard’, styleUrls as ‘assets/dashboard.component.css’ and templateUrl as ‘resource/dashboard.component.html’.

The following is the content of styleUrls as ‘assets/dashboard.component.css.

The following is the content of the templateUrl as ‘resource/dashboard.component.html’.

Step 8: Next, we are defining all the routing links for various controlling classes that we have defined before in this article. The routing services are provided by the Routes, and RouterModule which are present in ‘@angular/router’ package.

  • File app.routing.ts: It is a Typescript file and should be created under the app folder.

Step 9: Now, it is the time to build the app component which has the selector as ’employee-app’ and is called in the index.html. It has the following template that has define the two router links to display two navigation menu as ‘Dashboard’ and ‘Employees’.

  • File app.component.ts: It is a Typescript file and should be created under the app folder. It has the following template code that has multiple router links as shown below.

It has the styleUrls which is a CSS file under the assets directory. It has the following styling content as shown below.

assets/app.component.css

Step 10: Next, we are writing the Module.ts file which has the following content. Here, we are including all the required imports, declarations and providers within the @NgModule.

  • File Module.ts: It is a Typescript file and should be created under the app folder.

Step 11: Lastly, we are writing the main.ts file which has the following content.

  • File main.ts: It is a Typescript file and should be created under the app folder. It is the files that help bootstrap the Angular 2 module.

We are all set and done with the Angular 2 scripting and now it is time to build our first app after executing the npm command at the project root directory as shown below.

commandline

Output
After building the employee app, we can see the following home page loaded on the default browser.
screen1

When we click on the ‘’ tab, then we can see the list of employees displayed on the screen as shown below.
screen2

When we click on any of the employee (Say ‘Aparajita’), we can see the message displayed as ‘APARAJITA is the Best Employee’ as shown below.
screen3

Further, we can click on the ‘View Details’ button to see employee details as shown below.
screen4

Lastly, we can click the ‘Back’ button to go to the last page as stored in the browser history.

Source Code for How to Write Angular 2 Scripts

Conclusion
In this article, we have learnt how write scripts using TypeScript language in Angular 2 and using this language we have built an ‘Employee Details’ app.

LEAVE A REPLY

Please enter your comment!
Please enter your name here