Day 19: Resolve and Directives

Friday, June 24, 2016

Topics

Resolve

• Use resolve to provide your controller with content or data that is custom to the state.
• Promises will be resolved and converted to a value before the controller is instantiated.
• $stateChangeError - fired when an error occurs during the transition to a state
• Properties of the resolve object can be injected into the controller for the state.

$stateProvider.state('example', {
  url: '/example',
  controller: 'ExampleController',
  resolve: {
    user: function(authService) {
      return authService.auth.$requireSignIn();
    }
  }
});

Custom Directives

• Angular directives are markers that tell AngularJS to attach specified behavior to a DOM element.
• Directives can be used in the DOM as an Element, Attribute, Class, or Comment.
• Use isolate scope to prevent the directive from inheriting from parent scope.
• Directive names are camelCase in Javascript and dash-delimited in HTML.

JavaScript

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {},
    templateUrl: 'app/example.html'
  }
});

HTML

<my-directive></my-directive>

More Firebase Authentication

• $getAuth() - synchronously retrieves the current authentication state
• $requireSignIn() - returns the user if authenticated, AUTH_REQUIRED error if not
• Authenticating with Routers

Homework

Fork the Meganote Repo to your personal GitHub. Refactor it according to John Papa’s Angular Style Guide and submit a pull request on the original repo when you are done.

Criteria

• Singular Responsibility
• IIFE
• Bindable members up top
• controllerAs with vm
• Use an Angular .constant to provide the value of the URL in the requests to the API

Mega Bonus Credit

Refactor the notes service as a factory

Super Mega Bonus Credit

Refactor the notes-form as a directive instead of child state

Project

Mutant Office Hours: Source