<div class="auth-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">Register</h1>
        <p class="text-xs-center">
          <a href="">
            Have an account?
          </a>
        </p>

        <form>
          <fieldset>

            <fieldset class="form-group">
              <input class="form-control form-control-lg"
                type="text"
                placeholder="Username"
                ng-model="$ctrl.formData.username" />
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control form-control-lg"
                type="email"
                placeholder="Email"
                ng-model="$ctrl.formData.email" />
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control form-control-lg"
                type="password"
                placeholder="Password"
                ng-model="$ctrl.formData.password" />
            </fieldset>

            <button class="btn btn-lg btn-primary pull-xs-right"
              type="submit">
              Register
            </button>

          </fieldset>
        </form>
      </div>

    </div>
  </div>
</div>

function AuthConfig($stateProvider, $httpProvider) {
  'ngInject';

  // Define the routes
  $stateProvider

  .state('app.login', {
    url: '/login',
    templateUrl: 'auth/auth.html',
    title: 'Sign in'
  })

  .state('app.register', {
    url: '/register',
    templateUrl: 'auth/auth.html',
    title: 'Sign up'
  });

};

export default AuthConfig;

import angular from 'angular';

// Create the home module where our functionality can attach to
let authModule = angular.module('app.auth', []);


// Include our UI-Router config settings
import AuthConfig from './auth.config';
authModule.config(AuthConfig);


export default authModule;

[...]
import './services';
+ import './auth';

const requires = [
  'ui.router',
  'templates',
  'app.layout',
  'app.components',
  'app.home',
  'app.profile',
  'app.article',
  'app.services',
+  'app.auth'
];

[...]

class AuthCtrl {
  constructor($state) {
    'ngInject';

    this.title = $state.current.title;
    this.authType = $state.current.name.replace('app.', '');
  }

}


export default AuthCtrl;

[...]

+ // Controllers
+ import AuthCtrl from './auth.controller';
+ authModule.controller('AuthCtrl', AuthCtrl);

export default authModule;

function AuthConfig($stateProvider, $httpProvider) {
  'ngInject';

  // Define the routes
  $stateProvider

  .state('app.login', {
    url: '/login',
+    controller: 'AuthCtrl as $ctrl',
    templateUrl: 'auth/auth.html',
    title: 'Sign in'
  })

  .state('app.register', {
    url: '/register',
+    controller: 'AuthCtrl as $ctrl',
    templateUrl: 'auth/auth.html',
    title: 'Sign up'
  });

};

export default AuthConfig;

[...]
-        <h1 class="text-xs-center">Register</h1>
+        <h1 class="text-xs-center" ng-bind="::$ctrl.title"></h1>
-        <p class="text-xs-center">
-          <a href="">
-            Have an account?
-          </a>
-        </p>
+        <p class="text-xs-center">
+          <a ui-sref="app.login"
+            ng-show="$ctrl.authType === 'register'">
+            Have an account?
+          </a>
+          <a ui-sref="app.register"
+            ng-show="$ctrl.authType === 'login'">
+            Need an account?
+          </a>
+        </p>
[...]

[...]
-        <form>
+        <form ng-submit="$ctrl.submitForm()">
-          <fieldset>
+          <fieldset ng-disabled="$ctrl.isSubmitting">

-            <fieldset class="form-group">
+            <fieldset class="form-group" ng-show="$ctrl.authType === 'register'">
              <input class="form-control form-control-lg"
                type="text"
                placeholder="Username"
                ng-model="$ctrl.formData.username" />
            </fieldset>

            [...]

            <button class="btn btn-lg btn-primary pull-xs-right"
              type="submit"
+              ng-bind="$ctrl.title">
-              Register
            </button>

          </fieldset>
        </form>
[...]

class AuthCtrl {
  constructor($state) {
    'ngInject';

    this.title = $state.current.title;
    this.authType = $state.current.name.replace('app.', '');
  }

+  submitForm () {
+    this.isSubmitting = true;
+
+    console.log(this.formData);
+  }

}

export default AuthCtrl;

export default class User {
  constructor() {
    'ngInject';

  }

}

export default class User {
-  constructor() {
+  constructor(AppConstants, $http) {
    'ngInject';

+    // Object to store our user properties
+    this.current = null;
  }

}

export default class User {
  constructor(AppConstants, $http) {
    'ngInject';

+    this._AppConstants = AppConstants;
+    this._$http = $http;

    // Object to store our user properties
    this.current = null;
  }

}

export default class User {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;

    // Object to store our user properties
    this.current = null;
  }

+  // Try to authenticate by registering or logging in
+  attemptAuth(type, credentials) {
+    let route = (type === 'login') ? '/login' : '';
+    return this._$http({
+      url: this._AppConstants.api + '/users' + route,
+      method: 'POST',
+      data: {
+        user: credentials
+      }
+    }).then(
+      // On success...
+      (res) => {
+        // Store the user's info for easy lookup
+        this.current = res.data.user;
+
+        return res;
+      }
+    );
+  }

}

import angular from 'angular';

// Create the module where our functionality can attach to
let servicesModule = angular.module('app.services', []);

+ // Services
+ import UserService from './user.service';
+ servicesModule.service('User', UserService);

export default servicesModule;

class AuthCtrl {
-  constructor($state) {
+  constructor(User, $state) {
    'ngInject';

+    this._User = User;

    this.title = $state.current.title;
    this.authType = $state.current.name.replace('app.', '');
  }

  submitForm () {
    this.isSubmitting = true;
-    console.log(this.formData);

+    this._User.attemptAuth(this.authType, this.formData).then(
+      // Callback for success
+      (res) => {
+        this.isSubmitting = false;
+        console.log(res);
+      },
+      // Callback for failure
+      (err) => {
+        this.isSubmitting = false;
+        console.log(err.data.errors);
+      }
+    );
  }

}

export default AuthCtrl;

[...]
          <a ui-sref="app.register"
            ng-show="$ctrl.authType === 'login'">
            Need an account?
          </a>
        </p>

+        <ul class="error-messages" ng-show="$ctrl.errors">
+          <div ng-repeat="(field, errors) in $ctrl.errors">
+            <li ng-repeat="error in errors">
+              {{field}} {{error}}
+            </li>
+          </div>
+        </ul>

        <form ng-submit="$ctrl.submitForm()">
          <fieldset ng-disabled="$ctrl.isSubmitting">
[...]

[...]
      // Callback for failure
      (err) => {
        this.isSubmitting = false;
-        console.log(err.data.errors);
+        this.errors = err.data.errors;
      }
[...]

let ListErrors= {
  bindings: {
    errors: '='
  },
  templateUrl: 'components/list-errors.html'
};

export default ListErrors;

<ul class="error-messages" ng-show="$ctrl.errors">
  <div ng-repeat="(field, errors) in $ctrl.errors">
    <li ng-repeat="error in errors">
      {{field}} {{error}}
    </li>
  </div>
</ul>

import angular from 'angular';

let componentsModule = angular.module('app.components', []);

+ // Components (and directives)
+ import ListErrors from './list-errors.component';
+ componentsModule.component('listErrors', ListErrors);

export default componentsModule;

[...]
          <a ui-sref="app.register"
            ng-show="$ctrl.authType === 'login'">
            Need an account?
          </a>
        </p>

-        <ul class="error-messages" ng-show="$ctrl.errors">
-          <div ng-repeat="(field, errors) in $ctrl.errors">
-            <li ng-repeat="error in errors">
-              {{field}} {{error}}
-            </li>
-          </div>
-        </ul>
+        <list-errors errors="$ctrl.errors"></list-errors>

        <form ng-submit="$ctrl.submitForm()">
          <fieldset ng-disabled="$ctrl.isSubmitting">
[...]

function ShowAuthed(User) {
  'ngInject';

  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.User = User;

      scope.$watch('User.current', function(val) {
          // If user detected
          if (val) {
            if (attrs.showAuthed === 'true') {
              element.css({ display: 'inherit'})
            } else {
              element.css({ display: 'none'})
            }

          // no user detected
          } else {
            if (attrs.showAuthed === 'true') {
              element.css({ display: 'none'})
            } else {
              element.css({ display: 'inherit'})
            }
          }
      });

    }
  };
}

export default ShowAuthed;

[...]

// Components (and directives)
import ListErrors from './list-errors.component';
componentsModule.component('listErrors', ListErrors);

+ import ShowAuthed from './show-authed.directive';
+ componentsModule.directive('showAuthed', ShowAuthed);

export default componentsModule;

<nav class="navbar navbar-light">
  <div class="container">

    <a class="navbar-brand"
      ui-sref="app.home"
      ng-bind="::$ctrl.appName | lowercase">
    </a>

    <!-- Show this for logged out users -->
    <ul class="nav navbar-nav pull-xs-right"
+      show-authed="false">

      <li class="nav-item">
        <a class="nav-link"
          ui-sref-active="active"
          ui-sref="app.home">
          Home
        </a>
      </li>

-      <li class="nav-item">
-        <a class="nav-link"
-          ui-sref-active="active"
-          ui-sref="app.article">
-          Article
-        </a>
-      </li>
-
-      <li class="nav-item">
-        <a class="nav-link"
-          ui-sref-active="active"
-          ui-sref="app.profile">
-          Profile
-        </a>
-      </li>

+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.login">
+          Sign in
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.register">
+          Sign up
+        </a>
+      </li>

    </ul>

+    <!-- Show this for logged in users -->
+    <ul show-authed="true"
+      class="nav navbar-nav pull-xs-right">
+
+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.home">
+          Home
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.article">
+          Article
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.profile">
+          My Profile
+        </a>
+      </li>
+
+    </ul>


  </div>
</nav>

export default class JWT {
  constructor(AppConstants, $window) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$window = $window;
  }

  save(token) {
    this._$window.localStorage[this._AppConstants.jwtKey] = token;
  }

  get() {
    return this._$window.localStorage[this._AppConstants.jwtKey];
  }

  destroy() {
    this._$window.localStorage.removeItem(this._AppConstants.jwtKey);
  }


}

import angular from 'angular';

// Create the module where our functionality can attach to
let servicesModule = angular.module('app.services', []);

// Services
import UserService from './user.service';
servicesModule.service('User', UserService);

+ import JwtService from './jwt.service';
+ servicesModule.service('JWT', JwtService);

export default servicesModule;

