Getting Started with Your First Angular 2 Project

By February 20, 2017 AngularJS, MEAN One Comment
getting-started-with-your-first-angular-2-project

Angular is one of the most popular framework for client-side programming. Angular 2 has the more simpler approaches than in earlier versions.

In this tutorial, I will let you know how to start up with the Angular 2 application and we can do a sample project.

What Makes Angular 2 an Amazing Framework for Web Front-end

  • The whole script is rewritten in TypeScript. The main difference between this version and later version is, it is rewritten in TypeScript, and the TypeScript is the superset of ES5, ES6 / 2015. The Angular 1.x was written in TS6.
  • All of the code is in ES5, ES6. Another main difference that turned the Angular 2 in the new direction is reduction of more than 40 directives. Most of the directives are built-in and you don’t need to add directive for small tasks like Event Handling etc.

Like, for example, you use ng-click in Angular 1.x. But, now you can use the built-in directive bound with the inner-HTML. To get the other differences between Angular 1 and Angular 1.x, check out the details here.

Let’s Build an App in Angular 2

Step-1: Including Necessary Angular Files:

  • To start with your Angular 2 application, you have to develop a project in any of your preferred IDE like WebStorm or Sublime Text Editor.
  • Go to the settings and select for the Angular 2 application in the Project creation popup window. It will add all the necessary files to your angular 2 project.
  • If you are making your application in any editor like NotePad++, Atom, SublimeText or DreamViewer, then you have to add the script tag under the <head> tag.

<script src=”https://unpkg.com/zone.js/dist/zone.js”></script>

    <script src=”https://unpkg.com/zone.js/dist/long-stack-trace-zone.js”></script>

   <script src=”https:[email protected]/Reflect.js”></script>

    <script src=”https:[email protected]/dist/system.js”></script>

   <script src=”config.js”></script>

We are developing a code for selecting a country from the drop down list in TS. All the files are written in .ts extension.

Step-2: Let’s Work on It:

I have created a project in which I am going to show the listing of all the countries along with the state. Here is the step by step code of all files that are created to do it in a more reasonable manner with Angular 2.

Output

Look at the output screen, we are going to have this functionality in my new project.

image01

Project Files

  • country.ts

All the necessary file are of TypeScript with .txt extension. Look at the country.ts file, in which we only have that class with its default constructor.

image07

  • state.ts

Second thing that we are going to have in our project is the state relevant to each country, So, we have to add another class named state in this file.

image02

  • dataservice.ts

Here, we import the necessary classes. I also import the “injectable” where we can call service there, the injectable will return the country and states by select any in the drop down menu.

image05

  • countryListComponent  (TypeScript File)

Include the component along with the event handling. For more information about how Angular 2 executes code, check out our other article.

image03

  • countryListComponent (HTML File)

In this file, you can have the layout of your components.

image06

  • main.ts File

image04

  • index.html File

Include all the relevant libraries here and run it on browser

image00

Conclusion

Vizteck Solutions is leading web and mobile development company for 10 years. We have JS developers that are striving to move towards the updated development practices for front-end as well as backend. We are preferring Angular.JS over other front-end frameworks and libraries. If you want to developed your front-end with Angular.JS, then contact us.

 

Author Uroosa Sehar

More posts by Uroosa Sehar
  • Cainton Milroy

    Nice tutorial

mautic is open source marketing automation