Learn Angular-material, Grep and Pm2

CMD+F in your text editor can only get you so far! In this course, we will learn to use grep and find, two powerful command-line utilities, to search through and explore our codebase. Learn to search specific files and folders, using regular expressions to look for -- or ignore! -- particular phrases. We'll cover how to search recursively, get more context on your results, and some simple tricks to make your searches faster and more targeted.


Once you're familiar with grep and find, you'll be able to quickly answer questions such as: Do I use this function anywhere other than my tests? Where does this file get imported? Whether you're working on a new feature, reading a codebase for the first time, or refactoring existing code, grep and find can help you work faster and more effectively.

A Unix command used to search files for the occurrence of a string of characters that matches a specified pattern.

grep

Use Grep for Fast Search from the Command Line

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.

In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.

*presented by Thomas Burleson and Aaron Frost*

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Introduction to AngularJS Material

When you have a bunch of text to sift through, standard Unix command line utilities like `grep`, `sed`, `awk`, `cut`, `sort`, and `uniq` can help extract the information you want. For example, with a git log for a project, you might want to group commits by day in order to see which days you're most productive, or find out how many commits you made last year. In this lesson, you'll learn how to combine these commands with the pipe operator to extract this data from git logs.

Analyze Git Logs with the Command Line

The Angular Material Layout API wraps the flexbox CSS features with an amazingly easy, powerful HTML markup API. The Layout API hides the complexities of the CSS, is intuitive to use, and eliminates the need for developers to become flexbox experts to implement modern page layouts. 

In this lesson we will learn how to use the Angular Material Container components and the Layout API to implement the layouts specified in design wireframe.

> This course has been created by Thomas Burleson and Aaron Frost. 

Angular Material: Containers with the Layout API

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows. 

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.  

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

> This course presented by Thomas Burleson and Aaron Frost

Angular Material: Theming and ARIA

Learn how to install Angular Material with `npm install`  and load the required libraries and stylesheets into your blank web page.

> This course has been created by Thomas Burleson and Aaron Frost

Angular Material: Installing with NPM

Sometimes you'll be looking for a string, but won't know which file it's in; or you'll want to find all usages of it within a directory. Learn how to use grep -r to recursively search all the files in a directory. 

Search directory contents recursively using grep

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

This lesson explores the Angular Material sidenav component. This includes input and display options, creating a sidenav with a nav list, and utilizing the `@angular/cdk` to update sidenav settings based on the users screen size.

Use the Angular Material Sidenav Component

Learn how to use find to identify filenames matching specified patterns. We'll use find to identify all .jsx files in a directory, or all test files in a directory.

Use find to search for filename patterns

Learn to use git grep to only search through the tracked files in a git repo. This is especially useful when you want to exclude build artifacts or locally installed dependencies, such as webpack bundles or the node_modules directory. You'll also note that git grep is automatically colorized - we'll see how to get the same coloring effect with grep --color.

Search the contents of a git repository with git grep

By default, grep displays the file path and the line where a match is found. Learn to use the flags -A, -B, -C, and -n to get more context, and view line numbers as well as the lines surrounding a pattern match.


Show context around matches using grep

By using wildcards and glob patterns with the special characters . and *, you can create regular expressions that describe what kind of text you're looking for, instead of just plaintext strings. 

Search for basic patterns using grep

Learn to use grep's extended regular expressions to describe more complex patterns. The `?` and `+` special characters describe optional patterns. The `?` character matches zero or one instance of the preceding term, and the `+` character matches one or more instances of the preceding term. To use these characters, you'll need to either escape them with backslashes or turn on extended regular expressions with the `-E` flag.

Use grep's extended regular expressions to find complex patterns

Learn to use the special anchor characters `^` and `$` to indicate the beginning and end of lines when writing regular expressions for grep. These line anchors are part of basic regular expressions in grep, so you don't need to escape them.

Specify line beginning and end in patterns using grep

You can describe classes of characters using bracket expressions. We'll use expressions such as [a-zA-Z] and [0-9] to search for alphabetic and numeric characters with grep.

Match classes of characters using bracket expressions with grep

Describe optional patterns with grep OR using the vertical bar character `|`. By using the `|` special character, you can write either-or style patterns. In this lesson we'll look for matches on "grey" or "gray". Like the `+` and `?` characters, the `|` character is part of extended regular expressions with grep, so you'll either need to escape it with a backslash, or use the -E flag.

Search for optional patterns with grep OR

By grouping your searches with parentheses, you can create even more complex searches. Grouping lets you separate out different parts of your regular expression, and apply special characters like +, ?, and * to groups of search terms.

Search with groups using grep

Most Angular Material UI components are declarative and used directly in the HTML markup. Some components, however, are programmatic and must be configured and invoked from Javascript. Programmatic components have a short-term, limited DOM lifespan and include Dialogs, Toast, and BottomSheet.

Let’s use the BottomSheet service to configure and display an Angular Material BottomSheet container which in turn will display a nested, custom Contact Sheet view.

> This course presented by by Thomas Burleson & Aaron Frost.

Angular Material: Using a BottomSheet

Both flexbox CSS and the Angular Material Layout allow web applications to `respond` to the size of the browser at any given point. No matter what the browser width may be, the web app adjusts its layout sizing accordingly. Combine responsive functionality with media query support and your web applications will have `adaptive` features to adapt to the width of the browser at a specific points. More than fluidly adjusting the widths and heights of elements, Adaptive applications can change the rendered UX with new positions, new components, and new styles. Angular Material Layout hides the complexities of implementing adaptive features with a singularly unique and simple HTML syntax.
Let’s use the Adaptive extensions of the Angular Material API to hide the SideNav on small devices (like iPhone or Android). We will explore the use of the $mdMedia service to easily lock open the SideNav on larger devices. And we will see how the $mdSideNav service can be used to programmatically close the SideNav after a user is selected.

> This course presented by Thomas Burleson and Aaron Frost.

Angular Material: Adaptive Layouts

Angular Material provides over 30 UI components and services. The framework offers a suite of components and containers: from simple Button components with built-in ink and hover effects, theming, and ARIA support… to more complex container components like mdList and Tabs.  

Let’s use some of those components in our SideNav and Content containers. For now we will use hard-coded, HTML markup. This allows us to confirm the UX matches that specified in the design docs before we start working on our application logic.

> This course has been created by Thomas Burleson and Aaron Frost.

Angular Material: Intro to UI Components

Angular Material UI components have been designed from the ground-up to use dynamic, live data. Supporting AngularJS interpolation, expressions, and databindings… each component exposes an intuitive API and fully supports the existing ng-<xxx> directives published in AngularJS.

Let’s replace the hard-coded, static HTML with dynamic, mock data using AngularJS data bindings, ng-repeat, and the ng-click directives. Our UX remains unchanged, yet now we are using custom application logic and dataservices.

> This course has been created by Thomas Burleson & Aaron Frost.

Topics

Instructors

Content Type