export default class User {
-  constructor(AppConstants, $http) {
+  constructor(JWT, AppConstants, $http) {
    'ngInject';

+    this._JWT = JWT;
    this._AppConstants = AppConstants;
    this._$http = $http;

    // Object to store our user properties
    this.current = null;
  }

  // Try to authenticate by registering or logging in
  attemptAuth(type, credentials) {
    let route = (type === 'login') ? '/login' : '';
    return this._$http({
      url: this._AppConstants.api + '/users' + route,
      method: 'POST',
      data: {
        user: credentials
      }
    }).then(
      // On success...
      (res) => {
+        // Set the JWT token
+        this._JWT.save(res.data.user.token);

        // Store the user's info for easy lookup
        this.current = res.data.user;

        return res;
      }
    );
  }

}

export default class User {
-  constructor(JWT, AppConstants, $http) {
+  constructor(JWT, AppConstants, $http, $state) {
    'ngInject';

    this._JWT = JWT;
    this._AppConstants = AppConstants;
    this._$http = $http;
+    this._$state = $state;

    // Object to store our user properties
    this.current = null;
  }

  // Try to authenticate by registering or logging in
  attemptAuth(type, credentials) {
    [...]
  }

+  logout() {
+    this.current = null;
+    this._JWT.destroy();
+    // Do a hard reload of current state to ensure all data is flushed
+    this._$state.go(this._$state.$current, null, { reload: true });
+  }

}

export default class User {
-  constructor(JWT, AppConstants, $http, $state) {
+  constructor(JWT, AppConstants, $http, $state, $q) {
    'ngInject';

    this._JWT = JWT;
    this._AppConstants = AppConstants;
    this._$http = $http;
    this._$state = $state;
+    this._$q = $q;

    // Object to store our user properties
    this.current = null;
  }

  // Try to authenticate by registering or logging in
  attemptAuth(type, credentials) {
    [...]
  }

  logout() {
    [...]
  }

+  verifyAuth() {
+    let deferred = this._$q.defer();
+
+    // Check for JWT token first
+    if (!this._JWT.get()) {
+      deferred.resolve(false);
+      return deferred.promise;
+    }
+
+    // If there's a JWT & user is already set
+    if (this.current) {
+      deferred.resolve(true);
+
+    // If current user isn't set, get it from the server.
+    // If server doesn't 401, set current user & resolve promise.
+    } else {
+      this._$http({
+        url: this._AppConstants.api + '/user',
+        method: 'GET',
+        headers: {
+          Authorization: 'Token ' + this._JWT.get()
+        }
+      }).then(
+        (res) => {
+          this.current = res.data.user;
+          deferred.resolve(true);
+        },
+        // If an error happens, that means the user's token was invalid.
+        (err) => {
+          this._JWT.destroy();
+          deferred.resolve(false);
+        }
+        // Reject automatically handled by auth interceptor
+        // Will boot them to homepage
+      );
+    }
+
+    return deferred.promise;
+  }

}

function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterProvider) {
  'ngInject';

  /*
    If you don't want hashbang routing, uncomment this line.
    Our tutorial will be using hashbang routing though :)
  */
  // $locationProvider.html5Mode(true);

  $stateProvider
  .state('app', {
    abstract: true,
    templateUrl: 'layout/app-view.html',
+    resolve:{
+      auth: function(User) {
+        return User.verifyAuth();
+      }
+    }
  });

  $urlRouterProvider.otherwise('/');

}

export default AppConfig;

function authInterceptor(JWT, AppConstants, $window, $q) {
  'ngInject';

  return {
    // automatically attach Authorization header
    request: function(config) {
      if(config.url.indexOf(AppConstants.api) === 0 && JWT.get()) {
        config.headers.Authorization = 'Token ' + JWT.get();
      }
      return config;
    },

    // Handle 401
    responseError: function(rejection) {
      if (rejection.status === 401) {
        // clear any JWT token being stored
        JWT.destroy();
        // do a hard page refresh
        $window.location.reload();
      }
      return $q.reject(rejection);
    }

  }
}

export default authInterceptor;

+ import authInterceptor from './auth.interceptor';

function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterProvider) {
  'ngInject';

+  // Push our interceptor for auth
+  $httpProvider.interceptors.push(authInterceptor);

  /*
    If you don't want hashbang routing, uncomment this line.
    Our tutorial will be using hashbang routing though :)
  */
  // $locationProvider.html5Mode(true);

  $stateProvider
  .state('app', {
    abstract: true,
    templateUrl: 'layout/app-view.html',
    resolve:{
      auth: function(User) {
        return User.verifyAuth();
      }
    }
  });

  $urlRouterProvider.otherwise('/');

}

export default AppConfig;

[...]
        url: this._AppConstants.api + '/user',
        method: 'GET'
-        headers: {
-          Authorization: 'Token ' + this._JWT.get()
-        }
[...]

[...]
  // This method will be used by UI-Router resolves
  ensureAuthIs(bool) {
    let deferred = this._$q.defer();

    this.verifyAuth().then((authValid) => {
      // if it's the opposite, redirect home
      if (authValid !== bool) {
        this._$state.go('app.home');
        deferred.resolve(false);
      } else {
        deferred.resolve(true);
      }
    })

    return deferred.promise;
  }
[...]

function AuthConfig($stateProvider, $httpProvider) {
  'ngInject';

  // Define the routes
  $stateProvider

  .state('app.login', {
    url: '/login',
    controller: 'AuthCtrl as $ctrl',
    templateUrl: 'auth/auth.html',
    title: 'Sign in',
+    resolve:{
+      auth: function(User) {
+        return User.ensureAuthIs(false);
+      }
+    }
  })

  .state('app.register', {
    url: '/register',
    controller: 'AuthCtrl as $ctrl',
    templateUrl: 'auth/auth.html',
    title: 'Sign up',
+    resolve:{
+      auth: function(User) {
+        return User.ensureAuthIs(false);
+      }
+    }
  });

};

export default AuthConfig;

class AuthCtrl {
  constructor(User, $state) {
    'ngInject';

    this._User = User;
+    this._$state = $state;

    this.title = $state.current.title;
    this.authType = $state.current.name.replace('app.', '');
  }

  submitForm () {
    this.isSubmitting = true;

    this._User.attemptAuth(this.authType, this.formData).then(
      // Callback for success
      (res) => {
-        this.isSubmitting = false;
-        console.log(res);
+        this._$state.go('app.home');
      },
      // Callback for failure
      (err) => {
        this.isSubmitting = false;
        this.errors = err.data.errors;
      }
    );
  }

}

export default AuthCtrl;

<div class="settings-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-6 offset-md-3 col-xs-12">

        <h1 class="text-xs-center">Your Settings</h1>

        <list-errors errors="$ctrl.errors"></list-errors>

        <form ng-submit="$ctrl.submitForm()">
          <fieldset ng-disabled="$ctrl.isSubmitting">

            <fieldset class="form-group">
              <input class="form-control"
                type="text"
                placeholder="URL of profile picture"
                ng-model="$ctrl.formData.image" />
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control form-control-lg"
                type="text"
                placeholder="Username"
                ng-model="$ctrl.formData.username" />
            </fieldset>

            <fieldset class="form-group">
              <textarea class="form-control form-control-lg"
                rows="8"
                placeholder="Short bio about you"
                ng-model="$ctrl.formData.bio">
              </textarea>
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control form-control-lg"
                type="email"
                placeholder="Email"
                ng-model="$ctrl.formData.email" />
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control form-control-lg"
                type="password"
                placeholder="New Password"
                ng-model="$ctrl.formData.password" />
            </fieldset>

            <button class="btn btn-lg btn-primary pull-xs-right"
              type="submit">
              Update Settings
            </button>

          </fieldset>
        </form>

        <!-- Line break for logout button -->
        <hr />

        <button class="btn btn-outline-danger">
          Or click here to logout.
        </button>

      </div>
    </div>
  </div>
</div>

class SettingsCtrl {
  constructor() {
    'ngInject';


  }

}


export default SettingsCtrl;

function SettingsConfig($stateProvider) {
  'ngInject';

  $stateProvider
  .state('app.settings', {
    url: '/settings',
    controller: 'SettingsCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'settings/settings.html',
    title: 'Settings',
    resolve:{
      auth: function(User) {
        return User.ensureAuthIs(true);
      }
    }
  });

};

export default SettingsConfig;

import angular from 'angular';

// Create the settings module where our functionality can attach to
let settingsModule = angular.module('app.settings', []);


// Include our UI-Router config settings
import SettingsConfig from './settings.config';
settingsModule.config(SettingsConfig);

// Controllers
import SettingsCtrl from './settings.controller';
settingsModule.controller('SettingsCtrl', SettingsCtrl);


export default settingsModule;

[...]
import './auth';
+ import './settings';


// Create and bootstrap application
const requires = [
  'ui.router',
  'templates',
  'app.layout',
  'app.components',
  'app.home',
  'app.profile',
  'app.article',
  'app.services',
  'app.auth',
+  'app.settings'
];

[...]

[...]
    <!-- Show this for logged in users -->
    <ul show-authed="true"
      class="nav navbar-nav pull-xs-right">

      <li class="nav-item">
        <a class="nav-link"
          ui-sref-active="active"
          ui-sref="app.home">
          Home
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link"
          ui-sref-active="active"
          ui-sref="app.article">
          Article
        </a>
      </li>

+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.settings">
+          <i class="ion-gear-a"></i>&nbsp;Settings
+        </a>
+      </li>

      <li class="nav-item">
        <a class="nav-link"
          ui-sref-active="active"
          ui-sref="app.profile">
          My Profile
        </a>
      </li>

    </ul>
[...]

class SettingsCtrl {
+  constructor() {
+  constructor(User) {
    'ngInject';

+    this.formData = {
+       email: User.current.email,
+       bio: User.current.bio,
+       image: User.current.image,
+       username: User.current.username
+    };

  }

}


export default SettingsCtrl;

class SettingsCtrl {
  constructor(User) {
    'ngInject';

    this.formData = {
       email: User.current.email,
       bio: User.current.bio,
       image: User.current.image,
       username: User.current.username
    };

+    // Bind is req'd because the logout method assumes
+    // the execution context is within the User object.
+    this.logout = User.logout.bind(User);

  }

}


export default SettingsCtrl;

[...]

