پیاده‌سازی طراحی متریال با AngularJS: فریم‌ورک کامپوننت UI

This book is about building high-quality web and mobile user interfaces (UI) that are interactive, fluid, and provide a consistent experience across devices from desktops to tablets to smartphones. Use a Material Design approach to position elements and create animations along with principles of the sophisticated AngularJS JavaScript framework. Take advantage of Angular Material, a UI component framework that works out of the box to design web pages that adapt to various screen sizes and adhere to Material Design specifications. This book teaches you how to: - Develop a UI that adheres to Material Design principles using Angular Material, a UI component framework - Use various Angular Material elements, directives, and services in conjunction with CSS3 Flexbox for layout management - Use best practice design techniques to develop a responsive UI to fit multiple devices and screen sizes from desktop to tablet to mobile phone - Develop web apps for both mobile and desktop form factors and screen sizes using HTML, CSS, and JavaScript Contents at a Glance 6 Contents 8 About the Author 14 About the Technical Reviewer 16 Acknowledgments 18 Chapter 1: Introduction to Angular Material 19 Scenarios 19 More Power, More Responsibility 20 What Is Material Design? 21 Why Material Design? 21 Why Angular Material? 22 Angular Material Basics 22 Theming 22 Layout 22 Typography 23 Directives and Services 23 Chapter 2: Getting Started 24 Scripts 24 Code Editor/Integrated Development Environment (IDE) 25 Get Started with Angular Material 25 Step 1: Code “Hello World—Angular Material” 25 Step 2: Set up a developer class web server and run the sample 27 Option A: Live Server 27 Run the app 27 Option B: Serve 28 Run the app 28 Option C: IIS Express 29 Run the app 29 Working with Code Samples 30 Run Samples 30 Folder Structure 30 AngularJS Basics 31 Data Binding 32 Directive 33 AngularJS Module 33 DI 33 Controller 34 View / HTML template 34 Services 35 Provider 35 Making the Code Minification Safe 36 Pakage Managers and JavaScript Modules 37 Setup Node Package Manager - NPM 37 Download Angular Material using NPM 37 Reference scripts 38 Download Angular Material using Bower 38 Reference scripts 39 SystemJS & JSPM (JavaScript Package Manager) 40 Code “Hello World—Angular Material” 41 Limit Scope Using Closure 42 Notes on ES2015 (Also Called ES6) 44 Summary 44 References 44 Chapter 3: Layout Management 45 Flexbox 45 Layout 45 Layout-Align 47 More Layout Attributes 48 Flex 48 Responsive Design 50 Real Estate 50 Feedback for User Actions 50 Breakpoints 51 Show/Hide 53 Responsive Layout 54 Summary 55 References 56 Chapter 4: Navigation & Container Elements 57 Content (md-content) 57 Usage 58 Toolbar (md-toolbar) 58 Usage 58 Sidenav (md-sidenav) 60 Basic Usage 60 Sidenav Along with the Content 61 Show/Hide Sidenav On Demand 62 Responsive—Show/Hide Sidenav Based on Screen Width 63 $mdSidenav Service 63 Tabs 63 Usage 64 md-tab 67 Attributes: 68 Cards 69 Summary 72 References 72 Chapter 5: Action Buttons 73 Button Directive (md-button) 73 Style and Intention 74 FAB 76 Speed Dial 78 md-fab-speed-dial 79 md-fab-trigger 80 md-fab-actions 80 FAB Toolbar 82 md-fab-toolbar (Directive) 82 Usage 83 Menu 84 Alignment 86 Wider Menu Options 88 Separator 88 Menu Bar 89 Summary 92 References 92 Chapter 6: Themes 93 Angular Material Theming 93 Palette 93 Basic Usage 95 Shade or Hue 97 Customize Themes 97 Define a New Theme 100 Hue Configuration 102 Create Custom Palette 103 Summary 104 References 105 Chapter 7: Forms 106 Input Container Directive 106 Usage 106 Form Validations 107 Max Length Validation 108 E-mail Address Validation 109 RegEx Validation 109 Multiple Validation Messages 110 More Form Elements 110 Drop-down 110 Dynamically Retrieve Drop-down Options 112 More Options 113 Autocomplete Drop-down 114 Highlight the Filter Results 115 More Options 115 Chips 116 Transform Chips 117 Custom Templates 118 Contact Chips 119 Radio Buttons 120 Check Box 121 Slider 122 Date Picker 122 Summary 126 References 126 Chapter 8: Lists and Alerts 127 List 127 Grid List 131 Grid List Element (md-grid-list) 132 Grid Tile Directive (md-grid-tile) 132 Responsive Attributes 134 Alerts and Dialogs 135 md-dialog Element 137 Pass Values to the Dialog 138 Alert Dialog 138 Show the Alert 139 Hide the Alert 140 Confirm Dialog 140 Show the Confirm Dialog 142 Hide the Dialog Box 142 Toast 142 Basic Customizations 144 Additional Options with simple() API 145 Advanced Customizations 146 Configure a Controller 146 Hide a Toast Message 146 Position a Toast Message 147 Show with Options 149 Summary 149 References 150 Chapter 9: Mobile-Friendly Elements 151 Bottom Sheet 151 Bottom Sheet—List View 152 Bottom Sheet—Grid View 155 Handle Bottom Sheet Actions 156 Swipe 159 Summary 161 References 161 Chapter 10: Miscellaneous—Icons and ARIA 162 Icons 162 Icon Fonts 163 Using Material Design Icons (CDN Option) 163 Using Material Design Icons (with Files on Your Server) 163 Using Custom Icons 164 Using SVGs for Icons 165 Angular Material Icon Sets 165 Additional Icon Sets 166 Preload Individual Icons 167 Font Sets 168 ARIA 169 Summary 170 References 170 Chapter 11: Miscellaneous 171 Whiteframe 171 Tooltip 172 Subheader 173 Usage 174 Divider 174 Usage 174 Progress Bar 174 Linear Progress Bar 175 Circular Progress Bar 176 Summary 177 References 177 Chapter 12: Responsive Design Patterns 178 Reflow 178 Position 181 Transform 186 Reveal 190 Reveal—Toolbar Actions Example 191 Hide/Show Buttons on Toolbar 193 Hide/Show Buttons on the Menu 195 Summary 197 References 198 Index 199 Build high-quality web and mobile user interfaces (UI) that are interactive, fluid, and provide a consistent experience across devices from desktops to tablets to smartphones. Use a Material Design approach to position elements and create animations along with principles of the sophisticated AngularJS JavaScript framework. Take advantage of Angular Material, a UI component framework that works out of the box to design web pages that adapt to various screen sizes and adhere to Material Design specifications. What You Will Learn: Develop a UI that adheres to Material Design principles using Angular Material, a UI component framework Use various Angular Material elements, directives, and services in conjunction with CSS3 Flexbox for layout management Use best practice design techniques to develop a responsive UI to fit multiple devices and screen sizes from desktop to tablet to mobile phone Develop web apps for both mobile and desktop form factors and screen sizes using HTML, CSS, and JavaScript Who This Book Is For: Web and mobile app developers with a basic understanding of JavaScript, HTML, and CSS Front Matter....Pages i-xvii Introduction to Angular Material....Pages 1-5 Getting Started....Pages 7-27 Layout Management....Pages 29-40 Navigation & Container Elements....Pages 41-56 Action Buttons....Pages 57-76 Themes....Pages 77-89 Forms....Pages 91-111 Lists and Alerts....Pages 113-136 Mobile-Friendly Elements....Pages 137-147 Miscellaneous—Icons and ARIA....Pages 149-157 Miscellaneous....Pages 159-165 Responsive Design Patterns....Pages 167-187 Back Matter....Pages 189-194