nire0510
11/16/2015 - 7:48 PM

Angular Services

Angular Services

(function (angular) {
  'use strict';

  angular.module('SampleApp', [])
    .config(function(LoginService2Provider) {
      LoginService2Provider.setEnvironment('PROD');
    })
    .value('credentials', {
      username: 'foo',
      password: 'bar'
    })
    .constant('credentials1', {
      username: 'foo',
      password: 'bar'
    })
    .factory('UserFactory', UserFactory)
    .factory('LoginService1', LoginService1)
    .provider('LoginService2', LoginService2)
    .service('LoginService', LoginService)
    .controller('MyController', MyController);

  MyController.$inject = ['LoginService2', 'UserFactory'];
  function MyController (LoginService2, UserFactory) {
    var vm = this,
      user;
    
    vm.login = function _login () {
      if (LoginService2.login(vm.username, vm.password)) {
        console.log('Login success!');
        user = new UserFactory(vm.username);
        return;
      };
      
      console.error('Login failed!!!');
    }
  }
  
  LoginService.$inject = ['credentials'];
  function LoginService (credentials) {
    this.login = function _login (strUsername, strPassword) {
      if (strUsername === credentials.username && strPassword === credentials.password) {
        return true;
      }
      
      return false;
    }
  }
  
  LoginService1.$inject = ['credentials'];
  function LoginService1 (credentials) {
    function login (strUsername, strPassword) {
      if (strUsername === credentials.username && strPassword === credentials.password) {
        return true;
      }
      
      return false;
    }
    
    return {
      login: login
    }
  }
  
  function UserFactory () {
    return function (strUsername) {
      this.username = strUsername;
      console.log('User', strUsername, 'created!');
    }
  }
  
  UserFactory.prototype.setLastLogin = function () {
    this.lastLogin = Date.now();
  }
  
  LoginService1.$inject = ['credentials2'];
  function LoginService2 (credentials1) {
    var provider = {},
      env;
    
    provider.setEnvironment = function (strEnvironment) {
      env = strEnvironment;
    }
    
    provider.$get = function () {
      function login (strUsername, strPassword) {
        if (env === 'DEV' || (strUsername === credentials1.username && strPassword === credentials1.password)) {
          return true;
        }
        
        return false;
      }
      
      return {
        login: login
      }
    }
    
    return provider;
  }
})(window.angular);
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Application Template</title>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <meta name="feditor:preset" content="default"/>
</head>
<body data-ng-app="SampleApp">

<header><h3>My Website</h3></header>
<div id="container" data-ng-controller="MyController as ctrl">
  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">User Login</h2>
    </div>
    <div class="mdl-card__supporting-text">
      <form action="#">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="txtUsername" data-ng-model="ctrl.username">
          <label class="mdl-textfield__label" for="txtUsername">Username...</label>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="password" id="txtPassword" data-ng-model="ctrl.password">
          <label class="mdl-textfield__label" for="txtPassword">Password...</label>
        </div>
      </form>
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" data-ng-click="ctrl.login();">
        Login
      </a>
    </div>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>

</body>
</html>
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  background-color: #ededed;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

header {
  background-color: gold;
  position: fixed;
  width: 100%;
}

h3 {
  color: gray;
  padding: 10px;
  margin: 0;
}