        <button class="btn btn-outline-danger"
+          ng-click="$ctrl.logout()">
          Or click here to logout.
        </button>

[...]

[...]

+  // Update the current user's name, email, password, etc
+  update(fields) {
+    return this._$http({
+      url: this._AppConstants.api + '/user',
+      method: 'PUT',
+      data: { user: fields }
+    }).then(
+      (res) => {
+        this.current = res.data.user;
+        return res.data.user;
+      }
+    );
+  }

[...]

class SettingsCtrl {
-  constructor(User) {
+  constructor(User, $state) {
    'ngInject';

+    this._User = User;
+    this._$state = $state;

    this.formData = {
       email: User.current.email,
       bio: User.current.bio,
       image: User.current.image,
       username: User.current.username
    };

    // Bind is req'd because the logout method assumes
    // the execution context is within the User object.
    this.logout = User.logout.bind(User);
  }

+  submitForm() {
+    this.isSubmitting = true;
+    this._User.update(this.formData).then(
+      (user) => {
+        console.log('success!');
+        this.isSubmitting = false;
+      },
+      (err) => {
+        this.isSubmitting = false;
+        this.errors = err.data.errors;
+      }
+    )
+  }

}


export default SettingsCtrl;

export default class Profile {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;


  }

  // Retrieve a user's profile
  get(username) {
    return this._$http({
      url: this._AppConstants.api + '/profiles/' + username,
      method: 'GET'
    }).then((res) => res.data.profile);
  }


}

[...]

import JwtService from './jwt.service';
servicesModule.service('JWT', JwtService);

+ import ProfileService from './profile.service';
+ servicesModule.service('Profile', ProfileService);


export default servicesModule;

[...]

  $stateProvider
  .state('app.profile', {
-    url: '/profile',
+    url: '/@:username',
    controller: 'ProfileCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'profile/profile.html'
+    resolve: {
+      profile: function(Profile, $state, $stateParams) {
+        return Profile.get($stateParams.username).then(
+          (profile) => profile,
+          (err) => $state.go('app.home')
+        );
+      }
+    }
  });

[...]

class ProfileCtrl {
-  constructor() {
+  constructor(profile, User) {
    'ngInject';

+    // The profile for this page, resolved by UI Router
+    this.profile = profile;

+    // Show edit profile is this profile is the current user's
+    if (User.current) {
+      this.isUser = (User.current.username === this.profile.username);
+    } else {
+      this.isUser = false;
+    }

  }
}


export default ProfileCtrl;

[...]

        <div class="col-xs-12 col-md-10 offset-md-1">

-          <img class="user-img" />
+          <img ng-src="{{::$ctrl.profile.image}}" class="user-img" />
-          <h4>BradGreen</h4>
+          <h4 ng-bind="::$ctrl.profile.username"></h4>
-          <p>I'm the dude running the Angular team at Google, yo.</p>
+          <p ng-bind="::$ctrl.profile.bio"></p>

+          <a ui-sref="app.settings"
+            class="btn btn-sm btn-outline-secondary action-btn"
+            ng-show="$ctrl.isUser">
+            <i class="ion-gear-a"></i> Edit Profile Settings
+          </a>

          <button class="btn btn-sm btn-outline-secondary action-btn"
+            ng-hide="$ctrl.isUser">
            <i class="ion-plus-round"></i>
            &nbsp;
-            Follow BradGreen
+            Follow
          </button>

        </div>

[...]

[...]
    this._User.update(this.formData).then(
      (user) => {
-        console.log('success!');
-        this.isSubmitting = false;
+        this._$state.go('app.profile', {username:user.username});
      },
      (err) => {
        this.isSubmitting = false;
        this.errors = err.data.errors;
      }
    )
[...]

class AppHeaderCtrl {
-  constructor(AppConstants) {
+  constructor(AppConstants, User, $scope) {
    'ngInject';

    this.appName = AppConstants.appName;
+    this.currentUser = User.current;

+    $scope.$watch('User.current', (newUser) => {
+      this.currentUser = newUser;
+    });
  }
}

[...]

[...]
      <li class="nav-item">
        <a class="nav-link"
          ui-sref-active="active"
-          ui-sref="app.profile">
+          ui-sref="app.profile({ username: $ctrl.currentUser.username })">
-          My Profile
+          <img ng-src="{{$ctrl.currentUser.image}}" class="user-pic"/>
+          {{ $ctrl.currentUser.username }}
        </a>
      </li>
[...]

<div class="profile-page">

  <!-- User's basic info & action buttons -->
  <div class="user-info">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">

          <img ng-src="{{::$ctrl.profile.image}}" class="user-img" />
          <h4 ng-bind="::$ctrl.profile.username"></h4>
          <p ng-bind="::$ctrl.profile.bio"></p>
+          <follow-btn user="$ctrl.profile" ng-hide="$ctrl.isUser"></follow-btn>

          <a ui-sref="app.settings"
            class="btn btn-sm btn-outline-secondary action-btn"
            ng-show="$ctrl.isUser">
            <i class="ion-gear-a"></i> Edit Profile Settings
          </a>

-          <button class="btn btn-sm btn-outline-secondary action-btn"
-            ng-hide="$ctrl.isUser">
-            <i class="ion-plus-round"></i>
-            &nbsp;
-            Follow
-          </button>

        </div>
      </div>
    </div>
  </div>

<button
  class="btn btn-sm btn-outline-secondary action-btn">
  <i class="ion-plus-round"></i>
  &nbsp;
  {{ $ctrl.user.following ? 'Unfollow' : 'Follow' }} {{ $ctrl.user.username }}
</button>

class FollowBtnCtrl {
  constructor() {
    'ngInject';

  }
}

let FollowBtn= {
  bindings: {
    user: '='
  },
  controller: FollowBtnCtrl,
  templateUrl: 'components/buttons/follow-btn.html'
};

export default FollowBtn;

[...]

+ import FollowBtn from './buttons/follow-btn.component';
+ componentsModule.component('followBtn', FollowBtn);


export default componentsModule;

export default class Profile {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;

  }

  // Retrieve a user's profile
  get(username) {
    return this._$http({
      url: this._AppConstants.api + '/profiles/' + username,
      method: 'GET'
    }).then((res) => res.data.profile);
  }

+  // Follow a user
+  follow(username) {
+    return this._$http({
+      url: this._AppConstants.api + '/profiles/' + username + '/follow',
+      method: 'POST'
+    }).then((res) => res.data);
+  }

+  // Unfollow a user
+  unfollow(username) {
+    return this._$http({
+      url: this._AppConstants.api + '/profiles/' + username + '/follow',
+      method: 'DELETE'
+    }).then((res) => res.data);
+  }


}

class FollowBtnCtrl {
-  constructor() {
+  constructor(Profile, User, $state) {
    'ngInject';

+    this._Profile = Profile;
+    this._User = User;

+    this._$state = $state;
  }

+  submit() {
+    this.isSubmitting = true;
+
+    if (!this._User.current) {
+      this._$state.go('app.register');
+      return;
+    }
+
+    // If following already, unfollow
+    if (this.user.following) {
+      this._Profile.unfollow(this.user.username).then(
+        () => {
+          this.isSubmitting = false;
+          this.user.following = false;
+        }
+      )
+
+    // Otherwise, follow them
+    } else {
+      this._Profile.follow(this.user.username).then(
+        () => {
+          this.isSubmitting = false;
+          this.user.following = true;
+        }
+      )
+    }
+  }

}

let FollowBtn= {
  bindings: {
    user: '='
  },
  controller: FollowBtnCtrl,
  templateUrl: 'components/buttons/follow-btn.html'
};

export default FollowBtn;

<button
-  class="btn btn-sm btn-outline-secondary action-btn">
+  class="btn btn-sm action-btn"
+  ng-class="{ 'disabled': $ctrl.isSubmitting,
+              'btn-outline-secondary': !$ctrl.user.following,
+              'btn-secondary': $ctrl.user.following }"
+  ng-click="$ctrl.submit()">
  <i class="ion-plus-round"></i>
  &nbsp;
  {{ $ctrl.user.following ? 'Unfollow' : 'Follow' }} {{ $ctrl.user.username }}
</button>

<div class="editor-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-10 offset-md-1 col-xs-12">

        <list-errors errors="$ctrl.errors"></list-errors>

        <form>
          <fieldset ng-disabled="$ctrl.isSubmitting">

            <fieldset class="form-group">
              <input class="form-control form-control-lg"
                ng-model="$ctrl.article.title"
                type="text"
                placeholder="Article Title" />
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control"
                ng-model="$ctrl.article.description"
                type="text"
                placeholder="What's this article about?" />
            </fieldset>

            <fieldset class="form-group">
              <textarea class="form-control"
                rows="8"
                ng-model="$ctrl.article.body"
                placeholder="Write your article (in markdown)">
              </textarea>
            </fieldset>

            <fieldset class="form-group">
              <input class="form-control"
                type="text"
                placeholder="Enter tags"
                ng-model="$ctrl.tagField" />

              <div class="tag-list">
                <span class="tag-default tag-pill">
                  <i class="ion-close-round"></i>
                  Example Tag
                </span>
                <span class="tag-default tag-pill">
                  <i class="ion-close-round"></i>
                  Another Tag
                </span>
              </div>
            </fieldset>

            <button class="btn btn-lg pull-xs-right btn-primary" type="button">
              Publish Article
            </button>

          </fieldset>
        </form>

      </div>
    </div>
  </div>
</div>

class EditorCtrl {
  constructor() {
    'ngInject';


  }

}


export default EditorCtrl;

function EditorConfig($stateProvider) {
  'ngInject';

  $stateProvider
  .state('app.editor', {
    url: '/editor',
    controller: 'EditorCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'editor/editor.html',
    title: 'Editor',
    resolve:{
      auth: function(User) {
        return User.ensureAuthIs(true);
      }
    }
  });

};

export default EditorConfig;

import angular from 'angular';

// Create the module where our functionality can attach to
let editorModule = angular.module('app.editor', []);

// Include our UI-Router config settings
import EditorConfig from './editor.config';
editorModule.config(EditorConfig);


// Controllers
import EditorCtrl from './editor.controller';
editorModule.controller('EditorCtrl', EditorCtrl);


export default editorModule;

[...]
import './auth';
import './settings';
+ import './editor';


// Create and bootstrap application
const requires = [
  'ui.router',
  'templates',
  'app.layout',
  'app.components',
  'app.home',
  'app.profile',
  'app.article',
  'app.services',
  'app.auth',
  'app.settings'
+  'app.editor'
];

[...]

[...]
-      <li class="nav-item">
-        <a class="nav-link"
-          ui-sref-active="active"
-          ui-sref="app.article">
-          Article
-        </a>
-      </li>

+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.editor">
+          <i class="ion-compose"></i>&nbsp;New Article
+        </a>
+      </li>
[...]

class EditorCtrl {
  constructor() {
    'ngInject';

    this.article = {
      title: '',
      description: '',
      body: '',
      tagList: []
    }

  }

  addTag() {
    // Make sure this tag isn't already in the array
    if (!this.article.tagList.includes(this.tagField)) {
      this.article.tagList.push(this.tagField);
      this.tagField = '';
    }
  }

