Day 9: Intro to Angular

Friday, June 10, 2016

Student Presentations

Group projects demonstrating the use of jQuery, DOM manipulation, and using Ajax to consume REST APIs.

Topics: Introduction to Angular

Concepts

• Model-View-Controller (MVC) design pattern
• Modules (angular.module('moduleName', []))
• Controllers (someModule.controller('ControllerName', function))
• Scope/$scope

Directives

• ngApp: Auto-bootstraps an Angular application and (optionally) specifies the root Module.
• ngController: Attaches a Controller to the view/DOM.
• ngModel: Binds a form field to a property on the scope.
• ngRepeat: Repeat an element for each item in a collection.
  • See also: ngRepeat:dupes and track by
• ngSubmit: Specifies custom behavior (often an invocation of a function property on the scope) when a form is submitted.
  • Automatically prevents default, unless the action attribute is set on the form.
• ngClick: Specifies custom behavior when an element is clicked.
• ngShow: Show an element only when the provided expression is truthy.
• ngHide: The inverse of ngShow. Only show the element if the provided expression is falsey.
• ngBind: Tells Angular to replace the text of the element with the value of an expression. You typically use {{ expression }} instead, but ngBind prevents the template from being displayed briefly when the page loads. But for that you can also use…
• ngCloak: Prevent the template from displaying before the view is fully rendered.

Projects

Acrobats: source | live