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.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n 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 Your foo-lib and foo-tester will be located under a projects directory, located directly under foo.<\/p>\n\n\n\n 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:<\/p>\n\n\n\n In your FooAppModule you need to add support for BrowserAnimationsModule. Add the following import lines to your module:<\/p>\n\n\n\n Next you need to add in your component modules:<\/p>\n\n\n\n To do this add the following to your styles.css line:<\/p>\n\n\n\n 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:<\/p>\n\n\n\n You need to add in the Material Design Icons. To do this add the following line to your index.html for your application:<\/p>\n\n\n\n If you did a library in your workspace you need to do the following to build it.<\/p>\n\n\n\n Now if you wish to use your library, in your application import in your module into:<\/p>\n\n\n\n To start serving your application run the following command:<\/p>\n\n\n\nInstalling Angular-Cli<\/h3>\n\n\n\n
npm install -g @angular\/cli<\/code><\/pre>\n\n\n\nSetting up your Angular Workspace<\/h3>\n\n\n\n
ng new foo<\/code><\/pre>\n\n\n\nng new foo --create-application=false\ncd foo\nng generate library foo-lib --prefix=foo\nng generate application foo-tester<\/code><\/pre>\n\n\n\nInstalling Angular Material<\/h3>\n\n\n\n
npm install --save @angular\/material @angular\/cdk @angular\/animations\nnpm install --save hammerjs<\/code><\/pre>\n\n\n\nConfiguring Angular Material in your application<\/h4>\n\n\n\n
import {BrowserAnimationsModule} from '@angular\/platform-browser\/animations';\n\n@NgModule({\n ...\n imports: [BrowserAnimationsModule],\n ...\n})\nexport class FooAppModule { }<\/code><\/pre>\n\n\n\nimport { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule } from '@angular\/material';\nimport { MatAutocompleteModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatRadioModule } from '@angular\/material';\nimport { MatSelectModule, MatSliderModule, MatSlideToggleModule, MatDividerModule, MatExpansionModule } from '@angular\/material';\nimport { MatStepperModule, MatTabsModule, MatTreeModule, MatButtonToggleModule, MatBadgeModule, MatChipsModule } from '@angular\/material';\nimport { MatProgressSpinnerModule, MatProgressBarModule, MatRippleModule, MatBottomSheetModule, MatDialogModule } from '@angular\/material';\nimport { MatSnackBarModule, MatTooltipModule, MatPaginatorModule, MatSortModule, MatTableModule } from '@angular\/material';\n\n@NgModule({\n ...\n imports: [BrowserAnimationsModule,\n MatToolbarModule,\n MatButtonModule,\n MatSidenavModule,\n MatIconModule,\n MatListModule,\n MatGridListModule,\n MatCardModule,\n MatMenuModule,\n MatAutocompleteModule,\n MatCheckboxModule,\n MatDatepickerModule,\n MatFormFieldModule,\n MatInputModule,\n MatRadioModule,\n MatSelectModule,\n MatSliderModule,\n MatDividerModule,\n MatStepperModule,\n MatTabsModule,\n MatTreeModule,\n MatButtonToggleModule,\n MatBadgeModule,\n MatProgressSpinnerModule,\n MatProgressBarModule,\n MatRippleModule,\n MatBottomSheetModule,\n MatDialogModule,\n MatSnackBarModule,\n MatTooltipModule,\n MatPaginatorModule,\n MatSortModule,\n MatTableModule,\n ],\n ...\n})\nexport class FooAppModule{ }<\/code><\/pre>\n\n\n\nTheme Configuration<\/h4>\n\n\n\n
@import \"~@angular\/material\/prebuilt-themes\/purple-green.css\"<\/code><\/pre>\n\n\n\nAdding Gesture Support<\/h4>\n\n\n\n
import 'hammerjs';<\/code><\/pre>\n\n\n\nAdding Material Icons<\/h4>\n\n\n\n
<link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\nBuilding your Library<\/h3>\n\n\n\n
cd food\nng build foo-lib<\/code><\/pre>\n\n\n\nUsing your Library<\/h3>\n\n\n\n
import { FooLibModule } from 'foo-lib';\n\n@NgModule({\n ...\n imports: [\n FooLibModule,\n ...\n ],\n ...\n})\nexport class FooAppModule{ }<\/code><\/pre>\n\n\n\nStarting your Application<\/h3>\n\n\n\n
ng serve --open<\/code><\/pre>\n\n\n\n