  removeTag(tagName) {
    this.article.tagList = this.article.tagList.filter((slug) => slug != tagName);
  }

}

export default EditorCtrl;

-            <fieldset class="form-group">
-              <input class="form-control"
-                type="text"
-                placeholder="Enter tags"
-                ng-model="$ctrl.tagField" />
-
-              <div class="tag-list">
-                <span class="tag-default tag-pill">
-                  <i class="ion-close-round"></i>
-                  Example Tag
-                </span>
-                <span class="tag-default tag-pill">
-                  <i class="ion-close-round"></i>
-                  Another Tag
-                </span>
-              </div>
-            </fieldset>

+            <fieldset class="form-group">
+              <input class="form-control"
+                type="text"
+                placeholder="Enter tags"
+                ng-model="$ctrl.tagField"
+                ng-keyup="$event.keyCode == 13 && $ctrl.addTag()" />
+
+              <div class="tag-list">
+                <span ng-repeat="tag in $ctrl.article.tagList"
+                  class="tag-default tag-pill">
+                  <i class="ion-close-round" ng-click="$ctrl.removeTag(tag)"></i>
+                  {{ tag }}
+                </span>
+              </div>
+            </fieldset>

export default class Articles {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;


  }

  // Creates an article
  save(article) {
    let request = {
      url: `${this._AppConstants.api}/articles`,
      method: 'POST',
      data: { article: article }
    };

    return this._$http(request).then((res) => res.data.article);
  }


}

[...]
import ProfileService from './profile.service';
servicesModule.service('Profile', ProfileService);

+ import ArticlesService from './articles.service';
+ servicesModule.service('Articles', ArticlesService);


export default servicesModule;

            <button class="btn btn-lg pull-xs-right btn-primary" type="button" ng-click="$ctrl.submit()">
              Publish Article
            </button>

class EditorCtrl {
-  constructor() {
+  constructor(Articles, $state) {
    'ngInject';

+    this._Articles = Articles;
+    this._$state = $state;

    [...]
  }

  addTag() {
    [...]
  }

  removeTag(tagName) {
    [...]
  }

+  submit() {
+    this.isSubmitting = true;
+
+    this._Articles.save(this.article).then(
+      (newArticle) => {
+        this._$state.go('app.article', { slug: newArticle.slug });
+      },
+      (err) => {
+        this.isSubmitting = false;
+        this.errors = err.data.errors;
+      }
+    );
+  }

}

export default EditorCtrl;

  // Retrieve a single article
  get(slug) {
    return this._$http({
      url: this._AppConstants.api + '/articles/' + slug,
      method: 'GET'
    }).then((res) => res.data.article);
  }

  $stateProvider
  .state('app.editor', {
    url: '/editor/:slug',
    controller: 'EditorCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'editor/editor.html',
    title: 'Editor',
    resolve:{
      auth: function(User) {
        return User.ensureAuthIs(true);
      },
      article: function(Articles, User, $state, $stateParams) {
        // If we're trying to edit an article
        if ($stateParams.slug) {
          return Articles.get($stateParams.slug).then(
            (article) => {
              // If the current user is the author, resolve the article data
              if (User.current.username === article.author.username) {
                return article;

              // Otherwise, redirect them to home page
              } else {
                $state.go('app.home');
              }
            },
            // If there's an error (article doesn't exist, etc), redirect to home page
            (err) => $state.go('app.home')
          );

        // If this is a new article, then just return null
        } else {
          return null;
        }
      }

    }
  });

[...]
+  constructor(Articles, article, $state) {
    'ngInject';

    this._Articles = Articles;
    this._$state = $state;

+    if (!article) {
      this.article = {
        title: '',
        description: '',
        body: '',
        tagList: []
      }
+    } else {
+      this.article = article;
+    }

  }
[...]

  // Creates or updates an article
  save(article) {

    let request = {};

    // If there's a slug, perform an update via PUT w/ article's slug
    if (article.slug) {
      request.url = `${this._AppConstants.api}/articles/${article.slug}`;
      request.method = 'PUT';
      // Delete the slug from the article to ensure the server updates the slug,
      // which happens if the title of the article changed.
      delete article.slug;

    // Otherwise, this is a new article POST request
    } else {
      request.url = `${this._AppConstants.api}/articles`;
      request.method = 'POST';

    }

    // Set the article data in the data attribute of our request
    request.data = { article: article };

    return this._$http(request).then((res) => res.data.article);

  }

function ArticleConfig($stateProvider) {
  'ngInject';

  $stateProvider
  .state('app.article', {
    url: '/article/:slug',
    controller: 'ArticleCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'article/article.html',
+    // When the controller loads, the title of the web page
+    // will be changed to the article's title
+    title: 'Article',
+    resolve: {
+      article: function(Articles, $state, $stateParams) {
+        return Articles.get($stateParams.slug).then(
+          (article) => article,
+          (err) => $state.go('app.home')
+        );
+      }
+    }
  });

};

export default ArticleConfig;

class ArticleCtrl {
-  constructor() {
+  constructor(article) {
    'ngInject';

+    this.article = article;

  }
}


export default ArticleCtrl;

<div class="article-page">

  <!-- Banner for article title, action buttons -->
  <div class="banner">
    <div class="container">

-      <h1>Example article title</h1>
+      <h1 ng-bind="::$ctrl.article.title"></h1>

      <div class="article-meta">
        <!-- Show author info + favorite & follow buttons -->
        <div class="article-meta">
          <a href=""><img /></a>
          <div class="info">
            <a href="" class="author">Brad Green</a>
            <span class="date">January 20th</span>
          </div>

          <button class="btn btn-sm btn-outline-secondary">
            <i class="ion-plus-round"></i>
            &nbsp;
            Follow Brad Green
          </button>
          &nbsp;
          <button class="btn btn-sm btn-outline-primary">
            <i class="ion-heart"></i>
            &nbsp;
            Favorite Article <span class="counter">(29)</span>
          </button>
        </div>
      </div>

    </div>
  </div>



  <!-- Main view. Contains article html and comments -->
  <div class="container page">

    <!-- Article's HTML & tags rendered here -->
    <div class="row article-content">
      <div class="col-xs-12">

        <div>
-          <p>This is the content of our article.</p>
+          <div ng-bind="::$ctrl.article.body"></div>
        </div>

        <ul class="tag-list">
-          <li class="tag-default tag-pill tag-outline">
-            Tag One
-          </li>
-          <li class="tag-default tag-pill tag-outline">
-            Tag Two
-          </li>
+          <li class="tag-default tag-pill tag-outline"
+            ng-repeat="tag in ::$ctrl.article.tagList">
+            {{ tag }}
+          </li>
        </ul>

      </div>
    </div>

[...]

+ import marked from 'marked';

class ArticleCtrl {
-  constructor(article) {
+  constructor(article, $sce, $rootScope) {
    'ngInject';

    this.article = article;

+    // Update the title of this page
+    $rootScope.setPageTitle(this.article.title);

+    // Transform the markdown into HTML
+    this.article.body = $sce.trustAsHtml(marked(this.article.body, { sanitize: true }));

  }
}


export default ArticleCtrl;

[...]
    <div class="row article-content">
      <div class="col-xs-12">

        <div>
-          <div ng-bind="::$ctrl.article.body"></div>
+          <div ng-bind-html="::$ctrl.article.body"></div>
        </div>

        <ul class="tag-list">
          <li class="tag-default tag-pill tag-outline"
            ng-repeat="tag in ::$ctrl.article.tagList">
            {{ tag }}
          </li>
        </ul>

      </div>
    </div>
[...]

export default class Articles {
-  constructor(AppConstants, $http) {
+  constructor(AppConstants, $http, $q) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;
+    this._$q = $q;


  }

  // Creates or updates an article
  save(article) {
    [...]
  }

  // Retrieve a single article
  get(slug) {
+    let deferred = this._$q.defer();
+
+    // Check for blank title
+    if (!slug.replace(" ", "")) {
+      deferred.reject("Article slug is empty");
+      return deferred.promise;
+    }

-    return this._$http({
+    this._$http({
+      url: this._AppConstants.api + '/articles/' + slug,
+      method: 'GET'
-    }).then((res) => res.data.article);
+    }).then(
+      (res) => deferred.resolve(res.data.article),
+      (err) => deferred.reject(err)
+    );
+
+    return deferred.promise;

  }

<div class="article-meta">
  <a ui-sref="app.profile({ username:$ctrl.article.author.username })">
    <img ng-src="{{$ctrl.article.author.image}}" />
  </a>

  <div class="info">
    <a class="author"
      ui-sref="app.profile({ username:$ctrl.article.author.username })"
      ng-bind="$ctrl.article.author.username">
    </a>
    <span class="date"
      ng-bind="$ctrl.article.createdAt | date: 'longDate' ">
    </span>
  </div>

  <ng-transclude></ng-transclude>
</div>

let ArticleMeta= {
  bindings: {
    article: '='
  },
  transclude: true,
  templateUrl: 'components/article-helpers/article-meta.html'
};

export default ArticleMeta;

import FollowBtn from './buttons/follow-btn.component';
componentsModule.component('followBtn', FollowBtn);

+ import ArticleMeta from './article-helpers/article-meta.component';
+ componentsModule.component('articleMeta', ArticleMeta);

export default componentsModule;

<div class="article-page">

  <!-- Banner for article title, action buttons -->
  <div class="banner">
    <div class="container">

      <h1 ng-bind="::$ctrl.article.title"></h1>

-      <div class="article-meta">
-        <!-- Show author info + favorite & follow buttons -->
-        <div class="article-meta">
-          <a href=""><img /></a>
-          <div class="info">
-            <a href="" class="author">Brad Green</a>
-            <span class="date">January 20th</span>
-          </div>
+        <article-meta article="$ctrl.article">
          <button class="btn btn-sm btn-outline-secondary">
            <i class="ion-plus-round"></i>
            &nbsp;
            Follow Brad Green
          </button>
          &nbsp;
          <button class="btn btn-sm btn-outline-primary">
            <i class="ion-heart"></i>
            &nbsp;
            Favorite Article <span class="counter">(29)</span>
          </button>
+        </article-meta>
-        </div>
-      </div>

    </div>
  </div>


  <!-- Main view. Contains article html and comments -->
  <div class="container page">

    <!-- Article's HTML & tags rendered here -->
    <div class="row article-content">
      [...]
    </div>

    <hr />

    <div class="article-actions">

