v
Angular Development Project Setup
Prerequisites For Angular
§ HTML
§ CSS
§ JAVASCRIPT
§ Basic of TypeScript
§ Get
started with angular you need to know the basics of HTML CSS and JavaScript.
§ Angular
however make use of typescript a very basic knowledge of typescript makes a lot
of difference.
v
Angular Development project
setup
§
Installing the tools required
§
Node: Install the latest version of
node. Here is the link to download and install the latest version
https://nodejs.org/en/download/
https://nodejs.org/en/download/
§
Once we have installed the NodeJS. if we
want to check NodeJS is installed in our machine or not then Run windows
command prompt as an administrator and execute the following command to verify
the version of node installed on your machine.
node -v
Angular CLI :
§ Install the latest version of Angular CLI by executing the following command from the windows command prompt.
npm install -g @angular/cli
node -v
Angular CLI :
§ Install the latest version of Angular CLI by executing the following command from the windows command prompt.
npm install -g @angular/cli
§ I
have installed on my machine. To verify the version of Angular CLI installed on
your machine execute the following command.
ng -v
ng -v
§ After
you have the latest version of Node and Angular CLI installed, launch windows
command prompt as an administrator and execute the following command.
ng new AngularDemo
§ This
creates a new AngularProject with name AngularDemo.
§ If
we would like to add angular routing then press y otherwise press N here we don’t
required Angular routing so we press N.
§ This
command creates a new Angular Project with name AngularDemo. In windows command
prompt change to the directory that contains your angular project using the
following command.
cd AngularDemo
§ Once
you are in the project directory, execute the following command to open the
project with Visual Studio Code, by executing the following command from the
windows command prompt
code .
§ If
we required Bootstrap for styles in our application then install Bootstrap by
executing the following command from the command prompt.
npm install bootstrap@3 –save
§ Once
Bootstrap is installed, open. angular-cli.json file and specify the path to the
Bootstrap stylesheet (bootstrap.min.css) in the styles property as shown below.
"node_modules/bootstrap/dist/css/bootstrap.min.css"
§ At
this point, save all the changes and run the angular project using the
following command. This command not only compiles the angular application
ng serve -o
§ Next, include the
following into the <head> of index.html to make use of Material Design
icons:
ng serve -o
Configure your Angular
Project to use Angular Material
§ To
get started using an Angular Material, of course the first thing that you need
to do is to install the Angular Material module. So, at the prompt type
npm install --save @angular/material
§ In
addition, the material module requires the installation of CDK. So, we'll also
install that by doing
npm install @angular/cdk@6.4.7 –save
§ Angular
Material makes use of the Angular cdk for its components. In addition, when you
are using Angular Material, you also need to import the Angular animations
module into your Angular application.So, let's go ahead and install that
too.
npm install @angular/animations@6.1.7 --save
§ Another
module that I will install together is called HammerJS. The HammerJS module is
used by Angular for supporting some gestures within your Angular application.
So, that's the reason why we install HammerJS also within our application.
npm install hammerjs@2.0.8 --save
v To configure your project to use Angular material, type the
following at the prompt to install Angular Material, Angular Animations and
HammerJS:
npm install @angular/material@6.4.7 --save
npm install @angular/cdk@6.4.7 --save
npm install --save @angular/animations@6.1.7
Configure to use
Material Design Icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Configure your Angular
Project to use Angular Flex Layout
§ I'm
going to move on to install the Angular Flex-Layout within my Angular
application.
npm install --save @angular/ flex-layout
npm install --save @angular/flex-layout@6.0.0-beta.18
Updating AppModule
§
Then,
you need to import the Angular Animations Module, Angular Material Toolbar
Module, Flex Layout Module and hammerjs into your root module
(src/app/app.module.ts) as follows:
import { BrowserModule
} from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//importing
BrowserAnimationsModule,MatToolbarModule,FlexLayoutModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule
} from '@angular/material/toolbar';
import { FlexLayoutModule
} from '@angular/flex-layout';
import { AppComponent
} from './app.component';
@NgModule({
declarations:
[
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatToolbarModule,
FlexLayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Adding
a Material Toolbar
§
Open
app.component.html and replace its contents with the following code:
<mat-toolbar color="primary"> <span>Gravity4Tech.blogspot.com</span> </mat-toolbar>
Adding
Styles
§
Add
the following styles to styles.scss file:
/* You can add global styles to this file, and
also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
}
§ At
this point, save all the changes and run the angular project using the
following command. This command not only compiles the angular application
ng serve -o
Author Name
Author Description!
Get Free Email Updates to your Inbox!
Post a Comment