Day 10: ui-router Basics

Monday, June 13, 2016

Topics

ui-router

• Getting Started with ui-router
• ui-router documentation
• State
  • Child states
  • $stateProvider.state()
• Templates
  • Inline templates (template: '<h1>So easy!</h1>')
  • Separate files (templateUrl: 'myTemplate.html')
• ui-view directive

NPM

• package.json
  • package.json: An Interactive Guide
  • Metadata
  • devDependencies
  • Scripts (npm start, etc.)
• node_modules folder

Bower

• What’s So Great About Bower?
• Managing Your Front-End Dependencies with Bower
• bower.json
  • Metadata
  • dependencies
• bower_components folder

Bootstrap

• Grid system
• Button styles

Angular Reference

Concepts

• 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.

Projects

• Meganote source | live
• Acrobats: source | live