      <!-- Show author info + favorite & follow buttons -->
-      <div class="article-meta">
-          <a href=""><img /></a>
-          <div class="info">
-            <a href="" class="author">Brad Green</a>
-            <span class="date">January 20th</span>
-          </div>
+        <article-meta article="$ctrl.article">
          <button class="btn btn-sm btn-outline-secondary">
            <i class="ion-plus-round"></i>
            &nbsp;
            Follow Brad Green
          </button>
          &nbsp;
          <button class="btn btn-sm btn-outline-primary">
            <i class="ion-heart"></i>
            &nbsp;
            Favorite Article <span class="counter">(29)</span>
          </button>
+        </article-meta>
-      </div>

    </div>

[...]

<article-meta article="$ctrl.article">
  <button class="btn btn-sm btn-outline-secondary">
    <i class="ion-plus-round"></i>
    &nbsp;
    Follow Brad Green
  </button>
  &nbsp;
  <button class="btn btn-sm btn-outline-primary">
    <i class="ion-heart"></i>
    &nbsp;
    Favorite Article <span class="counter">(29)</span>
  </button>
</article-meta>

class ArticleActionsCtrl {
  constructor() {
    'ngInject';

  }
}

let ArticleActions = {
  bindings: {
    article: '='
  },
  controller: ArticleActionsCtrl,
  templateUrl: 'article/article-actions.html'
};

export default ArticleActions;

[...]

// Controllers
import ArticleCtrl from './article.controller';
articleModule.controller('ArticleCtrl', ArticleCtrl);
+
+import ArticleActions from './article-actions.component';
+articleModule.component('articleActions', ArticleActions);


export default articleModule;

<div class="article-page">

  <!-- Banner for article title, action buttons -->
  <div class="banner">
    <div class="container">

      <h1 ng-bind="::$ctrl.article.title"></h1>

-      <article-meta article="$ctrl.article">
-        <button class="btn btn-sm btn-outline-secondary">
-          <i class="ion-plus-round"></i>
-          &nbsp;
-          Follow Brad Green
-        </button>
-        &nbsp;
-        <button class="btn btn-sm btn-outline-primary">
-          <i class="ion-heart"></i>
-          &nbsp;
-          Favorite Article <span class="counter">(29)</span>
-        </button>
-      </article-meta>
+      <article-actions article="$ctrl.article"></article-actions>

    </div>
  </div>


  <!-- Main view. Contains article html and comments -->
  <div class="container page">

    <!-- Article's HTML & tags rendered here -->
    <div class="row article-content">
      [...]
    </div>

    <hr />

    <div class="article-actions">

      <!-- Show author info + favorite & follow buttons -->
-      <article-meta article="$ctrl.article">
-        <button class="btn btn-sm btn-outline-secondary">
-          <i class="ion-plus-round"></i>
-          &nbsp;
-          Follow Brad Green
-        </button>
-        &nbsp;
-        <button class="btn btn-sm btn-outline-primary">
-          <i class="ion-heart"></i>
-          &nbsp;
-          Favorite Article <span class="counter">(29)</span>
-        </button>
-      </article-meta>
+      <article-actions article="$ctrl.article"></article-actions>

    </div>

[...]

<article-meta article="$ctrl.article">

+  <!-- If current user is the author, show edit/delete buttons -->
+  <span ng-show="$ctrl.canModify">
+
+    <a class="btn btn-outline-secondary btn-sm"
+      ui-sref="app.editor({ slug: $ctrl.article.slug })">
+      <i class="ion-edit"></i> Edit Article
+    </a>
+
+    <button class="btn btn-outline-danger btn-sm">
+      <i class="ion-trash-a"></i> Delete Article
+    </button>
+
+  </span>

+  <!-- Otherwise, show favorite & follow buttons -->
+  <span ng-hide="$ctrl.canModify">
    <button class="btn btn-sm btn-outline-secondary">
      <i class="ion-plus-round"></i>
      &nbsp;
      Follow Brad Green
    </button>
    &nbsp;
    <button class="btn btn-sm btn-outline-primary">
      <i class="ion-heart"></i>
      &nbsp;
      Favorite Article <span class="counter">(29)</span>
    </button>
+  </span>
</article-meta>

class ArticleActionsCtrl {
-  constructor() {
+  constructor(User) {
    'ngInject';

+    // The user can only edit/delete this comment if they are the author
+    if (User.current) {
+      this.canModify = (User.current.username === this.article.author.username);
+    } else {
+      this.canModify = false;
+    }

  }
}

[...]

  // Retrieve a single article
  get(slug) {
    [...]
  }

+  // Delete an article
+  destroy(slug) {
+    return this._$http({
+      url: this._AppConstants.api + '/articles/' + slug,
+      method: 'DELETE'
+    });
+  }

class ArticleActionsCtrl {
-  constructor(User) {
+  constructor(Articles, User, $state) {
    'ngInject';

+    this._Articles = Articles;
+    this._$state = $state;

    // The user can only edit/delete this comment if they are the author
    if (User.current) {
      this.canModify = (User.current.username === this.article.author.username);
    } else {
      this.canModify = false;
    }

  }

+  deleteArticle() {
+    this.isDeleting = true;
+    this._Articles.destroy(this.article.slug).then(
+      (success) => this._$state.go('app.home'),
+      (err) => this._$state.go('app.home')
+    );
+  }

}

[...]

<article-meta article="$ctrl.article">

  <!-- If current user is the author, show edit/delete buttons -->
  <span ng-show="$ctrl.canModify">

    <a class="btn btn-outline-secondary btn-sm"
      ui-sref="app.editor({ slug: $ctrl.article.slug })">
      <i class="ion-edit"></i> Edit Article
    </a>

-    <button class="btn btn-outline-danger btn-sm">
+    <button class="btn btn-outline-danger btn-sm"
+      ng-class="{disabled: $ctrl.isDeleting}"
+      ng-click="$ctrl.deleteArticle()">
      <i class="ion-trash-a"></i> Delete Article
    </button>

  </span>

  <!-- Otherwise, show favorite & follow buttons -->
  <span ng-hide="$ctrl.canModify">
    <button class="btn btn-sm btn-outline-secondary">
      <i class="ion-plus-round"></i>
      &nbsp;
      Follow Brad Green
    </button>
    &nbsp;
    <button class="btn btn-sm btn-outline-primary">
      <i class="ion-heart"></i>
      &nbsp;
      Favorite Article <span class="counter">(29)</span>
    </button>
  </span>
</article-meta>

[...]

  <!-- Otherwise, show favorite & follow buttons -->
-  <span ng-hide="$ctrl.canModify">
-    <button class="btn btn-sm btn-outline-secondary">
-      <i class="ion-plus-round"></i>
-      &nbsp;
-      Follow Brad Green
-    </button>
+    <follow-btn user="$ctrl.article.author"></follow-btn>
    &nbsp;
    <button class="btn btn-sm btn-outline-primary">
      <i class="ion-heart"></i>
      &nbsp;
      Favorite Article <span class="counter">(29)</span>
    </button>
  </span>
</article-meta>

<button class="btn btn-sm btn-outline-primary">

  <i class="ion-heart"></i> <ng-transclude></ng-transclude>

</button>

class FavoriteBtnCtrl {
  constructor() {
    'ngInject';


  }
}

let FavoriteBtn= {
  bindings: {
    article: '='
  },
  transclude: true,
  controller: FavoriteBtnCtrl,
  templateUrl: 'components/buttons/favorite-btn.html'
};

export default FavoriteBtn;

[...]

import ArticleMeta from './article-helpers/article-meta.component';
componentsModule.component('articleMeta', ArticleMeta);

+ import FavoriteBtn from './buttons/favorite-btn.component';
+ componentsModule.component('favoriteBtn', FavoriteBtn);


export default componentsModule;

[...]

  <!-- Otherwise, show favorite & follow buttons -->
  <span ng-hide="$ctrl.canModify">
    <follow-btn user="$ctrl.article.author"></follow-btn>
-    &nbsp;
-    <button class="btn btn-sm btn-outline-primary">
-      <i class="ion-heart"></i>
-      &nbsp;
-      Favorite Article <span class="counter">(29)</span>
-    </button>
+    <favorite-btn article="$ctrl.article">
+      {{ $ctrl.article.favorited ? 'Unfavorite' : 'Favorite' }} Article <span class="counter">({{$ctrl.article.favoritesCount}})</span>
+    </favorite-btn>
  </span>
</article-meta>

[...]

  // Delete an article
  destroy(slug) {
    return this._$http({
      url: this._AppConstants.api + '/articles/' + slug,
      method: 'DELETE'
    });
  }

+  // Favorite an article
+  favorite(slug) {
+    return this._$http({
+      url: this._AppConstants.api + '/articles/' + slug + '/favorite',
+      method: 'POST'
+    });
+  }

+  // Unfavorite an article
+  unfavorite(slug) {
+    return this._$http({
+      url: this._AppConstants.api + '/articles/' + slug + '/favorite',
+      method: 'DELETE'
+    });
+  }

}

class FavoriteBtnCtrl {
-  constructor() {
+  constructor(User, Articles, $state) {
    'ngInject';

+    this._Articles = Articles;
+    this._User = User;
+    this._$state = $state;

  }

+  submit() {
+    this.isSubmitting = true;
+
+    if (!this._User.current) {
+      this._$state.go('app.register');
+      return;
+    }
+
+    // If fav'd already, unfavorite it
+    if (this.article.favorited) {
+      this._Articles.unfavorite(this.article.slug).then(
+        () => {
+          this.isSubmitting = false;
+          this.article.favorited = false;
+          this.article.favoritesCount--;
+        }
+      )
+
+    // Otherwise, favorite it
+    } else {
+      this._Articles.favorite(this.article.slug).then(
+        () => {
+          this.isSubmitting = false;
+          this.article.favorited = true;
+          this.article.favoritesCount++;
+        }
+      )
+    }
+  }

}

- <button class="btn btn-sm btn-outline-primary">
+ <button class="btn btn-sm"
+  ng-class="{ 'disabled': $ctrl.isSubmitting,
+              'btn-outline-primary': !$ctrl.article.favorited,
+              'btn-primary': $ctrl.article.favorited }"
+  ng-click="$ctrl.submit()">

  <i class="ion-heart"></i> <ng-transclude></ng-transclude>

</button>

[...]

