Building an Application with AngularJS and Ionic

Christophe Coenraets edited this page on May 15, 2014

Install Ionic
1.

Open a terminal window, and install Ionic:

npm install -g ionic

2.

Make sure you are in the phonegap-workshop-jquk2014 directory, and create the
project:
ionic start conference

3.

Navigate to the conference directory

cd conference

4.

Add a platform. For example:

ionic platform add ios

5.

Adjust server.js to serve static files for phonegap-workshopjquk2014/conference/www

app.use(express.static(path.join(__dirname, '../conference/www')));

6.

Restart the Node.js server

7.

Test the application: Open a browser and access: http://localhost:5000

Display the list of sessions

1.

Open www/templates/menu.html and modify the Playlists item as follows:

<ion-item nav-clear menu-close href="#/app/sessions">
Sessions
</ion-item>

2.

In the templates folder, rename playlists.html to sessions.html, and implement the

template as follows:

<ion-view title="Sessions">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="session in sessions" href="#/app/sessions/{{session.id}}">
{{session.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>

3.

Open app.js, and modify the app.playlists state as follows:

.state('app.sessions', {
url: "/sessions",
views: {
'menuContent': {
templateUrl: "templates/sessions.html",
controller: 'SessionsCtrl'
}
}
})

4.

Modify the fallback route to default to the list of sessions:

$urlRouterProvider.otherwise('/app/sessions');

5.

In the js folder, add a file named services.js implemented as follows:

angular.module('starter.services', ['ngResource'])
.factory('Session', function ($resource) {
return $resource('http://localhost:5000/sessions/:sessionId');
});

6.

services.js uses the Angular resource module: in index.html, add a script tag to
include angular-resource.min.js (right after ionic-bundle.js):
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>

7.

Add a script tag to include services.js (right after app.js):

<script src="js/services.js"></script>

8.

Open js/controllers.js, and add starter.services as a dependency:

angular.module('starter.controllers', ['starter.services'])

9.

Rename PlayListsCtrl to SessionsCtrl and implement it as follows:

.controller('SessionsCtrl', function($scope, Session) {
$scope.sessions = Session.query();
})

10.

Test the application

Display the Session Details

1.

Rename playlist.html to session.html and implement it as follows:

<ion-view title="Session">
<ion-content class="has-header">
<div class="list card">
<div class="item">
<h3>{{session.time}}</h3>
<h2>{{session.title}}</h2>
<p>{{session.speaker}}</p>
</div>
<div class="item item-body">
<p>{{session.description}}</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-content>
</ion-view>

2.

Open app.js, and modify the app.single state as follows:

.state('app.session', {
url: "/sessions/:sessionId",
views: {
'menuContent': {
templateUrl: "templates/session.html",
controller: 'SessionCtrl'

}
}
});

3.

Open js/controllers.js, rename PlayListCtrl to SessionCtrl and implement it as

follows:
.controller('SessionCtrl', function($scope, $stateParams, Session) {
$scope.session = Session.get({sessionId: $stateParams.sessionId});
});

4.

Test the application

Implement Facebook Login

1.

Login to Facebook and create a Facebook application. Specify

localhost:5000/oauthcallback.html as a valid OAuth Redirect URL.

2.

Copy openfb.js from phonegap-workshop-jquk2014/resources to

conference/www/lib.

3.

Copy oauthcallback.html from phonegap-workshop-jquk2014/resources to

conference/www.

4.

In index.html, add a script tag to include openfb.js (before app.js):

<script src="lib/openfb.js"></script>

5.

Open www/templates/menu.html, delete the Search and Browse menu items, and
add the following menu item:
<ion-item nav-clear menu-close href="#/app/login">
Login
</ion-item>

6.

In the templates folder, create a new file name login.html and implement it as
follows:
<ion-view title="Login">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header padding">

<button class="button button-block button-positive" ng-click="login()">Login with

Facebook</button>
</ion-content>
</ion-view>

7.

Open app.js, and initialize OpenFB in the config() function (first line):
openFB.init('YOUR_FB_APP_ID'); // Defaults to sessionStorage for storing the Facebook token

8.

Delete the search and browse routes, and add the following route:
.state('app.login', {
url: "/login",
views: {
'menuContent' :{
templateUrl: "templates/login.html",
controller: "LoginCtrl"
}
}
})

9.

Open js/controllers.js, and add the following controller:

.controller('LoginCtrl', function($scope) {
$scope.login = function() {
openFB.login('email',
function() {
alert('Facebook login succeeded');
},
function(error) {
alert('Facebook login failed: ' + error.error_description);
});
};
})

10.

Test the application

Display the User Profile

1.

Open www/templates/menu.html, and add the following menu item:

<ion-item nav-clear menu-close href="#/app/profile">
Profile
</ion-item>

2.

In the templates folder, create a new file named profile.html and implement it as
follows:
<ion-view title="Profile">
<ion-content class="has-header">
<div class="list card">
<div class="item">
<h2>{{user.name}}</h2>
<p>{{user.city}}</p>
</div>
<div class="item item-body">
<img src="http://graph.facebook.com/{{user.id}}/picture?
width=270&height=270"/>
</div>
</div>
</ion-content>
</ion-view>

3.

Open app.js, and add the following route:

.state('app.profile', {
url: "/profile",
views: {
'menuContent' :{
templateUrl: "templates/profile.html",
controller: "ProfileCtrl"
}
}
})

4.

Open controllers.js, and add the following controller:

.controller('ProfileCtrl', function($scope, $q) {
openFB.api({
path: '/me',
params: {fields: 'id,name'},
success: function(user) {
console.log(user);
$scope.$apply(function() {
$scope.user = user;
});
},
error: function(error) {
console.log(error);
alert('Facebook error: ' + error.error_description);
}
});
});

5.

Test the application