Skip to content

Commit 3bc2c86

Browse files
CodebitsDesignCodebitsDesign
committed
first commit
1 parent 16615d8 commit 3bc2c86

12 files changed

+439
-9
lines changed

‎.angular-cli.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121
"styles": [
2222
"styles.css"
2323
],
24-
"scripts": [],
24+
"scripts": [
25+
"../node_modules/hammerjs/hammer.min.js"
26+
],
2527
"environmentSource": "environments/environment.ts",
2628
"environments": {
2729
"dev": "environments/environment.ts",

‎README.md

+293
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,296 @@ Before running the tests make sure you are serving the app via `ng serve`.
2626
## Further help
2727

2828
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
29+
30+
--------------------------------------------------
31+
32+
## Frontend Setup
33+
The frontend is suggested to be setup with [Angular Cli](https://github.com/angular/angular-cli).
34+
35+
Prerequisites:
36+
```bash
37+
$ sudo yarn global add @angular/cli
38+
or,
39+
$ sudo npm install -g @angular/cli
40+
```
41+
42+
### Creating the Angular App:
43+
```bash
44+
$ ng new angular4-material-frontend --skip-npm
45+
$ cd angular4-material-frontend
46+
$ yarn
47+
48+
$ ng serve
49+
// And open http://localhost:4200 in your browser.
50+
```
51+
52+
### Adding Angular Material
53+
Material Design components for Angular apps
54+
<https://material.angular.io/guide/getting-started>
55+
[Getting Started With Angular Material 2](https://alligator.io/angular/angular-material-2/)
56+
[Setting up your first Angular 2 Project Using Angular Material 2](https://medium.com/@ladyleet/setting-up-your-first-angular-2-project-using-angular-material2-5db18a174165)
57+
58+
Step 1. Install angular-material & hammerjs
59+
```bash
60+
$ yarn add @angular/material @angular/animations
61+
$ yarn add hammerjs
62+
$ yarn add @types/hammerjs --dev
63+
```
64+
> `Hammer.js` is an optional dependency and helps with touch support for a few of the components (md-slide-toggle, md-slider, mdTooltip).
65+
66+
In your `app.module.ts`, make sure to `import hammerjs`.
67+
```typescript
68+
import 'hammerjs';
69+
```
70+
71+
In your `tsconfig.json`, add hammerjs to the types section.
72+
```json
73+
"types": [
74+
"hammerjs"
75+
]
76+
```
77+
78+
79+
Step 2. angular-cli.json
80+
If you decide to use `Hammer.js`, and given that you’ve started your project with the `Angular CLI`, modify your `angular-cli.json` file to add the Hammer.js library.
81+
```json
82+
...
83+
"apps":[
84+
{
85+
...
86+
"scripts": [
87+
"../node_modules/hammerjs/hammer.min.js" // Add path for hammer.js
88+
],
89+
}
90+
],
91+
```
92+
> You may need to restart your local server for the changes to angular-cli.json to take effect.
93+
94+
95+
Step 3. Add Angular Material to your app module
96+
Import MaterialModule and add it to your imports. You’ll also need to import the necessary for animations in your module (e.g: app.module.ts).
97+
```typescript
98+
import { BrowserModule } from '@angular/platform-browser';
99+
import { NgModule } from '@angular/core';
100+
import { FormsModule } from '@angular/forms';
101+
import { HttpModule } from '@angular/http';
102+
//>> Add Angular Material
103+
import { MaterialModule } from '@angular/material';
104+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
105+
//<<
106+
107+
import { AppComponent } from './app.component';
108+
109+
@NgModule({
110+
declarations: [
111+
AppComponent
112+
],
113+
imports: [
114+
BrowserModule,
115+
FormsModule,
116+
HttpModule,
117+
MaterialModule, // Add Angular Material
118+
BrowserAnimationsModule // Add Angular Animations
119+
],
120+
exports: [
121+
MaterialModule // Add Angular Material
122+
],
123+
providers: [],
124+
bootstrap: [AppComponent]
125+
})
126+
export class AppModule { }
127+
128+
```
129+
130+
Step 4. Import a pre-built theme and Material icons
131+
132+
There are a few pre-built themes installed automatically with Angular Material. These set the colors and basic styling.
133+
The available themes are: `indigo-pink`, `deeppurple-amber`, `purple-green` and `pink-bluegrey`.
134+
135+
You can also have access to the `Material Design icons` and use named icons with `<md-icon>`.
136+
To import both a theme and the Material Design icons to your project, you would add this to your global `styles.css` or `index.html`:
137+
138+
> @import prevents parallel downloads, use `<link>` instead.
139+
140+
in `src/idex.html`:
141+
```html
142+
<head>
143+
...
144+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
145+
<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
146+
</head>
147+
```
148+
149+
, or in `src/styles.css`:
150+
```css
151+
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
152+
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
153+
```
154+
Use `LINK` instead of `@import` if you want stylesheets to download in parallel resulting in a faster page.
155+
[don’t use @import](http://www.stevesouders.com/blog/2009/04/09/dont-use-import/)
156+
157+
158+
Step 5. Angular Material is ready!
159+
[Material Icons Guide](https://google.github.io/material-design-icons/)
160+
Material icons look best at 24px, to be shown in either 18, 24, 36 or 48px. The default being 24px.
161+
```html
162+
<md-icon>face</md-icon>
163+
164+
<i class="material-icons md-48">face</i>
165+
166+
<i class="material-icons">face</i>
167+
168+
<i class="material-icons md-48" md-tooltip="Android" tooltip-position="above">android</i>
169+
170+
```
171+
172+
Some markup for a template of a sample app.
173+
in `src/app/app.component.html`:
174+
```html
175+
<!doctype html>
176+
<h1>
177+
{{title}}
178+
</h1>
179+
180+
<h3>Material in Angular 4</h3>
181+
<div>
182+
<md-icon class="md-48" md-tooltip="Face" tooltip-position="below">face</md-icon>
183+
184+
<i class="material-icons md-18">face</i>
185+
186+
<i class="material-icons md-24">face</i>
187+
188+
<i class="material-icons md-36">android</i>
189+
190+
<i class="material-icons md-48" md-tooltip="Android" tooltip-position="above">android</i>
191+
</div>
192+
193+
<div> Material Icons:
194+
<i class="material-icons md-dark">face</i>
195+
<i class="material-icons md-dark md-inactive">face</i>
196+
<i class="material-icons md-light">face</i>
197+
<i class="material-icons md-light md-inactive">face</i>
198+
<i class="material-icons orange600">face</i>
199+
</div>
200+
<div>
201+
<md-toolbar color="primary">
202+
<span><md-icon class="md-48">mood</md-icon></span>
203+
204+
<span>Yay, Material in Angular 4!</span>
205+
206+
<button md-icon-button [md-menu-trigger-for]="menu">
207+
<md-icon>more_vert</md-icon>
208+
</button>
209+
</md-toolbar>
210+
<md-menu x-position="before" #menu="mdMenu">
211+
<button md-menu-item>Option 1</button>
212+
<button md-menu-item>Option 2</button>
213+
</md-menu>
214+
215+
<md-card>
216+
<button md-button>All</button>
217+
<button md-raised-button>Of</button>
218+
<button md-raised-button color="primary">The</button>
219+
<button md-raised-button color="accent">Buttons</button>
220+
<a md-fab color="primary"><md-icon>check</md-icon></a>
221+
<a md-mini-fab md-tooltip="Material design Mini Fab" tooltip-position="above" color="primary"><md-icon>check</md-icon></a>
222+
<button md-button md-tooltip="some message" tooltip-position="above">Button</button>
223+
</md-card>
224+
225+
<span class="done">
226+
<button md-fab>
227+
<md-icon>check circle</md-icon>
228+
</button>
229+
</span>
230+
</div>
231+
```
232+
233+
And to this we added only the following CSS to our global `styles.css`.
234+
in `src/styles.css`:
235+
```css
236+
/* Rules for sizing the icon. */
237+
.material-icons.md-18 { font-size: 18px; }
238+
.material-icons.md-24 { font-size: 24px; }
239+
.material-icons.md-36 { font-size: 36px; }
240+
.material-icons.md-48 { font-size: 48px; }
241+
242+
/* Rules for using icons as black on a light background. */
243+
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
244+
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
245+
246+
/* Rules for using icons as white on a dark background. */
247+
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
248+
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
249+
250+
.material-icons.orange600 { color: #FB8C00; }
251+
252+
body {
253+
margin: 0;
254+
font-family: Roboto, sans-serif;
255+
}
256+
257+
md-card {
258+
max-width: 80%;
259+
margin: 2em auto;
260+
text-align: center;
261+
}
262+
263+
md-toolbar-row {
264+
justify-content: space-between;
265+
}
266+
267+
.done {
268+
position: fixed;
269+
bottom: 20px;
270+
right: 20px;
271+
color: white;
272+
}
273+
274+
```
275+
276+
Step 6. Running unit tests
277+
> ISSUE: Angular2 material 'md-icon' is not a known element with Karma / Jasmine testing
278+
> WARN: 'Could not find Angular Material core theme. Most Material components may not work as expected.
279+
280+
Change the following to add Angular Material
281+
in `src/app/app.component.spec.ts`:
282+
```typescript
283+
import { TestBed, async } from '@angular/core/testing';
284+
import { AppComponent } from './app.component';
285+
import { MaterialModule } from '@angular/material'; //Add Angular Material
286+
287+
describe('AppComponent', () => {
288+
beforeEach(async(() => {
289+
TestBed.configureTestingModule({
290+
imports: [ MaterialModule ], //Add Angular Material
291+
declarations: [
292+
AppComponent
293+
],
294+
}).compileComponents();
295+
}));
296+
...
297+
```
298+
299+
Modifying `karma.conf.js` to include a theme
300+
```javascript
301+
files: [
302+
{ pattern: './src/test.ts', watched: false },
303+
// Include a Material theme in the test suite.
304+
{ pattern: './src/index.html', watched: true},
305+
{ pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css' }
306+
],
307+
```
308+
309+
> WARN: 'Could not find HammerJS. Certain Angular Material components may not work correctly.'
310+
311+
in your `src/polyfills.ts` (recommanded to have a one if you have not):
312+
```typescript
313+
import 'hammerjs/hammer'; // Included with Angular Material
314+
```
315+
316+
Then, run `ng serve` or `ng test`.
317+
```bash
318+
$ ng serve
319+
or
320+
$ ng test
321+
```

‎karma.conf.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,21 @@ module.exports = function (config) {
1010
require('karma-chrome-launcher'),
1111
require('karma-jasmine-html-reporter'),
1212
require('karma-coverage-istanbul-reporter'),
13-
require('@angular/cli/plugins/karma')
13+
require('@angular/cli/plugins/karma'),
1414
],
1515
client:{
1616
clearContext: false // leave Jasmine Spec Runner output visible in browser
1717
},
1818
files: [
19-
{ pattern: './src/test.ts', watched: false }
19+
{ pattern: './src/test.ts', watched: false },
20+
{ pattern: './src/index.html', watched: true},
21+
{ pattern: './src/styles.css', watched: true},
22+
// Include a Material theme in the test suite.
23+
{ pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true},
24+
{ pattern: './node_modules/hammerjs/hammer.min.js', included: true, watched: true },
25+
// Include all Angular dependencies
26+
// {pattern: './node_modules/@angular/**/*', included: false, watched: false},
27+
// {pattern: './node_modules/rxjs/**/*.js', included: false, watched: false},
2028
],
2129
preprocessors: {
2230
'./src/test.ts': ['@angular/cli']

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,25 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15+
"@angular/animations": "^4.0.3",
1516
"@angular/common": "^4.0.0",
1617
"@angular/compiler": "^4.0.0",
1718
"@angular/core": "^4.0.0",
1819
"@angular/forms": "^4.0.0",
1920
"@angular/http": "^4.0.0",
21+
"@angular/material": "^2.0.0-beta.3",
2022
"@angular/platform-browser": "^4.0.0",
2123
"@angular/platform-browser-dynamic": "^4.0.0",
2224
"@angular/router": "^4.0.0",
2325
"core-js": "^2.4.1",
26+
"hammerjs": "^2.0.8",
2427
"rxjs": "^5.1.0",
2528
"zone.js": "^0.8.4"
2629
},
2730
"devDependencies": {
2831
"@angular/cli": "1.0.0",
2932
"@angular/compiler-cli": "^4.0.0",
33+
"@types/hammerjs": "^2.0.34",
3034
"@types/jasmine": "2.5.38",
3135
"@types/node": "~6.0.60",
3236
"codelyzer": "~2.0.0",
@@ -35,9 +39,9 @@
3539
"karma": "~1.4.1",
3640
"karma-chrome-launcher": "~2.0.0",
3741
"karma-cli": "~1.0.1",
42+
"karma-coverage-istanbul-reporter": "^0.2.0",
3843
"karma-jasmine": "~1.1.0",
3944
"karma-jasmine-html-reporter": "^0.2.2",
40-
"karma-coverage-istanbul-reporter": "^0.2.0",
4145
"protractor": "~5.1.0",
4246
"ts-node": "~2.0.0",
4347
"tslint": "~4.5.0",

0 commit comments

Comments
 (0)