Develop hybrid apps with Ionic Framework and Angular Js - Alessio Delmonti
Creating Responsive Mobile Web Apps with Angular
58
Creating Responsive Mobile Web Apps with Angular and Angular Material Irvine, CA 16 August 2017
-
Upload
troy-miles -
Category
Software
-
view
179 -
download
3
Transcript of Creating Responsive Mobile Web Apps with Angular
Creating Responsive Mobile Web Apps with Angular and Angular Material
Irvine, CA 16 August 2017
Troy Miles• Troy Miles aka the RocknCoder
• 38+ years of programming experience
• Speaker and author
• bit.ly/rc-jquerybook
• @therockncoder
• lynda.com Author!
Kotlin for Java Developers
Agenda• Angular CLI
• Material Icons
• Angular Material
• Material Design Lite
• Summary
Tools
• install git
• install node.js
• upgrade npm npm install npm -g
• install Angular CLI npm install -g @angular/cli
Check Versionsapp command my version
git git —version 2.12.0
node.js node -v 7.9.0
npm npm —v 5.3.0
angular cli ng -v 1.3.0
Source & Slide• The source code is at:
• https://github.com/Rockncoder/github-stars-material-base
• The slides are at:
• https://www.slideshare.net/rockncoder/creating-responsive-mobile-web-apps-with-angular
• Remember to cd into the cloned repo and npm install
Angular CLI
• Command line interface for Angular
• Based on the ember-cli project
• Latest version is 1.3.0
Don’t Use Pre-Release Versions
• npm uninstall -g angular-cli
• npm uninstall --save-dev angular-cli
• npm uninstall -g @angular/cli
• npm cache clean
• rm -rf node_modules dist (use rmdir on Windows)
Installing
• npm install -g @angular/cli@latest
• npm install --save-dev @angular/cli@latest
• npm install
Application Root Directory
• All of the commands, for all of the tools are designed work on the application root directory
• If used anywhere else bad things will happen
• be sure you are in the app root
• double check that you are in the app root
naming convention
• Angular apps are usually built using lowercase kebab naming convention
• words are lowercase, dash as separator
• final word is the thing’s type, a dot is its separator
• if the thing is a class, no final word
name examples
• contact-details.component.ts
• results-list.component.spec.ts
• convert2k.pipe.ts
• git-hub.service.ts
Angular CLITool Command
New App ng new <app-name>
Web Server ng serve
Unit Test ng test
End to End Test ng e2e
Dev Build ng build dev
Production Build ng build prod
Create New ComponentsComponent CommandClass ng g class my-new-classComponent ng g component my-new-componentDirective ng g directive my-new-directiveEnum ng g enum my-new-enumGuard ng g guard my-new-guardInterface ng g interface my-new-interfaceModule ng g module my-modulePipe ng g pipe my-new-pipeService ng g service my-new-service
Roboto Font
Google Roboto Font
• This part isn’t necessary
• But it is a nice font
• Gives your website that authentic Google look
src/index.htmlindex.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Angular MDL</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet" type="text/css"> </head> <body> <app-root>Loading...</app-root> </body> </html>
src/styles.cssstyles.css
/* You can add global styles to this file, and also import other style files */ body { font-family: Roboto, sans-serif; font-size: 18px; }
Material Icons
Material Icons• Simple, modern, friendly, sometimes quirky icons
• Created using Google’s design guidelines
• Depict universal concepts in minimal form
• Legible in both large and small sizes
• Optimized for beauty
Licensing
• Licensed under Apache License Version 2.0
• You are free to remix and re-share
• You may give attribution, but not required
• You are not allowed to sell them
Downloading
• Download the latest from archive (~60mb)
• git clone http://github.com/google/material-design-icons/
• bower install material-design-icons
• npm install material-design-icons
Google Web Fonts
• Self-host (load fonts & setup CSS rules)
• Use Google Web Fonts
• <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Ligature SupportBrowser VersionChrome 11
Firefox 3.5
Internet Explorer (IE) 10
Opera 15
Safari 5
Android Browser 3.0
Mobile Safari iOS 4.2
Displaying Icons
• <i class=“material-icons">face</i>
• <i class=“material-icons"></i>
Rendering
• Best to copy the Unicode character 😼
• Browsers can’t render Unicode (U+1F63C)
• Browser can usually only render 4 digit hex codes so the above code won’t display
Angular Material
Why?
• There are already a lot of CSS frameworks
• Including Bootstrap and Foundation 3
• Why create a new one?
Components > Classes
• Less HTML markup
• Less errors
• Better tool support
• Help end <div> tag insanity
Installing
• npm install --save @angular/material
• npm i -S @angular/material
• Add MaterialModule to app.module.ts
• Add a theme or you won’t see any features
Create the Material Module
• ng g module app-material —
hammer.js
• Adds support for touch gestures
• Removes 300ms delay from clicks
• npm install --save hammerjs
• Import hammerjs in app.module.ts
Themes• Add one to your styles.css
• @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
• @import '~@angular/material/core/theming/prebuilt/indigo-pink.css';
• @import '~@angular/material/core/theming/prebuilt/pink-bluegrey.css';
• @import '~@angular/material/core/theming/prebuilt/purple-green.css';
Feature StatusFeature Statusbutton available
cards available
checkbox available
radio available
input available
sidenav available
toolbar available
Feature StatusFeature Statuslist available
grid-list available
icon available
progress-spinner available
progress-bar available
tabs available
slide-toggle available
Feature StatusFeature Statusbutton-toggle available
slider available
menu available
tooltip available
ripples available
dialog available
snackbar / toast available
Feature StatusFeature Statusselect available
textarea available
autocomplete initial version
chips initial version
theming available
doc site UX design in progress
typography not started
Feature StatusFeature Statusfab speed-dial not started
fab toolbar not started
bottom-sheet not started
bottom-nav not started
virtual repeat not started
datepicker in progress
data-table design in progress
Feature StatusFeature Statusstepper not started
tree not started
layout see angular/flex-layout
Cards > Lists
• Lists are great in a smart phone’s confined space
• Cards work well there as well and really shine on tablet and mobile
Material Design Lite
Why?
• Create by Google not long after the release of the material design specification
• Used by Google for their own websites
Components > Classes
• Less HTML markup
• Less errors
• Better tool support
Instead of this…<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6"><i class="material-icons">search</i>
</label><div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sample6"></div>
</div>
Only this…
<mdl-textfield type="text" [(ngModel)]="theText" icon="search"></mdl-textfield>
Feature StatusFeature Statusbadges available
buttons available
cards available
chips available
dialogs (imperative and declarative) available
icons available
loading available
Feature StatusFeature Statusshadow available
toggle (checkbox, radio, icon toggle, switch) available
lists available
slider available
snackbar available
table available
tooltips available
Feature StatusFeature Statusmenu available
layout (standard, scroll, waterfall, tabs) available
tabs available
textfields (multiline, expandable) available
Templates• Blog
• Android.com MDL Skin
• Dashboard
• Portfolio
• Text-heavy page
• Stand-alone article
Material Design Lite Extensions
• Back for a few more widgets
• npm install —save @angular-mdl/*
• The scss must be added to the webpack build pipeline
Extension FeaturesFeature Statusdate picker experimental
popover experimental
select experimental
extension panel experimental
App Icons
Adding Apple App Iconsindex.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Stars Material</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="assets/[email protected]"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root>Loading...</app-root> </body> </html>
Links• https://cli.angular.io/
• https://material.angular.io/
• https://getmdl.io/
• https://material.io/icons/
• http://mseemann.io/angular2-mdl/
• https://angular-md-color.com/#/
More Links• https://github.com/angular/angular-cli
• http://r12a.github.io/apps/conversion/
• https://unicode-table.com/en/
• https://developers.google.com/fonts/docs/getting_started
• https://fonts.google.com/specimen/Roboto
• http://mseemann.io/angular2-mdl-ext/
Summary
• Angular Material is not finished but it is usable
• Material Design Lite is frozen
• Angular Material is probably the better choice for new web sites
