Angular Tutorial for beginner
How to setup local environment for Angular projects with example.
To start with your setup you need to have node and npm installed.
Installing npm from the Node.js site
Go to https://nodejs.org/en/download/ and select npm version based on your OS (Windows or Mac)
When you install node.js, npm is automatically installed.
To check npm is installed, run npm -v. it will give you installed npm version.
Another commands to install latest npm
npm install npm@latest -g
Now to make Angular development easy, you can install Angular CLI by using below command
npm install -g @angular/cli
To check available CLI commands type this.
ng help
Below are example for Angular CLI commands
Create New Angular 4 Project
ng new first-app
It will create Angular project first-app and will install required npm packages.
To start project, you can use
npm start
OR
ng serve
How to create Angular 4 Component
ng g component cities
How to create Router for The Newly Component
To make access the new component, we have to make routing for it. Open and edit src/app/app.module.ts the add this import.
import { RouterModule } from '@angular/router';
Now, create the route for component inside @NgModule imports section.
imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot([ { path: '', redirectTo: 'newComponentName'},
{ path: 'componentname', component: ComponentName } ])
],
Next, replace all tags in src/app/app.component.html with this tag.
<router-outlet></router-outlet>
this will help to install Angular at your machine with Angular CLI with example.