Angular 2 is the next version of AngularJS (a popular JavaScript framework backed by Google) to create single page applications or mobile apps.
If you have worked with Angular JS (1.x), it is viewed as MV* (Model View Controller or Model View ViewModel) based framework, where we create (or use already created) Modules, Controllers, Directives, and HTML templates (as Views). AngularJS is known for expressive HTML (you can use ngIf, ngRepeat), powerful data bindings ({{bindings}}) , modular design, and built-in services ($http, etc).
Angular 2 is complete rewrite of Angular 1.x to avoid its shortcomings.
- It is faster in terms of rendering and change detection.
- It is mobile oriented (Angular 1.x was not built with mobile support in mind).
- It has a components-based approach instead of Controllers.
A single page application could be viewed as a root component that may contain several other components. A component is basically a logical collection of HTML template, associated style, and models that would operate on a template using Angular 2 bindings.
![]()
As shown in the above figure, we can think of our application in terms of components. The root component consists of Top-Navbar and Content. Similarly, Content consists of Tables which have Table-View.
The framework is designed in such a way that each component should be independently testable and maintainable, using several ways including dependency injection.
We shall see more in detail while we proceed with the tutorial.
Getting Angular 2 Start kit
![]()
So, Angular 2 Project Structure is not as straightforward as it was earlier. So, it's better to download a project structure with most common configuration and quickly start development.
There is a quick start kit available from an Angular team or you may use Angular CLI to create a project using commands, as shown in the figure.
We will understand more when we start our project in the next post.
You may use JavaScript, TypeScript, or DART for Angular 2 development. I personally believe, since
Angular 2 itself is developed using Typescript, also the community is going with TypeScript, so it's better to go for TypeScript.
Note - If you are beginner for TypeScript , just go through TypeScript playground and you will get a pretty good idea of how to work with TypeScript. It's really pretty straight forward and will not take much time.
Go ahead and create your first project now, using Angular CLI. It's really easy and fun.
Installing Angular CLI
- Install the latest NodeJS from their website for your OS. It will install npm, the NuGet Package Manager.
- Install Angular-CLI using command
1. npm install -g angular-cli
Creating Project using Angular-CLI
ng new myProject
![]()
As you can see, the Angular- CLI has created project structure that is ready to be used.
Please note that this process may take a long time, as it downloads and installs all the required npm packages and tools from the web.
Now, open the folder in Visual Studio Code or any other editor of your choice. In the next post, we will navigate to and understand the main files to get started with basic Hello world app.