    <!-- Comments section -->
    <div class="row">
      <div class="col-xs-12 col-md-8 offset-md-2">

-        <div>
+        <div show-authed="true">
+          <list-errors from="$ctrl.commentForm.errors"></list-errors>
-          <form class="card comment-form">
+          <form class="card comment-form" ng-submit="$ctrl.addComment()">
+            <fieldset ng-disabled="$ctrl.commentForm.isSubmitting">
              <div class="card-block">
                <textarea class="form-control"
                  placeholder="Write a comment..."
                  rows="3"
+                  ng-model="$ctrl.commentForm.body">
                </textarea>
              </div>
              <div class="card-footer">
-                <img class="comment-author-img" />
+                <img ng-src="{{::$ctrl.currentUser.image}}" class="comment-author-img" />
                <button class="btn btn-sm btn-primary" type="submit">
                  Post Comment
                </button>
              </div>
+           </fieldset>
          </form>
        </div>

+        <p show-authed="false">
+          <a ui-sref="app.login">Sign in</a> or <a ui-sref="app.register">sign up</a> to add comments on this article.
+        </p>


        <div class="card">
          <div class="card-block">
            <p class="card-text">This is an example comment.</p>
          </div>
          <div class="card-footer">
            <a class="comment-author" href="">
              <img class="comment-author-img" />
            </a>
            &nbsp;
            <a class="comment-author" href="">
              BradGreen
            </a>
            <span class="date-posted">
              Jan 20, 2016
            </span>
          </div>
        </div>


      </div>
    </div>

[...]

import marked from 'marked';

class ArticleCtrl {
-  constructor(article, $sce, $rootScope) {
+  constructor(article, User, $sce, $rootScope) {
    'ngInject';

    this.article = article;

+    this.currentUser = User.current;

    // Update the title of this page
    $rootScope.setPageTitle(this.article.title);

    // Transform the markdown into HTML
    this.article.body = $sce.trustAsHtml(marked(this.article.body));

+    // Initialize blank comment form
+    this.resetCommentForm();
  }

+  resetCommentForm() {
+    this.commentForm = {
+      isSubmitting: false,
+      body: '',
+      errors: []
+    }
+  }

+  addComment() {
+    this.commentForm.isSubmitting = true;
+
+    // Need to make request to server here
+  }

}


export default ArticleCtrl;

export default class Comments {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;
  }


  // Add a comment to an article
  add(slug, payload) {
    return this._$http({
      url: `${this._AppConstants.api}/articles/${slug}/comments`,
      method: 'POST',
      data: { comment: { body: payload } }
    }).then((res) => res.data.comment);

  }

}

[...]

import ArticlesService from './articles.service';
servicesModule.service('Articles', ArticlesService);

+ import CommentsService from './comments.service';
+ servicesModule.service('Comments', CommentsService);


export default servicesModule;

import marked from 'marked';

class ArticleCtrl {
-  constructor(article, User, $sce, $rootScope) {
+  constructor(article, User, Comments, $sce, $rootScope) {
    'ngInject';

    this.article = article;
+    this._Comments = Comments;

    this.currentUser = User.current;

    [...]
  }

  resetCommentForm() {
    [...]
  }

  addComment() {
    this.commentForm.isSubmitting = true;

-    // Need to make request to server here
+    this._Comments.add(this.article.slug, this.commentForm.body).then(
+      (comment) => {
+        console.log(comment);
+        this.resetCommentForm();
+      },
+      (err) => {
+        this.commentForm.isSubmitting = false;
+        this.commentForm.errors = err.data.errors;
+      }
+    );
  }

[...]

export default class Comments {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;
  }


  // Add a comment to an article
  add(slug, payload) {
    return this._$http({
      url: `${this._AppConstants.api}/articles/${slug}/comments`,
      method: 'POST',
      data: { comment: { body: payload } }
    }).then((res) => res.data.comment);

  }

+  // Retrieve the comments for an article
+  getAll(slug) {
+    return this._$http({
+      url: `${this._AppConstants.api}/articles/${slug}/comments`,
+      method: 'GET'
+    }).then((res) => res.data.comments);
+  }

}

import marked from 'marked';

class ArticleCtrl {
  constructor(article, User, Comments, $sce, $rootScope) {
    'ngInject';

    this.article = article;
    this._Comments = Comments;

    this.currentUser = User.current;

    // Update the title of this page
    $rootScope.setPageTitle(this.article.title);

    // Transform the markdown into HTML
    this.article.body = $sce.trustAsHtml(marked(this.article.body));

+    // Get comments for this article
+    Comments.getAll(this.article.slug).then(
+      (comments) => this.comments = comments
+    );

    // Initialize blank comment form
    this.resetCommentForm();
  }

  resetCommentForm() {
    [...]
  }

  addComment() {
    this.commentForm.isSubmitting = true;

    // Need to make request to server here
    this._Comments.add(this.article.slug, this.commentForm.body).then(
      (comment) => {
-        console.log(comment);
+        this.comments.unshift(comment);
        this.resetCommentForm();
      },
      (err) => {
        this.commentForm.isSubmitting = false;
        this.commentForm.errors = err.data.errors;
      }
    );
  }

}


export default ArticleCtrl;

-        <div class="card">
+        <div class="card" ng-repeat="data in $ctrl.comments">
          <div class="card-block">
-            <p class="card-text">This is an example comment.</p>
+            <p class="card-text" ng-bind="::data.body"></p>
          </div>
          <div class="card-footer">
-            <a class="comment-author" href="">
+            <a class="comment-author"
+              ui-sref="app.profile({ username: data.author.username })">
-              <img class="comment-author-img" />
+              <img ng-src="{{::data.author.image}}" class="comment-author-img" />
            </a>
            &nbsp;
-            <a class="comment-author" href="">
-              BradGreen
-            </a>
+            <a class="comment-author"
+              ui-sref="app.profile({ username: data.author.username })"
+              ng-bind="::data.author.username">
+            </a>
-            <span class="date-posted">
-              Jan 20, 2016
-            </span>
+            <span class="date-posted"
+              ng-bind="::data.createdAt | date: 'longDate' ">
+            </span>
          </div>
        </div>

[...]

    <!-- Comments section -->
    <div class="row">
      <div class="col-xs-12 col-md-8 offset-md-2">

        [...]

        <p show-authed="false">
          <a ui-sref="app.login">Sign in</a> or <a ui-sref="app.register">sign up</a> to add comments on this article.
        </p>

-        <div class="card" ng-repeat="data in $ctrl.comments">
-          <div class="card-block">
-            <p class="card-text" ng-bind="::data.body"></p>
-          </div>
-          <div class="card-footer">
-            <a class="comment-author"
-              ui-sref="app.profile({ username: data.author.username })">
-              <img ng-src="{{::data.author.image}}" class="comment-author-img" />
-            </a>
-            &nbsp;
-            <a class="comment-author"
-              ui-sref="app.profile({ username: data.author.username })"
-              ng-bind="::data.author.username">
-            </a>
-            <span class="date-posted"
-              ng-bind="::data.createdAt | date: 'longDate' ">
-            </span>
-          </div>
-        </div>
+        <comment ng-repeat="cmt in $ctrl.comments"
+          data="cmt">
+        </comment>


      </div>
    </div>

[...]

<div class="card" ng-repeat="data in $ctrl.comments">
  <div class="card-block">
    <p class="card-text" ng-bind="::data.body"></p>
  </div>
  <div class="card-footer">
    <a class="comment-author"
      ui-sref="app.profile({ username: data.author.username })">
      <img ng-src="{{::data.author.image}}" class="comment-author-img" />
    </a>
    &nbsp;
    <a class="comment-author"
      ui-sref="app.profile({ username: data.author.username })"
      ng-bind="::data.author.username">
    </a>
    <span class="date-posted"
      ng-bind="::data.createdAt | date: 'longDate' ">
    </span>
  </div>
</div>

class CommentCtrl {
  constructor() {
    'ngInject';

  }
}

let Comment = {
  bindings: {
    data: '='
  },
  controller: CommentCtrl,
  templateUrl: 'article/comment.html'
};

export default Comment;

[...]

import ArticleActions from './article-actions.component';
articleModule.component('articleActions', ArticleActions);

+ import Comment from './comment.component';
+ articleModule.component('comment', Comment);


export default articleModule;

- <div class="card" ng-repeat="data in $ctrl.comments">
+ <div class="card">
  <div class="card-block">
-    <p class="card-text" ng-bind="::data.body"></p>
+    <p class="card-text" ng-bind="::$ctrl.data.body"></p>
  </div>
  <div class="card-footer">
    <a class="comment-author"
-      ui-sref="app.profile({ username: data.author.username })">
+      ui-sref="app.profile({ username: $ctrl.data.author.username })">
-      <img ng-src="{{::data.author.image}}" class="comment-author-img" />
+      <img ng-src="{{::$ctrl.data.author.image}}" class="comment-author-img" />
    </a>
    &nbsp;
    <a class="comment-author"
-      ui-sref="app.profile({ username: data.author.username })"
+      ui-sref="app.profile({ username: $ctrl.data.author.username })"
-      ng-bind="::data.author.username">
+      ng-bind="::$ctrl.data.author.username">
    </a>
    <span class="date-posted"
-      ng-bind="::data.createdAt | date: 'longDate' ">
+      ng-bind="::$ctrl.data.createdAt | date: 'longDate' ">
    </span>
  </div>
</div>

class CommentCtrl {
-  constructor() {
+  constructor(User) {
    'ngInject';

+    // The user can only delete this comment if they are the author
+    if (User.current) {
+      this.canModify = (User.current.username === this.data.author.username);
+    } else {
+      this.canModify = false;
+    }

  }

}

[...]

<div class="card">
  <div class="card-block">
    <p class="card-text" ng-bind="::$ctrl.data.body"></p>
  </div>
  <div class="card-footer">
    <a class="comment-author"
      ui-sref="app.profile({ username: $ctrl.data.author.username })">
      <img ng-src="{{::$ctrl.data.author.image}}" class="comment-author-img" />
    </a>
    &nbsp;
    <a class="comment-author"
      ui-sref="app.profile({ username: $ctrl.data.author.username })"
      ng-bind="::$ctrl.data.author.username">
    </a>
    <span class="date-posted"
      ng-bind="::$ctrl.data.createdAt | date: 'longDate' ">
    </span>
+    <span class="mod-options" ng-show="$ctrl.canModify">
+      <i class="ion-trash-a"></i>
+    </span>
  </div>
</div>

export default class Comments {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;
  }


  // Add a comment to an article
  add(slug, payload) {
    [...]
  }

+  // Delete a comment from an article
+  destroy(commentId, articleSlug) {
+    return this._$http({
+      url: `${this._AppConstants.api}/articles/${articleSlug}/comments/${commentId}`,
+      method: 'DELETE'
+    });
+  }

  // Retrieve the comments for an article
  getAll(slug) {
    [...]
  }

}

[...]

