AngularJS
Treehouse
Course Summary
In the world of Single Page Applications, few concepts have spread as quickly and universally as Javascript MVC frameworks, largely spearheaded by AngularJS. In this course, we’ll talk through what makes MVC frameworks so powerful, why Angular is one of the leading choices, and how you can most efficiently use it to transform your data on
-
+
Course Description
In the world of Single Page Applications, few concepts have spread as quickly and universally as Javascript MVC frameworks, largely spearheaded by AngularJS. In this course, we’ll talk through what makes MVC frameworks so powerful, why Angular is one of the leading choices, and how you can most efficiently use it to transform your data on hand into a full-featured application that responds almost immediately to every interaction and update. By the end, you’ll see not only how to use each of the individual pieces of Angular.JS, but also how to wield them together to build a fully functional web application.
Topics covered
- MVC Frameworks in AngularJS
Before we dive into AngularJS in specific, let’s consider what exactly an MVC framework is, and in what cases we want to use it instead of a library like jQuery.- An Introduction to Two-Way Data Binding
Two-way data binding is integral to what makes Angular.JS so powerful. Instead of trying to remember to update each representation of your data everytime there’s a change, with data binding it all happens automatically.-
Services and Dependencies
In addition to directives, one of the most powerful features of AngularJS is Dependency Injection. Services and Dependencies allow you to easily share information and state across your application, as well as providing a helpful interface for connecting to external APIs and data sources.- An Introduction to Directives
While two-way data binding let’s you wire up discrete bits of data to your views, directives allow you to package up modules that can be used for anything from specific renderings (ie. a project list) to an unique enhancement such as adding autocomplete functionality to a standard input field.- Extending Inputs
There are two primary ways for users to interact with your application: inputs and buttons. Of course, today an input is rarely just a text field, but could be a datepicker, a WYSIWYG editor, or even a multi-stage wizard. In this section, we’ll look at a couple of the ways to use directives to bring the power of two-way data binding into these more complicated inputs.- Making Your Own Widget
To finish off this course, let’s combine all those pieces together into a cool widget that exemplifies how you might utilize these elements in a real world application.For this stage, we’re going to be building a basic survey widget. It will have a demographics screen where we ask for gender and age range, a survey with two standard questions plus a third that changes based on the age of the user, and then a results view with a few bar charts to show the data.
-
+
Course Syllabus
â— MVC Frameworks in AngularJSâ—¦ What is an MVC?â—¦ Why Use an MVC Framework?â—¦ When to Use MVC vs DOM Manipulation Libraries?â—¦ How Does AngularJS Fit the MVC Model?â—¦ What are the Elements of the AngularJS Framework?â— An Introduction to Two-Way Data Bindingâ—¦ What is two-way data binding?â—¦ What About Lists?â—¦ Responding to User Inputâ—¦ User Interactionsâ— Services and Dependenciesâ—¦ What is Dependency Injection?â—¦ Using AngularJS’s Built-In $http Serviceâ—¦ Writing Your Own Service/Factoryâ—¦ Connecting to an External APIâ— An Introduction to Directivesâ—¦ What is a Directive?â—¦ Connecting between HTML and Javascriptâ—¦ Understanding $scopeâ—¦ Overview of Built-in Directivesâ—¦ Using the Link Functionâ— Extending Inputsâ—¦ A Deeper Dive Into ng-modelâ—¦ Attaching a Datepickerâ—¦ Connecting a WYSIWYG Editorâ—¦ Creating a Multi-Step Wizardâ—¦ Registration Processâ— Making Your Own Widgetâ—¦ What Are We Building?â—¦ Start with the Dataâ—¦ Creating the Templatesâ—¦ Creating our Directives and Servicesâ—¦ Wiring the Widget
