Creating your first app using Angular.io

Do something today that your future self will thank you for

We have created this tutorial to make you up and running with Angular.io in 10 minutes. This is not a very detailed tutorial incase you are not familiar with Angular basics, please refer Angular.io documentation to get more details on the core concepts.

We'll create our working app in Angular2 and it will look as below

example of angular2 app

Step1:-Starting with quickstart to create the setup for Angular2
a)Clone Quickstart into given folder ( say frontend)

git clone https://github.com/angular/quickstart.git learning

Cloning into 'learning'...
remote: Counting objects: 1352, done.
remote: Total 1352 (delta 0), reused 0 (delta 0), pack-reused 1352
Receiving objects: 100% (1352/1352), 1.11 MiB | 0 bytes/s, done.
Resolving deltas: 100% (745/745), done.
Checking connectivity... done.

b) cd into the folder and install all the dependencies.
npm install 

c) Run the default angular App
npm start
running angular cli

Now we are good with our angular setup, lets go ahead and create our own component. app.

Step2:-Creating our first Component

What is a component?
Components allow us to create different views, an angular app is a tree of angular components. These are subsets of directives ( from Angular -1) but unlike directives, components always consists of a template and only 1 component per selector ( like message selector that we'll use in further steps) is instantiated. Each component need to be registered in ng-module ( the main component in angular) so that it can used by another components in a application.

Creating component:-
Add new file under apps folder with .ts extension

adding ts file in angular2

  • import components library inside this file
  • create template
  • create decorator 

creating component in angular

Using this component:-

Export this component in the component where we want to use
Register the component in the ng-module 
using component in angular2

Adding dummy data into component like 

//Taking dummy data
messages = [
text : 'Text1',
owner : 'Tim'
text : 'Text2',
owner : 'Paul'

Step3:-Making our UI look better
We'll add material library from Angular.

a)Add material lib
npm install --save @angular/material @angular/cdk
b)Import the .css into index.html file

c)Add newly installed library into ng-module 
adding material component in ng-module

d)Add this into module loader ( systemjs)
adding material component in systemjs of angular2

Learn more JS


Post a Comment

Feel free to share your thoughts and experiences, to enhance Ppl learning.