ng5-material-initial Angular5 initial project installed with libraries which are needed for Angular Material
ng5-material-initial is an Angular5 initial project for programmers who want to start up Angular Material easily.
Video Explanation https://youtu.be/ttLh47qv9pk
Full Source Code https://github.com/Ohtsu/ng5-material-initial
At first, please refer to "Angular Material Getting started" page as follows.
https://material.angular.io/guide/getting-started
This project is based on the steps explained in the page.
The following "Step" number is based on the page. But the step 3 is not included because module names depend on the modules which you want to include.
-
@angular/material (Step 1)
-
@angular/cdk (Step1)
-
@angular/animations (including the modification of 'src/app/app.module.ts' file) (Step2)
-
Add default theme(indigo.pink.css) to styles.css file (step4)
-
hammerjs (including the modification of 'src/main.ts' file (step5)
-
Add the official Material Design Icons (modification of 'index.html' file) (Step6)
Of course, you can change the structure by modifying the following Package.json file.
"dependencies": {
"@angular/animations": "^5.0.1",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0-rc0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"core-js": "^2.4.1",
"gulp": "^3.9.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
- Git
- Node.js
- TypeScript2
- Angular5
- Angular/cli
To install this program:
- Make your own directory and change into it.
$ mkdir mydir
$ cd mydir
- Make the clone as follows.
$ git clone https://github.com/Ohtsu/ng5-material-initial.git
- Change into ng5-material-initial and run "npm install".
$ cd ng5-material-initial
$ npm install
If you start local server as follows, you can get the first page in your browser by accessing http://localhost:4200.
$ ng serve
- First Page
Input Ctrl+C and y+Return to stop the local server.
- ng5-material-initial : 0.1
- Angular5 : 5.0.0
- @angular/cdk : 5.0.0-rc0
- @angular/material : 5.0.0-rc0,
- hammerjs : 2.0.8
- @angular/cli : 1.5.0
-
"Agular Material Getting started", https://material.angular.io/guide/getting-started
-
"Angular5 Custom Library: The definitive, step-by-step guide", https://www.udemy.com/draft/1461368/learn/v4/content
- 2017.11.15 version 0.1.1 uploaded
copyright 2017 by Shuichi Ohtsu (DigiPub Japan)
MIT © Shuichi Ohtsu