Introduction to AngularJS

Pete Bacon Darwin

AngularJS 1.x Team Lead

FoodMe App

AngularJS Basics

https://docs.angularjs.org

Directives

  • Adds behaviour to HTML
  • ng-app - defines your Angular App

Scope

  • Scope provides the data to the view

Data Binding

  • {{ ... }} interpolation
  • ng-model two-way binding

Step 1

Add Angular and basic bindings to the page:

  • Load angular.js
  • Add `ng-app` directive
  • bind inputs to models with `ng-model` directive
  • display models with `{{ ... }}` interpolation bindings

Step 2

Show and hide parts of the page dynamically

More directives

  • ng-show / ng-hide

  • ng-click

Step 2

Show and hide parts of the page dynamically

  • Show the form if `deliveryForm.visible`, using `ng-show`
  • Hide the delivery info `deliveryInfo.visible`, using `ng-hide`
  • Change `deliveryInfo.visible`, using `ng-click`

Angular Building Blocks

  • Modules - define components
  • Controllers - provide logic for a view
  • Services - singleton helper objects and functions

Step 3

Move the deliveryForm behaviour into a Controller

Step 3

Move the deliveryForm behaviour into a Controller

  • create an `app` module and a `FoodMeController` controller in `app.js`
  • load the `app.js` file in the index.html page
  • initialize the scope with a deliveryForm object
  • add `showDeliveryForm()` and `hideDeliveryForm()` helper methods to `FoodMeController`

Step 4

Add a list of restaurants to choose from

Scope Hierarchy

  • There is more than one scope
  • $root scope
    • child scope 1
      • grandchild scope
    • child scope 2
  • Useful for structural directives
    • ng-repeat
    • ng-if

Step 4

Add a list of restaurants to choose from

  • Initialize a mock list of restaurants on the scope in the `FoodMeController`
  • Bind the template to the list of restaurants using `ng-repeat` directive

Step 5

Implement sorting of the restaurant list

Angular Filters

  • Functions that modify interpolated data bindings
  • { someValue | myFilter : someParam }
  • Built-in
    • uppercase
    • currency
    • orderBy
    • filter

Step 5a

Implement sorting of the restaurant list

  • Initialize `sortProperty` and `sortDirection` on the scope for sorting columns
  • Add a `orderBy` filter to the `ng-repeat` using this properties: `ng-repeat="restaurant in restaurants | orderBy : sortProperty : sortDirection"`

Step 5b

Implement sorting of the restaurant list

  • Create helper methods in the controller, `sortBy(property)` and `getSortClass(property)`
  • Convert the table headings to clickable anchors with `ng-click="sortBy('name')"` directives
  • Display sort direction up/down markers using `ng-class="getSortClass('name')"` directives

Step 6

Create custom filter to display price and rating

Step 6

Create custom filter to display price and rating

  • Create a custom `rating` filter in the `app` module - we must use `$sce.trustAsHtml` since we are generating HTML.
  • Use the filter in the price and rating fields, with the `ng-bind-html` directive

Step 7

Add validation to delivery form

Step 7

Add validation to delivery form

  • Load the `../js/angular-messages.js` file
  • Add the `ngMessages` modules as a dependency of our `app` module
  • Use `ng-messages` directive to display errors
  • Fix up the initial value of `deliveryForm.visible` inside an `$scope.$evalAsync()` call

Step 8

Persist the delivery info in the local storage

Step 8

Persist the delivery info in the local storage

  • Create a `localStorage' service to wrap the browser's localStorage object
  • Create a `localStorageBinding` service that connects a property on the scope to the localStorage
  • Load the new `localStorage.js` file
  • Add the new `localStorage` module as a dependency to our `app` module
  • Bind the `user` object to the localStorage using the `localStorageBinding` service

Cross Origin Requests

  • Browser Security Feature
  • Can only make HTTP requests to your own origin
  • Possible Solutions
    • Server Proxy
    • JSONP
    • CORS

Step 9 (remote)

Load the restaurant data from a server

  • Add the `$http` dependency to the `FoodmeController`
  • Replace the static data with a call to get the restaurant data from a remote REST service (https://foodme.firebaseio.com/.json)

Step 9 (local)

Hosting App and Data Locally

  • Install a local webserver
  • Start the server in the root of the project
  • Browse to the application via this server: `http://localhost:8080/step-9`
  • Get the restaurant data from the local server

Step 10

Filter the restaurants by price and rating

Step 10

Filter the restaurants by price and rating

  • Add a new form to the left of the restaurant list
  • Initialize the filters to `null`
  • Watch the price and rating values and filter the restaurant list accordingly
  • Change the `ng-repeat` directive to use the `filteredRestaurants`

Step 11

Add a cool rating directive for use in filtering

Custom Directives

  • Define your own directives
  • Provide templates and behaviour
  • Request a new inner scope
  • Bind values to the inner scope
  • Interact with the DOM

Step 11

Add a cool rating directive for use in filtering

  • Create a new file `rating.js` containing a `rating` module
  • Load the `rating.js` file into the app
  • Add the `rating` module as a dependency of our `app` module
  • Define a `fmRating` directive in the `rating` module
  • Use this directive in the Filter Restaurants form instead of the simple text input boxes

Step 12

Display the number of filtered restaurants

  • Add a binding to the length of the `filteredRestaurants` collection using `ng-pluralize` directive

Step 13

Add transition animations to the delivery form

  • Load `../js/angular-animate.js` file into the app
  • Add a dependency on `ngAnimate` to the `app` module
  • Add new class (`fade`) to the delivery form and delivery info elements to be animated

Step 14

Display details and menu for individual restaurants

  • Exercise for the reader!
  • Hint - look at ng-view and $route
Made with Slides.com