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:
npminstallgionic

2. Make sure you are in the phonegap-workshop-jquk2014 directory, and create the
project:
ionicstartconference

3. Navigate to the conference directory

cdconference

4. Add a platform. For example:

ionicplatformaddios

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:
<ionitemnavclearmenuclosehref="#/app/sessions">
Sessions
</ionitem>

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

template as follows:
<ionviewtitle="Sessions">
<ionnavbuttonsside="left">
<buttonmenutoggle="left"class="buttonbuttoniconiconionnavicon"></button>
</ionnavbuttons>
<ioncontentclass="hasheader">
<ionlist>

<ionitemngrepeat="sessioninsessions"
href="#/app/sessions/{{session.id}}">
{{session.title}}
</ionitem>
</ionlist>
</ioncontent>
</ionview>

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):
<scriptsrc="lib/ionic/js/angular/angularresource.min.js"></script>

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

<scriptsrc="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:
<ionviewtitle="Session">
<ioncontentclass="hasheader">
<divclass="listcard">
<divclass="item">
<h3>{{session.time}}</h3>
<h2>{{session.title}}</h2>
<p>{{session.speaker}}</p>
</div>

<divclass="itemitembody">
<p>{{session.description}}</p>
</div>
<divclass="itemtabstabssecondarytabsiconleft">
<aclass="tabitem"href="#">
<iclass="iconionthumbsup"></i>
Like
</a>
<aclass="tabitem"href="#">
<iclass="iconionchatbox"></i>
Comment
</a>
<aclass="tabitem"href="#">
<iclass="iconionshare"></i>
Share
</a>
</div>
</div>
</ioncontent>
</ionview>

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):
<scriptsrc="lib/openfb.js"></script>

5. Open www/templates/menu.html, delete the Search and Browse menu items, and
add the following menu item:
<ionitemnavclearmenuclosehref="#/app/login">
Login
</ionitem>

6. In the templates folder, create a new file name login.html and implement it as follows:
<ionviewtitle="Login">
<ionnavbuttonsside="left">
<buttonmenutoggle="left"class="buttonbuttoniconiconionnavicon"></button>
</ionnavbuttons>
<ioncontentclass="hasheaderpadding">
<buttonclass="buttonbuttonblockbuttonpositive"ngclick="login()">Loginwith
Facebook</button>
</ioncontent>
</ionview>

7. Open app.js, and initialize OpenFB in the config() function (first line):
openFB.init('YOUR_FB_APP_ID');//DefaultstosessionStorageforstoringthe
Facebooktoken

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('Facebookloginsucceeded');
},
function(error){
alert('Facebookloginfailed:'+error.error_description);
});
};
})

10. Test the application

Display the User Profile

1. Open www/templates/menu.html, and add the following menu item:
<ionitemnavclearmenuclosehref="#/app/profile">
Profile
</ionitem>

2. In the templates folder, create a new file named profile.html and implement it as
follows:
<ionviewtitle="Profile">
<ioncontentclass="hasheader">
<divclass="listcard">
<divclass="item">
<h2>{{user.name}}</h2>
<p>{{user.city}}</p>
</div>
<divclass="itemitembody">
<img
src="http://graph.facebook.com/{{user.id}}/picture?width=270&height=270"/>
</div>
</div>
</ioncontent>
</ionview>

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('Facebookerror:'+error.error_description);
}
});
});

5. Test the application