Nowadays JavaScript is the most widely used technology for building Web and Mobile based applications. Angular JS is the core reason behind the popularity of JavaScript. It’s time for Angular 2, framework for both Mobile and Web applications. If your are not tried Angular 2 yet, please visit the official site https://angular.io/ for more details. In this write up, we will be talking about couple of angular 2 developer tools which will make Angular 2 life easier.
Visual Studio Code (IDE)
An open source IDE form Microsoft. Angular 2 application are written in Typescript, which is developed by Microsoft on a larger extend. So this make sense for Visual studio code built in support for Typescript. Visual studio code supports syntax, error highlighting and autocomplete for Typescript. And there are plenty of other plugins available for building a better development environment.
Main features of Visual studio code are:
- Debug code right from the editor.
- Git integration.
- Code autocomplete and syntax highlighting.
- Extensive collection of plugins.
For downloading Visual studio code, please visit:
Augury
Augury is a Google Chrome developer extension for debugging and profiling Angular 2 applications. It is an open source project, developed by google and rangle.io. Using Augury, we will get details about component trees, router trees and component class properties.
Features of Augury
-
Component Tree
As we know that Angular 2 applications are built on components. So there should be nesting of components to meet that requirements. While nesting the components, it will create a tree structure. So if we need to analyze or understand properties of some of the components, it will be difficult to get the information from code. Here we can use Augury to get the information, by simply selecting the component from Augury console.
-
Router Tree
Router tree will help us to get information about the routes in our Angular 2 application. Augury will visualize the application route in a tree structure. So it will be easy to understand. By selecting each route in the tree, you will get more information about the same.
Angular2 CLI
Angular2 CLI help us to create prototype of Angular2 application, which works already and follows the best practices. It provides options to create an application, generate the components, serve and test the application. So using angular-cli we can create a prototype and then we can add our custom functionalities to build the application.
Angular2 CLI and generated projects have dependencies that require Node 4 or higher and NPM 3 or higer.
we can install angular CLI using the following command:
npm install -g angular-cli
Then for creating and running project:
ng new PROJECT_NAME cd PROJECT_NAME ng serve
Then for accessing the application, please navigate to: http://localhost:4200/.
The application will reload automatically when ever you update the source code.
for adding a new component we just need to run the below command:
ng generate component my-new-component
ng generate component my-new-component
The same way we can create Directive, Pipe, Service, Class, Interface, Enum and Modules
For more details and options please visit: https://github.com/angular/angular-cli
These are some useful angular 2 developer tools, which mostly used and recommended. we will be back with some useful angular 2 stuffs, please subscribe technobytz.com for any updates.
