At the end of 2014 Google announced that Angular 2 would be a complete rewrite of AngularJS, and they even created a new language
AtScript that was meant to be used for writing Angular 2 applications.
Microsoft agreed to add support for decorators to their
TypeScript comes with a static code analyzer, and as you enter code in your TypeScript-aware IDE (WebStorm , Visual Studio Code, Sublime Text, etc.) you’re guided by context sensitive help suggesting the available methods in the object or types of the function argument. If you accidentally use an incorrect type, the IDE will highlight the erroneous code.
Angular 2 application can be developed in ES5, EcmaScript 2015, TypeScript or Dart, but the framework lends itself best to TypeScript. Writing in TypeScript requires a bit more setup but the return on investment is tenfold in terms of productivity and clarity in our code. Instructions for how your TypeScript code will be transpiled to are typically defined in a tsconfig.json in your application root folder.
Angular 2 is not an MVC framework, but rather a component-based framework. In Angular 2 an application is a tree of loosely coupled components. Component communication should be implemented in a loosely coupled manner. Components can declare input and output properties. To pass the data from a parent to a child component, the parent binds the values to the input properties of the child. The child has no need to know who provided the values; it just knows it needs to use the data to perform some action.
Node and Npm
To develop an angular2 you’ll most probably use
install Node Version Manager (NVM)
You can develop using angular using nearly any Development IDE or even simply any text editor.
My preferred Editors are :
There are a number of starter kits available that will assist you in getting started with an angular project really quickly.
Angular-Cli is one such quick starter guides. For the purpose of this guide I will assume you are running on a *nix based system and have access to the bash. You will also need to ensure you have node and npm installed.
ng init command will bootstrap our application, download all the external dependencies we’ll need, configure webpack, and basically do all grunt set up work for you.
Once the ng init has completed the setup process, navigate to
localhost:4200 and you will see a message saying “app works!”.
We now have a very basic application we can now continue to work with. We will now just carry out some simple refactoring to help make us familiar with the project structure and make it easier to work with.
The first thing we would like to do is create a
components folder under the app folder in order to create individual folders for our components. We will also create a new
app folder under our component folder
We will also move 4 files in order that they are under our new app folder.
There is one line we need to change in the
Angular Modules help to organize an application into cohesive blocks of functionalities and extend it with capabilities from external libraries.
The @NgModule is needed to:
- Configuration of the template compiler.
- Provide compilation context (which directives/pipes are visible in a directive) for the template compiler. (Visibility of components, directives, pipes, and eventually schema)
- Provide a way to have ambient directives (such an ngIf, ngFor, …) in the way which is scoped to a set of directives (such as Material Design, Ionic, Forms, etc)
- Provide a mental model for reusable libraries: (such as Material Design, Ionic, Forms, etc)
- Defines how to create an injector using the providers defined in the module and modules it recursively imports.
- Configuration (and composition) of the injector through providers.
- Eager initialization.
Add General Style sheet
We also want to add the bootstrap styles so we can style the application a little easier. For now we just include the following link to the bootsrtap ccs CDN in the
This will enable us to use bootstrap styles as the basis for our application styles.
Although this is not strictly Angular 2 but it’s just a little fun to get familiar with the structure, of the files. We’ll just edit the
app.component.html to include a div container.
app.component.html will contain all the html mark up for our component. This enables us to have a separation of concerns within our code, so we don’t intermingle our typescript code with our TypeScript code.
We will just wrap our header tags in container
Each of your components may require there our customizations of css, which you don’t want to spread across the entire application. Adding styles to your
app.component.css enables you to add these styles.
We’ll just add a simple style rule for to make the
h1 to red.
We’ll now change the title that is displayed on the page as it’s displayed, by editing
A quick review of the app.component file we’ll notice that it defines it selector, template Url and style Urls and imports any additional modules it may require.
All the code we need to implement functionality within our component will be added here.
Build and Serve
We are now finally ready to examine our handy work. We will need to build our application and then serve it.
In order to build the application we will use
ng build in the integrated terminal window of VS Code
If there are no errors we are now ready to serve our application using
Now if you browse to
http://localhost:4200 , we will view our finished starter application and it should now look like this.