  addComment() {
    [...]
  }

+  deleteComment(commentId, index) {
+    this._Comments.destroy(commentId, this.article.slug).then(
+      (success) => {
+        this.comments.splice(index, 1);
+      }
+    );
+  }

}


export default ArticleCtrl;

[...]

        <comment ng-repeat="cmt in $ctrl.comments"
-          data="cmt">
+          data="cmt"
+          delete-cb="$ctrl.deleteComment(cmt.id, $index)">
        </comment>

[...]

[...]

let Comment = {
  bindings: {
-    data: '='
+    data: '=',
+    deleteCb: '&'
  },
  controller: CommentCtrl,
  templateUrl: 'article/comment.html'
};

export default Comment;

<div class="card">
  <div class="card-block">
    <p class="card-text" ng-bind="::$ctrl.data.body"></p>
  </div>
  <div class="card-footer">
    <a class="comment-author"
      ui-sref="app.profile({ username: $ctrl.data.author.username })">
      <img ng-src="{{::$ctrl.data.author.image}}" class="comment-author-img" />
    </a>
    &nbsp;
    <a class="comment-author"
      ui-sref="app.profile({ username: $ctrl.data.author.username })"
      ng-bind="::$ctrl.data.author.username">
    </a>
    <span class="date-posted"
      ng-bind="::$ctrl.data.createdAt | date: 'longDate' ">
    </span>
    <span class="mod-options" ng-show="$ctrl.canModify">
-      <i class="ion-trash-a"></i>
+      <i class="ion-trash-a" ng-click="$ctrl.deleteCb()"></i>
    </span>
  </div>
</div>

function ProfileConfig($stateProvider) {
  'ngInject';

  $stateProvider
  .state('app.profile', {
+    abstract: true,
    url: '/@:username',
    controller: 'ProfileCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'profile/profile.html',
    // When the controller loads, the title of the web page
    // will be changed to the username of this profile
    resolve: {
      profile: function(Profile, $state, $stateParams) {
        return Profile.get($stateParams.username).then(
          (profile) => profile,
          (err) => $state.go('app.home')
        );
      }
    }
  })

+  .state('app.profile.main', {
+    url:'',
+    controller: 'ProfileArticlesCtrl',
+    controllerAs: '$ctrl',
+    templateUrl: 'profile/profile-articles.html',
+    title: 'Profile'
+  })

+  .state('app.profile.favorites', {
+    url:'/favorites',
+    controller: 'ProfileArticlesCtrl',
+    controllerAs: '$ctrl',
+    templateUrl: 'profile/profile-articles.html',
+    title: 'Favorites'
+  });

};

export default ProfileConfig;

[...]

-        <!-- List of articles -->
-        <div class="article-preview">
-          <div class="article-meta">
-            <a href=""><img /></a>
-            <div class="info">
-              <a href="" class="author">BradGreen</a>
-              <span class="date">January 20th</span>
-            </div>
-            <button class="btn btn-outline-primary btn-sm pull-xs-right">
-              <i class="ion-heart"></i> 29
-            </button>
-          </div>
-          <a href="" class="preview-link">
-            <h1>How to build Angular apps that scale</h1>
-            <p>Building web applications is not an easy task. It's even hard to make ones that scale.</p>
-            <span>Read more...</span>
-            <ul class="tag-list">
-              <li class="tag-default tag-pill tag-outline">programming</li>
-              <li class="tag-default tag-pill tag-outline">web</li>
-            </ul>
-          </a>
-        </div>
+        <!-- View where profile-articles renders to -->
+        <div ui-view></div>

[...]

class ProfileArticlesCtrl {
  constructor(profile, $state) {
    'ngInject';

    // The profile for this page, resolved by UI Router
    this.profile = profile;

    this.profileState = $state.current.name.replace('app.profile.', '');


  }
}


export default ProfileArticlesCtrl;

<p>Current state is {{ $ctrl.profileState }}</p>

[...]

import ProfileCtrl from './profile.controller';
profileModule.controller('ProfileCtrl', ProfileCtrl);

+ import ProfileArticlesCtrl from './profile-articles.controller';
+ profileModule.controller('ProfileArticlesCtrl', ProfileArticlesCtrl);


export default profileModule;

        <!-- Tabs for switching between author articles & favorites -->
        <div class="articles-toggle">
          <ul class="nav nav-pills outline-active">

            <li class="nav-item">
-              <a class="nav-link active">
+              <a class="nav-link"
+                ui-sref-active="active"
+                ui-sref="app.profile.main({username: $ctrl.profile.username})">
                My Articles
              </a>
            </li>

            <li class="nav-item">
-              <a class="nav-link">
+              <a class="nav-link"
+                ui-sref-active="active"
+                ui-sref="app.profile.favorites({username: $ctrl.profile.username})">
                Favorited Articles
              </a>
            </li>

          </ul>
        </div>

      <li class="nav-item">
        <a class="nav-link"
          ui-sref-active="active"
-          ui-sref="app.profile({ username: $ctrl.currentUser.username })">
+          ui-sref="app.profile.main({ username: $ctrl.currentUser.username })">
          <img ng-src="{{$ctrl.currentUser.image}}" class="user-pic"/>
          {{ $ctrl.currentUser.username }}
        </a>
      </li>

<div class="article-meta">
-  <a ui-sref="app.profile({ username:$ctrl.article.author.username })">
+  <a ui-sref="app.profile.main({ username:$ctrl.article.author.username })">
    <img ng-src="{{$ctrl.article.author.image}}" />
  </a>

  <div class="info">
    <a class="author"
-      ui-sref="app.profile({ username:$ctrl.article.author.username })"
+      ui-sref="app.profile.main({ username:$ctrl.article.author.username })"
      ng-bind="$ctrl.article.author.username">
    </a>
    <span class="date"
      ng-bind="$ctrl.article.createdAt | date: 'longDate' ">
    </span>
  </div>

  <ng-transclude></ng-transclude>
</div>

<div class="card">
  <div class="card-block">
    <p class="card-text" ng-bind="::$ctrl.data.body"></p>
  </div>
  <div class="card-footer">
    <a class="comment-author"
-      ui-sref="app.profile({ username: $ctrl.data.author.username })">
+      ui-sref="app.profile.main({ username: $ctrl.data.author.username })">
      <img ng-src="{{::$ctrl.data.author.image}}" class="comment-author-img" />
    </a>
    &nbsp;
    <a class="comment-author"
-      ui-sref="app.profile({ username: $ctrl.data.author.username })"
+      ui-sref="app.profile.main({ username: $ctrl.data.author.username })"
      ng-bind="::$ctrl.data.author.username">
    </a>
    <span class="date-posted"
      ng-bind="::$ctrl.data.createdAt | date: 'longDate' ">
    </span>
    <span class="mod-options" ng-show="$ctrl.canModify">
      <i class="ion-trash-a" ng-click="$ctrl.deleteCb()"></i>
    </span>
  </div>
</div>

[...]

  submitForm() {
    this.isSubmitting = true;
    this._User.update(this.formData).then(
      (user) => {
-        this._$state.go('app.profile', {username:user.username});
+        this._$state.go('app.profile.main', {username:user.username});
      },
      (err) => {
        this.isSubmitting = false;
        this.errors = err.data.errors;
      }
    )
  }

[...]

[...]

  // Unfavorite an article
  unfavorite(slug) {
    return this._$http({
      url: this._AppConstants.api + '/articles/' + slug + '/favorite',
      method: 'DELETE'
    });
  }

+  /*
+    Config object spec:
+
+    {
+      type: String [REQUIRED] - Accepts "all", "feed"
+      filters: Object that serves as a key => value of URL params (i.e. {author:"ericsimons"} )
+    }
+  */
+  query(config) {
+
+    // Create the $http object for this request
+    let request = {
+      url: this._AppConstants.api + '/articles' + ((config.type === 'feed') ? '/feed' : ''),
+      method: 'GET',
+      params: config.filters ? config.filters : null
+    };
+    return this._$http(request).then((res) => res.data);
+  }


}

<div class="article-preview">
  <article-meta article="$ctrl.article">
    <favorite-btn
      article="$ctrl.article"
      class="pull-xs-right">
      {{$ctrl.article.favoritesCount}}
    </favorite-btn>
  </article-meta>

  <a ui-sref="app.article({ slug: $ctrl.article.slug })" class="preview-link">
    <h1 ng-bind="$ctrl.article.title"></h1>
    <p ng-bind="$ctrl.article.description"></p>
    <span>Read more...</span>
    <ul class="tag-list">
      <li class="tag-default tag-pill tag-outline"
        ng-repeat="tag in $ctrl.article.tagList">
        {{tag}}
      </li>
    </ul>
  </a>
</div>

let ArticlePreview = {
  bindings: {
    article: '='
  },
  templateUrl: 'components/article-helpers/article-preview.html'
};

export default ArticlePreview;

[...]

+ import ArticlePreview from './article-helpers/article-preview.component';
+ componentsModule.component('articlePreview', ArticlePreview);


export default componentsModule;

<article-preview
  article="article"
  ng-repeat="article in $ctrl.list">
</article-preview>

<div class="article-preview"
  ng-hide="!$ctrl.loading">
  Loading articles...
</div>

<div class="article-preview"
  ng-show="!$ctrl.loading && !$ctrl.list.length">
  No articles are here... yet.
</div>

- <p>Current state is {{ $ctrl.profileState }}</p>
+ <article-list limit="5" list-config="$ctrl.listConfig"></article-list>

class ProfileArticlesCtrl {
+  constructor(profile, $state, $rootScope) {
    'ngInject';

    // The profile for this page, resolved by UI Router
    this.profile = profile;

    this.profileState = $state.current.name.replace('app.profile.', '');

+    // Both favorites and author articles require the 'all' type
+    this.listConfig = { type: 'all' };
+
+    // `main` state's filter should be by author
+    if (this.profileState === 'main') {
+      this.listConfig.filters = {author: this.profile.username};
+      // Set page title
+      $rootScope.setPageTitle('@' + this.profile.username);
+
+    } else if (this.profileState === 'favorites') {
+      this.listConfig.filters = {favorited: this.profile.username};
+      // Set page title
+      $rootScope.setPageTitle(`Articles favorited by ${this.profile.username}`);
+    }

  }
}

export default ProfileArticlesCtrl;

class ArticleListCtrl {
  constructor(Articles) {
    'ngInject';

    this._Articles = Articles;

    this.setListTo(this.listConfig);

  }

  setListTo(newList) {
    // Set the current list to an empty array
    this.list = [];

    // Set listConfig to the new list's config
    this.listConfig = newList;

    this.runQuery();
  }

