Build Your First Mobile App With The Ionic Framework - Part 5

index.html
/app
	app.js
	/login
    	login.controller.js
        login.html
    /dinners
    	dinners.controller.js
        my-dinners.html
    /services
    	dinner.service.js

// dinner.service.js
angular.module('app').factory('DinnerService', ['$http', '$q', DinnerService])

function DinnerService ($http, $q) {

    return {

        login: function (username, password) {
            var request = {
                method: 'POST',
                url: 'http://www.nerddinner.com/Account/LogOn',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: 'UserName=' + username + '&Password=' + password + '&RememberMe=false'
            };

            return $http(request).then(function(response){
                var deferred = $q.defer();

                // this header is only present after we have logged in successfully
                if (response.headers('x-xrds-location')) {
                    deferred.resolve();
                }
                else {
                    deferred.reject();
                }

                return deferred.promise;
            });
        },

        getMyDinners: function () {

            var parseDinners = function (response) {

                var tmp = document.implementation.createHTMLDocument();
                tmp.body.innerHTML = response.data;

                var items = tmp.body.getElementsByClassName('upcomingdinners')[0].children;

                var dinners = [];
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];

                    var dateText = item.getElementsByTagName('strong')[0].innerText;
                    dateText = dateText.replace(/\r?\n|\r/g,'').replace(/\t+/, ' ');

                    var dinner = {
                        Name: item.getElementsByTagName('a')[0].innerText,
                        Date: moment(dateText, 'YYYY-MMM-DDhh:mm A').toDate(),
                        Location: item.innerText.split('at')[1]
                    };

                    dinners.push(dinner);
                }

                return dinners;
            }

            return $http.get('http://www.nerddinner.com/Dinners/My')
                        .then(function(response){
                            return parseDinners(response);
                        });
        }
    }
}

// login.controller.js
angular.module('app').controller('LoginController', ['$state', '$ionicPopup', 'DinnerService', LoginController]);

function LoginController($state, $ionicPopup, dinnerService) {
    var vm = this;
    vm.doLogin = function () {

        var onSuccess = function () {
            $state.go('my-dinners');
        };

        var onError = function () {
            $ionicPopup.alert({
                 title: 'Login failed :(',
                 template: 'Please try again.'
               });
        };

        dinnerService.login(vm.username, vm.password)
                     .then(onSuccess, onError);
    }
}

// dinners.controller.js
angular.module('app').controller('DinnersController', ['DinnerService', DinnersController]);

function DinnersController(dinnerService) {
	var vm = this;

    dinnerService.getMyDinners().then(
            function (dinners) {
                vm.dinners = dinners;
            });

    return vm;
}

<!-- login.html -->
<ion-view title="Login" ng-controller="LoginController as vm">
    <ion-content padding="true" scroll="false" class="has-header">
        <form>
            <ion-list>
                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="text" placeholder="" ng-model="vm.username">
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" placeholder="" ng-model="vm.password">
                </label>
            </ion-list>
            <div class="spacer" style="width: 300px; height: 17px;"></div>
            <a ng-click="vm.doLogin()" class="button button-light button-block">Log in</a>
        </form>
    </ion-content>
</ion-view>

<!-- my-dinners.html -->
<ion-view title="My Dinners" ng-controller="DinnersController as vm">
    <ion-content padding="true" class="has-header">
        <div class="list card" ng-repeat="dinner in vm.dinners">
            <div class="item item-divider">{{ dinner.Name }}</div>
            <div class="item item-body">
                <div>
                    <div>
                        <i class="icon ion-calendar"></i>{{ dinner.Date }}</div>
                    <div>
                        <i class="icon ion-location"></i>{{ dinner.Location }}</div>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

// app.js
...
$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'app/login/login.html'
    })
    .state('my-dinners', {
        url: '/my-dinners',
        templateUrl: 'app/dinners/my-dinners.html'
    });

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
...

$ open -a Google\ Chrome --args --disable-web-security

chrome.exe --user-data-dir="C:/Temp/Chrome" --disable-web-security