Getting Started with Your First Angular 2 Project
Getting Started with Your First Angular 2 Project with Vizteck's step-by-step guide!
Technology
February 20, 2017
Babar
Angular is one of the most popular frameworks for client-side programming. Angular 2 has 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.
The whole script is rewritten in TypeScript. The main difference between this version and the later version is, it is rewritten in TypeScript, and TypeScript is the superset of ES5, ES6 / 2015. Angular 1. x was written in TS6.
All of the code is in ES5 and ES6. Another main difference that turned Angular 2 in the new direction is the reduction of more than 40 directives. Most of the directives are built-in and you don’t need to add directives 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.
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 the Angular 2 application in the Project creation popup window. It will add all the necessary files to your angular 2 projects.
- 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://unpkg.com/reflect-metadata@0.1.3/Reflect.js”></script>
<script src=”https://unpkg.com/systemjs@0.19.31/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 the .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.
Project Files
- country.ts
All the necessary files are of TypeScript with a .txt extension. Look at the country.ts file, in which we only have that class with its default constructor.
- state.ts
The 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.
- 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 selecting any in the drop-down menu.
1. countryListComponent (TypeScript File)
Include the component along with the event handling.
- countryListComponent (HTML File)
In this file, you can have the layout of your components.
- main.ts File
index.html File
Include all the relevant libraries here and run it on the browser
Conclusion
Vizteck Solutions is a leading web and mobile development company for 14 years. We have JS developers that are striving to move towards the updated development practices for the front end as well as the back end.