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.
Expectation:-
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.
Creating component:-
Add new file under apps folder with .ts extension
- import components library inside this file
- create template
- create decorator
Using this component:-
Export this component in the component where we want to use
Register the component in the ng-module
Adding dummy data into component like
Step3:-Making our UI look better
We’ll add material library from Angular.
a)Add material lib
npm install --save @angular/material @angular/cdkb)Import the .css into index.html file
c)Add newly installed library into ng-module
d)Add this into module loader ( systemjs)
