Building a website for today and tomorrow begins with Angular. Yes I am a proponent of Angular over many other client frameworks. Let’s look over the goals of this post to help you get started.
- Node.js
- Angular-Cli
- Angular Workspace
- Angular Material
Installing Node.js
Installing Angular-Cli
Installing and using Angular-Cli for your development will download the latest version of Angular for your project and help in creating components, libraries, and applications. To install Angular-Cli open your command prompt and enter the following command:
npm install -g @angular/cli
Setting up your Angular Workspace
ng new foo
Now if you want to create an Angular Library, then you need to create your workspace without an application, then create your library, and finally create your test application. Follow these steps, for a library named
ng new foo --create-application=false
cd foo
ng generate library foo-lib --prefix=foo
ng generate application foo-tester
Your foo-lib and foo-tester will be located under a projects directory, located directly under foo.
Installing Angular Material
Angular Material provides excellent components and theming support to build your application on. It keeps pace with Angular to take advantage of new features. To install Angular Material from your foo directory run the command:
npm install --save @angular/material @angular/cdk @angular/animations
npm install --save hammerjs
Configuring Angular Material in your application
In your FooAppModule you need to add support for BrowserAnimationsModule. Add the following import lines to your module:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class FooAppModule { }
Next you need to add in your component modules:
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule } from '@angular/material';
import { MatAutocompleteModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatRadioModule } from '@angular/material';
import { MatSelectModule, MatSliderModule, MatSlideToggleModule, MatDividerModule, MatExpansionModule } from '@angular/material';
import { MatStepperModule, MatTabsModule, MatTreeModule, MatButtonToggleModule, MatBadgeModule, MatChipsModule } from '@angular/material';
import { MatProgressSpinnerModule, MatProgressBarModule, MatRippleModule, MatBottomSheetModule, MatDialogModule } from '@angular/material';
import { MatSnackBarModule, MatTooltipModule, MatPaginatorModule, MatSortModule, MatTableModule } from '@angular/material';
@NgModule({
...
imports: [BrowserAnimationsModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatGridListModule,
MatCardModule,
MatMenuModule,
MatAutocompleteModule,
MatCheckboxModule,
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
MatRadioModule,
MatSelectModule,
MatSliderModule,
MatDividerModule,
MatStepperModule,
MatTabsModule,
MatTreeModule,
MatButtonToggleModule,
MatBadgeModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatRippleModule,
MatBottomSheetModule,
MatDialogModule,
MatSnackBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
...
})
export class FooAppModule{ }
Theme Configuration
- deeppurple-amber.css
- indigo-pink.css
- pink-bluegrey.css
- purple-green.css
To do this add the following to your styles.css line:
@import "~@angular/material/prebuilt-themes/purple-green.css"
Adding Gesture Support
You already downloaded and installed hammerjs which provides you with gesture support. This is used by some of the material components. To enable, in your src/main.ts fille add the following:
import 'hammerjs';
Adding Material Icons
You need to add in the Material Design Icons. To do this add the following line to your index.html for your application:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Building your Library
If you did a library in your workspace you need to do the following to build it.
cd food
ng build foo-lib
Using your Library
Now if you wish to use your library, in your application import in your module into:
import { FooLibModule } from 'foo-lib';
@NgModule({
...
imports: [
FooLibModule,
...
],
...
})
export class FooAppModule{ }
Starting your Application
To start serving your application run the following command:
ng serve --open
This will have your application listening on http://localhost:4200/ and open your browser to this address for you.