  runQuery() {
    // Show the loading indicator
    this.loading = true;

    // Create an object for this query
    let queryConfig = {
      type: this.listConfig.type,
      filters: this.listConfig.filters || {}
    };

    // Set the limit filter from the component's attribute
    queryConfig.filters.limit = this.limit;

    // Run the query
    this._Articles
      .query(queryConfig)
      .then(
        (res) => {
          this.loading = false;

          // Update list and total pages
          this.list = res.articles;
        }
      );
  }

}

let ArticleList = {
  bindings: {
    limit: '=',
    listConfig: '='
  },
  controller: ArticleListCtrl,
  templateUrl: 'components/article-helpers/article-list.html'
};

export default ArticleList;

[...]

import ArticlePreview from './article-helpers/article-preview.component';
componentsModule.component('articlePreview', ArticlePreview);

+ import ArticleList from './article-helpers/article-list.component';
+ componentsModule.component('articleList', ArticleList);


export default componentsModule;

[...]

  runQuery() {
    // Show the loading indicator
    this.loading = true;

    // Create an object for this query
    let queryConfig = {
      type: this.listConfig.type,
      filters: this.listConfig.filters || {}
    };

    // Set the limit filter from the component's attribute
    queryConfig.filters.limit = this.limit;

+    // If there is no page set, set page as 1
+    if (!this.listConfig.currentPage) {
+      this.listConfig.currentPage = 1;
+    }

+    // Add the offset filter
+    queryConfig.filters.offset = (this.limit * (this.listConfig.currentPage - 1));

    // Run the query
    this._Articles
      .query(queryConfig)
      .then(
        (res) => {
          this.loading = false;

          // Update list and total pages
          this.list = res.articles;

+          this.listConfig.totalPages = Math.ceil(res.articlesCount / this.limit);
        }
      );
  }

[...]

<article-preview
  article="article"
  ng-repeat="article in $ctrl.list">
</article-preview>

<div class="article-preview"
  ng-hide="!$ctrl.loading">
  Loading articles...
</div>

<div class="article-preview"
  ng-show="!$ctrl.loading && !$ctrl.list.length">
  No articles are here... yet.
</div>

+ <list-pagination
+  total-pages="$ctrl.listConfig.totalPages"
+  current-page="$ctrl.listConfig.currentPage"
+  ng-hide="$ctrl.listConfig.totalPages <= 1">
+ </list-pagination>

class ListPaginationCtrl {
  constructor() {
    'ngInject';

  }

  pageRange(total) {
    let pages = [];

    for (var i = 0; i < total; i++) {
      pages.push(i + 1)
    }

    return pages;
  }

}

let ListPagination= {
  bindings: {
    totalPages: '=',
    currentPage: '='
  },
  controller: ListPaginationCtrl,
  templateUrl: 'components/article-helpers/list-pagination.html'
};

export default ListPagination;

<nav>
  <ul class="pagination">

    <li class="page-item"
      ng-class="{active: pageNumber === $ctrl.currentPage }"
      ng-repeat="pageNumber in $ctrl.pageRange($ctrl.totalPages)">

      <a class="page-link" href="">{{ pageNumber }}</a>

    </li>

  </ul>
</nav>

[...]

import ArticleList from './article-helpers/article-list.component';
componentsModule.component('articleList', ArticleList);

+ import ListPagination from './article-helpers/list-pagination.component';
+ componentsModule.component('listPagination', ListPagination);


export default componentsModule;

class ArticleListCtrl {
-  constructor(Articles) {
+  constructor(Articles, $scope) {
    'ngInject';

    this._Articles = Articles;

    this.setListTo(this.listConfig);

+    $scope.$on('setPageTo', (ev, pageNumber) => {
+      this.setPageTo(pageNumber);
+    });

  }

  setListTo(newList) {
    // Set the current list to an empty array
    this.list = [];

    // Set listConfig to the new list's config
    this.listConfig = newList;

    this.runQuery();
  }

+  setPageTo(pageNumber) {
+    this.listConfig.currentPage = pageNumber;
+
+    this.runQuery();
+  }


[...]

class ListPaginationCtrl {
-  constructor() {
+  constructor($scope) {
    'ngInject';

+    this._$scope = $scope;
  }

  pageRange(total) {
    [...]
  }

+  changePage(number) {
+    this._$scope.$emit('setPageTo', number);
+  }
}

[...]

<nav>
  <ul class="pagination">

    <li class="page-item"
      ng-class="{active: pageNumber === $ctrl.currentPage }"
      ng-repeat="pageNumber in $ctrl.pageRange($ctrl.totalPages)"
+      ng-click="$ctrl.changePage(pageNumber)">

      <a class="page-link" href="">{{ pageNumber }}</a>

    </li>

  </ul>
</nav>

export default class Tags {
  constructor(AppConstants, $http) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;


  }

  getAll() {

    return this._$http({
      url: this._AppConstants.api + '/tags',
      method: 'GET',
    }).then((res) => res.data.tags);

  }


}

[...]

import CommentsService from './comments.service';
servicesModule.service('Comments', CommentsService);

+ import TagsService from './tags.service';
+ servicesModule.service('Tags', TagsService);


export default servicesModule;

class HomeCtrl {
  constructor(AppConstants) {
    'ngInject';

    this.appName = AppConstants.appName;

  }
}

export default HomeCtrl;

      <!-- Sidebar where popular tags are listed -->
      <div class="col-md-3">
        <div class="sidebar">

          <p>Popular Tags</p>

-          <div class="tag-list">
-            <a href="" class="tag-default tag-pill">
-              Tag One
-            </a>
-            <a href="" class="tag-default tag-pill">
-              Tag Two
-            </a>
-          </div>
+          <div class="tag-list" ng-show="$ctrl.tags">
+            <a href="" class="tag-default tag-pill"
+              ng-repeat="tagName in $ctrl.tags"
+              ng-bind="tagName">
+            </a>
+          </div>

+          <div ng-show="!$ctrl.tagsLoaded">
+            Loading tags...
+          </div>

+          <div class="post-preview"
+            ng-show="$ctrl.tagsLoaded && !$ctrl.tags.length">
+            No tags are here... yet.
+          </div>

        </div>
      </div>

class HomeCtrl {
-  constructor(Tags, AppConstants) {
+  constructor(User, Tags, AppConstants) {
    'ngInject';

    this.appName = AppConstants.appName;

+    // Get list of all tags
+    Tags
+      .getAll()
+      .then(
+        (tags) => {
+          this.tagsLoaded = true;
+          this.tags = tags
+        }
+      );


+    // Set current list to either feed or all, depending on auth status.
+    this.listConfig = {
+      type: User.current ? 'feed' : 'all'
+    };

  }


}

export default HomeCtrl;

[...]

        <!-- List the current articles -->
-        <div class="article-preview">
-          <div class="article-meta">
-            <a href=""><img /></a>
-            <div class="info">
-              <a href="" class="author">BradGreen</a>
-              <span class="date">January 20th</span>
-            </div>
-            <button class="btn btn-outline-primary btn-sm pull-xs-right">
-              <i class="ion-heart"></i> 29
-            </button>
-          </div>
-          <a href="" class="preview-link">
-            <h1>How to build Angular apps that scale</h1>
-            <p>Building web applications is not an easy task. It's even hard to make ones that scale.</p>
-            <span>Read more...</span>
-            <ul class="tag-list">
-              <li class="tag-default tag-pill tag-outline">programming</li>
-              <li class="tag-default tag-pill tag-outline">web</li>
-            </ul>
-          </a>
-        </div>
+        <article-list limit="10" list-config="$ctrl.listConfig"></article-list>

[...]

class ArticleListCtrl {
  constructor(Articles, $scope) {
    'ngInject';

    this._Articles = Articles;

    this.setListTo(this.listConfig);


+    $scope.$on('setListTo', (ev, newList) => {
+      this.setListTo(newList);
+    });

    $scope.$on('setPageTo', (ev, pageNumber) => {
      this.setPageTo(pageNumber);
    });

  }

class HomeCtrl {
-  constructor(User, Tags, AppConstants) {
+  constructor(User, Tags, AppConstants, $scope) {
    'ngInject';

    this.appName = AppConstants.appName;
+    this._$scope = $scope;

    // Get list of all tags
    Tags
      .getAll()
      .then(
        (tags) => {
          this.tagsLoaded = true;
          this.tags = tags
        }
      );

    // Set current list to either feed or all, depending on auth status.
    this.listConfig = {
      type: User.current ? 'feed' : 'all'
    };

  }

+  changeList(newList) {
+    this._$scope.$broadcast('setListTo', newList);
+  }


}

export default HomeCtrl;

[...]

      <!-- Main view - contains tabs & article list -->
      <div class="col-md-9">
        <!-- Tabs for toggling between feed, article lists -->
        <div class="feed-toggle">
          <ul class="nav nav-pills outline-active">

            <li class="nav-item" show-authed="true">
-              <a href="" class="nav-link active">
+              <a href="" class="nav-link"
+                ng-class="{ active: $ctrl.listConfig.type === 'feed' }"
+                ng-click="$ctrl.changeList({ type: 'feed' })">
                Your Feed
              </a>
            </li>

            <li class="nav-item">
-              <a href="" class="nav-link">
+              <a href="" class="nav-link"
+                ng-class="{ active: $ctrl.listConfig.type === 'all' && !$ctrl.listConfig.filters }"
+                ng-click="$ctrl.changeList({ type: 'all' })">
                Global Feed
              </a>
            </li>

+            <li class="nav-item" ng-show="$ctrl.listConfig.filters.tag">
+              <a href="" class="nav-link active">
+                <i class="ion-pound"></i> {{$ctrl.listConfig.filters.tag}}
+              </a>
+            </li>

          </ul>
        </div>

        <!-- List the current articles -->
        <article-list limit="10" list-config="$ctrl.listConfig"></article-list>

      </div>

      <!-- Sidebar where popular tags are listed -->
      <div class="col-md-3">
        <div class="sidebar">

          <p>Popular Tags</p>

          <div class="tag-list" ng-show="$ctrl.tags">
            <a href="" class="tag-default tag-pill"
+              ng-click="$ctrl.changeList({ type: 'all', filters: { tag: tagName } })"
              ng-repeat="tagName in $ctrl.tags"
              ng-bind="tagName">
            </a>
          </div>

          <div ng-show="!$ctrl.tagsLoaded">
            Loading tags...
          </div>

          <div class="post-preview"
            ng-show="$ctrl.tagsLoaded && !$ctrl.tags.length">
            No tags are here... yet.
          </div>

        </div>
      </div>

[...]