Angular-material - RIP Tutorial
angular-material#angularmaterial
Table of ContentsAbout1Chapter 1: Getting started with ation or Setup4Installing Angular Material4Getting Started (blank shell)5Setting up with the CDN6Master (HEAD)7Chapter 2: md-button9Examples9Types of9Creating an icon button10Standard button11Chapter 3: md-card13Introduction13Remarks13Examples13Basic card with header13Card with actions13Card with Avatar and image14Chapter 4: md-chipsExamples1515Static chips15Setting the delay to select a new chip before refocusing on the input (1.1.2)15Credits17
AboutYou can share this PDF with anyone you feel could benefit from it, downloaded the latest versionfrom: angular-materialIt is an unofficial and free angular-material ebook created for educational purposes. All the contentis extracted from Stack Overflow Documentation, which is written by many hardworking individualsat Stack Overflow. It is neither affiliated with Stack Overflow nor official angular-material.The content is released under Creative Commons BY-SA, and the list of contributors to eachchapter are provided in the credits section at the end of this book. Images may be copyright oftheir respective owners unless otherwise specified. All trademarks and registered trademarks arethe property of their respective company owners.Use the content presented in this book at your own risk; it is not guaranteed to be correct noraccurate, please send your feedback and corrections to info@zzzprojects.comhttps://riptutorial.com/1
Chapter 1: Getting started with angularmaterialRemarksAngular Material is an UI component framework that allows you to produce single-page-applicationusing a set of predefined components and directives.VersionsVersionRelease ptutorial.com/2
VersionRelease l.com/3
VersionRelease lation or SetupInstalling Angular Materialnpmhttps://riptutorial.com/4
npm install angular-material --savebowerbower install angular-material --savejspmjspm install angular-materialFrom Cloudcdnjs jsdelivr googlecdnGetting Started (blank shell) html lang "en" head meta name "viewport" content "width device-width, initial-scale 1" !-- Angular Material style sheet -- link rel "stylesheet"href "http://ajax.googleapis.com/ajax/libs/angular material/1.1.4/angular-material.min.css" /head body ng-app "BlankApp" ng-cloak !-Your HTML content here-- !-- Angular Material requires Angular.js Libraries -- script src 5.11/angular.min.js" /script script src 5.11/angularanimate.min.js" /script script src 5.11/angulararia.min.js" /script script src 5.11/angularmessages.min.js" /script !-- Angular Material Library -- script src "http://ajax.googleapis.com/ajax/libs/angular material/1.1.4/angularmaterial.min.js" /script !-- Your application bootstrap -- script type "text/javascript" /*** You must include the dependency on 'ngMaterial'*/angular.module('BlankApp', ['ngMaterial']); /script /body /html https://riptutorial.com/5
Setting up with the CDNin the index.html, link the CSS from Google CDN link rel "stylesheet"href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angular-material.min.css" Required dependencies: angularangular-ariaangular-animateangular-messages !-- Angular Material requires Angular.js Libraries -- script src .5.5/angular.min.js" /script script src .5.5/angularanimate.min.js" /script script src .5.5/angulararia.min.js" /script script src .5.5/angularmessages.min.js" /script !-- Angular Material Library -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.1.0/angularmaterial.min.js" /script Link: tedindex.html !DOCTYPE html html ng-app "angularMaterial" head linkrel "stylesheet"href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angularmaterial.min.css" !-- Angular Material requires Angular.js Libraries -- scriptsrc .5.8/angular.min.js" /script script src .5.8/angularanimate.min.js" /script script src .5.8/angulararia.min.js" /script script src .5.8/angularmessages.min.js" /script !-- Angular Material Library -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angularmaterial.min.js" /script script src "app.js" /script title Angular Material /title /head body ng-controller "MainController" md-content {{content}} /md-content /body https://riptutorial.com/6
/html app.jsangular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).controller('MainController', function( scope) { scope.content "Your content goes here.";})Master (HEAD)index.html: html ng-app "masterAngularMaterial" head !-- This is important (meta) -- meta name "viewport" content "width device-width, initial-scale 1" !-- Angular and other dependencies -- scriptsrc .5.11/angular.min.js" /script script src .5.11/angularanimate.min.js" /script script src .5.11/angulararia.min.js" /script script src .5.11/angularmessages.min.js" /script !-- Angular Material -- script src ter/angularmaterial.min.js" /script link href ter/angularmaterial.min.css" rel "stylesheet" script src "/path/to/app.js" /script /head body md-content ng-controller "SomeController" {{content}} /md-content /body /html app.js:angular.module('masterAngularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).controller('SomeController', function( scope) { scope.content "Your content here.";})Note that importing from https://raw.githubusercontent.com will show this error:Refused to execute script from terial/master/angular-material.min.js' because its MIME type ('text/plain') is notexecutable, and strict MIME type checking is enabled.Read Getting started with angular-material online: l.com/7
aterialhttps://riptutorial.com/8
Chapter 2: md-buttonExamplesTypes ofMake sure you link the Angular and Angular Material libraries!index.html: html ng-app "mdButtonApp" head !-- Import Angular -- scriptsrc .5.8/angular.min.js" /script script src .5.8/angularanimate.min.js" /script script src .5.8/angulararia.min.js" /script !-- Angular Material -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.5.8/angularmaterial.min.js" /script link href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angularmaterial.min.css" rel "stylesheet" script src "app.js" /script /head body md-content ng-controller "mdButtonController" !-- Normal md-button -- md-button Normal /md-button md-button class "md-primary" {{text}} /md-button md-button class "md-accent" {{text}} /md-button md-button class "md-warn" ng-href "{{link}}" Google /md-button md-button class "md-raised" ng-click "goToLink('http://example.com')" Link /mdbutton md-button class "md-cornered md-primary md-hue-1" {{text}} /md-button md-button class "md-accent md-hue-2" Some Button /md-button md-button class "md-warn md-hue-3" ng-href "{{link}}" {{text}} /md-button /md-content /body /html app.js:angular.module('mdButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).controller('mdButtonController', function( scope) { scope.text "Button"; scope.link "https://google.com"; scope.goToLink function(link) {// Go to some siteconsole.log('Redirecting to:' link);window.location.href link;}})https://riptutorial.com/9
Creating an icon buttonThis example will be using the class md-icon-button, which must be applied to md-button in orderto get an icon button. It is also recommended to add an aria-label attribute to md-button for accessibility purposeor the ARIA provider will throw a warning that there is no aria-label. Usually, there is an md-icon element in the md-button attribute. Optionally, there also may be an md-tooltip element to provide tooltips for the button.This example will be using Material Icons by Google.index.html: html ng-app "mdIconButtonApp" head !-- Import Angular -- scriptsrc .5.11/angular.min.js" /script script src .5.11/angularanimate.min.js" /script script src .5.11/angulararia.min.js" /script !-- Angular Material -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.5.11/angularmaterial.min.js" /script link href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.4/angularmaterial.min.css" rel "stylesheet" !-- Material Icons -- link href "https://fonts.googleapis.com/icon?family Material Icons"rel "stylesheet" !-- Roboto -- link href "https://fonts.googleapis.com/css?family Roboto" rel "stylesheet" !-- app.js -- script src "app.js" /script style body {font-family: Roboto, sans-serif;} /style /head body md-content ng-controller "mdIconButtonController" !-Normal md-button Note that it is recommended to add a aria-label to md-icon-button foraccessibility purposes.-- md-button class "md-icon-button" aria-label "{{ariaLabel}}" md-icon class "material-icons" menu /md-icon /md-button md-button class "md-primary md-icon-button" aria-label "{{ariaLabel}}" md-icon class "material-icons" menu /md-icon md-tooltip This is a tooltip! /md-tooltip /md-button md-button class "md-accent md-icon-button md-fab" ngclick "goToLink('https://github.com/android')" aria-label "Go To Android" https://riptutorial.com/10
md-icon class "material-icons" android /md-icon /md-button md-button class "md-warn md-icon-button" ng-href "{{link}}" arialabel "{{ariaLabel}}" md-icon class "material-icons" {{icon}} /md-icon /md-button md-button class "md-raised md-icon-button" ngclick "goToLink('http://example.com')" !-- Note that you must have mdIconProvider for this -- md-icon md-svg-icon "link" /md-icon /md-button md-button class "md-cornered md-primary md-hue-1 md-icon-button" arialabel "{{ariaLabel}}" !-- You can also use the source of SVG -- md-icon md-svg-src "/path/to/more.svg" /md-icon /md-button md-button class "md-accent md-hue-2" aria-label "{{ariaLabel}}" md-icon class "material-icons" g-translate /md-icon /md-button md-button class "md-warn md-hue-3 md-icon-button" ng-href "{{link}}" arialabel "Link" md-icon md-svg-icon "copyright" /md-icon /md-button /md-content /body /html app.js:angular.module('mdIconButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).config(function( mdIconProvider) {// Configure iconsets: More vice/ mdIconProvider -icon', uttonController', function( scope) { scope.ariaLabel "Button"; scope.icon "menu"; scope.link "https://google.com"; scope.goToLink function(link) {// Go to some siteconsole.log('Redirecting to:' link);window.location.href link;}})Standard buttonSo, well, how on earth do you create a md-button , you may ask? All you have to do is to enter a md-button , along with your text for the button in it.index.html: div ng-app "MdButtonApp" md-content ng-controller "Controller" https://riptutorial.com/11
h2 class "md-title" Simple code md-button /code /h2 md-button Some button /md-button /md-content /div app.js:// Just initialize the appangular.module('MdButtonApp', ['ngMaterial']).controller('Controller', function( scope) {})Codepen DemoRead md-button online: 1/md-buttonhttps://riptutorial.com/12
Chapter 3: md-cardIntroductionThis topic is about how to create a md-card , which you can use for blog posts and other things.RemarksAPI Documentation: mdCardExamplesBasic card with header md-card md-card-header md-card-header-text span class "md-title" This will be the title /span span class "md-subhead" Here goes the (smaller, lighter) sub-header /span /md-card-header-text /md-card-header md-card-content p Your content goes here! /p /md-card-content /md-card Card with actionsIf you want your card to include buttons, use the md-card-actions directive. Buttons can also beformatted differently for icon-only buttons. Search for icons at here if you're using Google'sMaterial Icons. md-card !--header-- md-card-content p Your content goes here! /p /md-card-content md-card-actions md-button Save /md-button md-button Cancel /md-button md-card-icon-actions md-button aria-label "icon" class "md-icon-button" md-icon help /md-icon /md-button /md-card-icon-actions /md-card-actions https://riptutorial.com/13
/md-card Card with Avatar and imageIf you want an avatar to appear on the card, use the md-card-avatar directive, which must beplaced within the md-card-header directive. The md-card-avatar directive accepts an img / tag.Optional: .md-user-avatar, which makes the img/ tag have a circle look.index.html: md-card md-card-header !--Avatar-- md-card-avatar img src "/path/to/avatar.svg" class "md-user-avatar"/ /md-card-avatar !--Header text-- md-card-header-text span class "md-title" Lorem /span span class "md-subhead" Ipsum /span /md-card-header-text /md-card-header !--Card image-- img src "/path/to/cardimage.svg" class "md-card-image" alt "Card Image" !--Card title-- md-card-title md-card-title-text span class "md-headline" Card header /span /md-card-title-text /md-card-title md-card-content p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere et risussed finibus. Nunc vestibulum sagittis enim ut sagittis. /p /md-card-content /md-card Read md-card online: 1/md-cardhttps://riptutorial.com/14
Chapter 4: md-chipsExamplesStatic chipsThis example uses md-chips and md-chip .NOTE: Static chips cannot be selected, removed or edited, and are not part of any model. If no ngmodel is provided, there are no input elements in md-chips .index.html: md-content ng-controller "ChipController" md-chips md-chip Test /md-chip md-chip Another chip /md-chip md-chip {{chip}} /md-chip /md-chips app.js:var app angular.module('SomeApp', [/* Your dependencies here */ 'ngMaterial'])app.controller('ChipController', function( scope) { scope.chip " scope";})Setting the delay to select a new chip before refocusing on the input ( 1.1.2)1.1.2(This content is only relavant for versions 1.1.2 and up)From versions 1.1.2 and up, you can set the delay to select a new chip before refocusing on theinput.Use the md-chip-append-delay attribute to set it (in milliseconds):Example: md-chips md-chip-append-delay "500" ng-model "chipsModel" placeholder "Chips" /md-chips According to angular-material:This is necessary for keyboard accessibility for screen readers. It defaults to 300msand any number less than 300 can cause issues with screen readers (particularlyJAWS and sometimes NVDA).https://riptutorial.com/15
Read md-chips online: 6/md-chipshttps://riptutorial.com/16
CreditsS.NoChaptersContributors1Getting started withangular-materialAlexander Romero, Community, Edric, H.T, Sender, troig,user35546642md-buttonEdric3md-cardEdric, Federico P4md-chipsEdrichttps://riptutorial.com/17
Creating an icon button This example will be using the class md-icon-button, which must be applied to in order to get an icon button. It is also recommended to add an aria-label attribute to for accessibility purpose or the ARIA provider will throw a warning that there is no aria-label. Usually, there is an element in the attribute.
11 am - Bernie O'Malley, RIP Kevin O'Brien, RIP 5 pm - Gary Gilliland, RIP Mon. April 19th - 9 am - John Blair, Jr., RIP Tues. April 20th - 9 am - Michael & Gwen LaHair, RIP Wed. April 21st - 9 am - Anthony Dunn Thurs. April 22nd - 9 am - David Acevedo, RIP Fri. April 23rd - 9 am - Edmund Kelly, RIP Sat. April 24th - 9 am - Louis White, RIP
Rip Van Winkle! Rip Van Winkle! NARRATOR: Rip looked all around but could see no one. RIP: Did you hear that, boy? STRANGER: (distantly yelling) Rip Van Winkle! Rip Van Winkle! WOLF: Grrrr. NARRATOR: Wolf bristled up his back, looking down the valley. Then Rip saw a strange figure slowly toiling up the side of
it could be considered a new framework. Angular versions 2 and up are backward compatible till the Angular 2, but not with Angular 1. To avoid confusion, Angular 1 is now named Angu-lar JS and Angular versions 2 and higher are named Angular. Angular JS is based on JavaScript while Angular is based on JavaScript superset called TypeScript.
Angular Kinetics similar comparison between linear and angular kinematics Mass Moment of inertia Force Torque Momentum Angular momentum Newton’s Laws Newton’s Laws (angular analogs) Linear Angular resistance to angular motion (like linear motion) dependent on mass however, the more closely mass is distributed to the
Both Angular 2 and 4 are open-source, TypeScript-based front-end web application platforms. is the latest version of Angular. Although Angular 2 was a complete rewrite of AngularJS, there are no major differences between Angular 2 and Angular 4. Angular 4 is only an improvement and is backward compatible with Angular 2.
You are now ready to use Angular Material in your components! Note: The docs for specific components will be coming soon. Wrapping all modules together You can also easily wrap all angular modules, which you are going to use, into one module: import { NgModule } from '@angular/core'; import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material'; https://riptutorial.com .
0. Since the angular measure q is the angular analog of the linear distance measure, it is natural to define the average angular velocity Xw\ as Xw\ q f-q 0 Dt where q 0 is the initial angular position of the object when Dt 0 and q f is the final angular position of the object after a time Dt of angular motion.
at 250-766-3146 or email at st.edwards@shaw.ca Mass Intentions October 1- Marie Robinson RIP October 2-Ida Whelan RIP October 5- The Appel family INT October 6- Jamie Reynolds RIP October 7- Kay O’Sullivan RIP October 8- The Reynolds family INT October 9- Dave Tutt RIP
