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
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.
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.
Add new file under apps folder with .ts extension
- import components library inside this file
- create template
- create decorator
Step3:-Making our UI look better
We’ll add material library from Angular.
a)Add material lib
npm install --save @angular/material @angular/cdk