Last active
November 16, 2015 19:49
-
-
Save nire0510/8e23a18256a86c6c3c29 to your computer and use it in GitHub Desktop.
Angular Services
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment