 Resources from Aaron Frost in 2024

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

Task automation is critical for any AngularJS single-page application. Grunt gets the job done.

Introduction to Grunt for Angular

When you minify your code with a tool like Uglify, the resulting minified file will rename variables. This is a problem for AngualrJS, which uses parameter names to provide injected dependencies. You **could** use the array notation manually, but *no human should ever have to suffer this fate*, **or** you could use [ng-annotate](https://github.com/olov/ng-annotate) with Grunt, and let your helper robots get the job done instead.

Using ng-annotate for min-safe AngularJS 

grunt

You can use Grunt to combine all of your Javascript files into a single concatenated file.

Concatenating Your Javascript with grunt-contrib-concat

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.

Minifying your output with grunt-uglify

Grunt will clean up your build with the grunt-contrib-clean to make sure that no artifacts from previous builds are hanging around.

Cleaning your build folder with grunt-contrib-clean

With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.

Topics

Instructors

Content Type

Aaron Frost