Ads SPA with AngularJS Lab Yu are assigned t design and implement a web site fr Online Ads Publishing as single page applicatin (SPA) using HTML5 and AngularJS. The app manages users and their ads rganized by twns and categries. Annymus site visitrs can view published ads. Users can register, lgin, view their ads, add, edit and delete ads and lgut. Administratrs apprve ads befre publishing and can manage the users, ads, categries and twns. Yu are given the server-side REST services t be called by yur app with AJAX requests s yu d nt need t develp a back-end. All applicatin screens are prvided as UI prttype: Ads-Prject-AngularJS-Screens.pdf. The gal f this lab is t start the develpment f the Online Ads AngularJS applicatin: create the prject structure. Prblem 1. Create Ads AngularJS Prject Structure Create an AngularJS prject structure fr yur applicatin based n AngularJS, Btstrap and jquery. Step 1. Unzip the prvided prject skeletn. Yu will get the fllwing prject assets: Libraries required fr yur prject: Angular libraries: angular.js, angular-resurce.js, angular-rutes.js Btstrap libraries: btstrap-3.1.1.js. jquery: jquery-2.1.3.js. jquery Nty (a ntificatin jquery plug-in): jquery.nty.js. Sme CSS files (the Btstrap styles and theme + app.css the main applicatin CSS styles). A lcal Nde.js based Web server fr develpment purpses. It can be started by the start-web-server.bat / start-web-server.sh shell scripts. It will run at http://lcalhst:1234/. JetBrains WebStrm prject files (if yu want t use WebStrm as develpment envirnment). Step 2. Create the fllwing files and flders (yu already have sme f them, s create the missing files nly): App Main Structure JavaScript Files JS Libraries Fllw us: Page 1 f 10
HTML Templates CSS Styles 10 scre Step 3. Create the applicatin main HTML file (index.html). It is the applicatin entry pint. Its gal it t define the applicatin layut (header, main cntent with left and right sidebars and fter, Btstrap-based), lad CSS styles, and include the prject JS libraries and the JS surce cde files: cntrllers, services, etc. <!DOCTYPE html> index.html <html ng-app="app" ng-cntrller="appcntrller"> <head> Lad CSS files <link rel="stylesheet" href="css/btstrap.css" /> TODO: include btstrap-theme.css TODO: include app.css <meta charset="utf-8"> <title>ads</title> </head> <bdy> <header id="app-header"> <div ng-include="'templates/partial/header.html'"> </header> <div id='app-cntent'> <div class='cl-md-2 sidebar'> <div ng-include="'templates/partial/left-sidebar.html'"> <div class='cl-md-8' ng-view> <div class='cl-md-2 sidebar' ng-cntrller="rightsidebarcntrller"> <div ng-include="'templates/partial/right-sidebar.html'"> Fllw us: Page 2 f 10
<fter id="app-fter"> &cpy; 2014 by Sftware University Fundatin, N Rights Reserved </fter> Lad app libraries <script src="lib/angular/angular.js"></script> TODO: include angular-rute.js TODO: include angular-resurce.js TODO: include jquery-2.1.3.js TODO: include jquery.nty.js TODO: include btstrap-3.1.1.js Lad app surce cde: main script, services, cntrllers, etc. <script src="js/app.js"></script> <script src="js/services/adsservices.js"></script> TODO: include the ther services (authservice.js and ntifyservice.js) <script src="js/cntrllers/appcntrller.js"></script> TODO: include the ther cntrllers (HmeCntrller, RightSidebarCntrller, LginCntrller, RegisterCntrller) </bdy> </html> The AppCntrller is the main cntrller fr yur applicatin. It is attached t the app <html> element, s its lgic is shared between all screens. It will hld cmmn lgic needed by the app header, app cntent and sidebars. The header and sidebars are separated in different HTML templates t simplify the prject maintenance. The RightSidebarCntrller will cntrl the cntent shwn in the right sidebar. Step 4. Create the applicatin main JS file (app.js). It defines yur Angular applicatin, a few cnstants and a few rutes fr the hme, lgin and register screens: app.js var app = angular.mdule('app', ['ngrute', 'ngresurce'] app.cnstant('baseserviceurl', 'http://sftuni-ads.azurewebsites.net' app.cnstant('pagesize', 2 Fllw us: Page 3 f 10
app.cnfig(functin ($ruteprvider) { $ruteprvider.when('/', { templateurl: 'templates/hme.html', cntrller: 'HmeCntrller' $ruteprvider.when('/lgin', { templateurl: 'templates/lgin.html', cntrller: 'LginCntrller' : define a rute fr the register cntrller $ruteprvider.therwise( { redirectt: '/' Step 5. Define and AppCntrller skeletn that makes the authrizatin service available in the entire applicatin (it is injected in the $scpe, which is inherited in all elements inside the <html> element): AppCntrller.js // The AppCntrller hlds the presentatin lgic fr the entire app (cmmn fr all screens) app.cntrller('appcntrller', functin ($scpe, authservice) { // Put the authservice in the $scpe t make it accessible frm all screens $scpe.authservice = authservice; Step 6. Define a HmeCntrller skeletn that will hld the presentatin lgic fr the hme screen: HmeCntrller.js // The HmeCntrller hlds the presentatin lgic fr the hme screen app.cntrller('hmecntrller', functin ($scpe, $rtscpe, adsservice, ntifyservice, pagesize) { Fllw us: Page 4 f 10
Step 7. Define a LginCntrller skeletn that will hld the presentatin lgic fr the lgin screen: LginCntrller.js // The LginCntrller is respnsible fr the "Lgin" screen app.cntrller('lgincntrller', functin ($scpe, $lcatin, authservice, ntifyservice) { Step 8. Define a RegisterCntrller skeletn that will hld the presentatin lgic fr the user registratin screen. It shuld be very similar t the LginCntrller. Step 9. Define a RightSidebarCntrller skeletn that will hld the presentatin lgic fr the right sidebar: 10 scre RightSidebarCntrller.js // The RightSidebarCntrller cntrls the cntent displayed in the right sidebar app.cntrller('rightsidebarcntrller', functin ($scpe, categriesservice, twnsservice) { Step 10. Define adsservice, twnsservice and categriesservice skeletns that will hld the business lgic fr lading ads, twns and categries: adsservices.js app.factry('adsservice', functin ($resurce, baseserviceurl) { return { : implement a service t get ads ; app.factry('twnsservice', functin ($resurce, baseserviceurl) { return { : implement a service t get twns ; Fllw us: Page 5 f 10
app.factry('categriesservice', functin ($resurce, baseserviceurl) { return { : implement a service t get categries ; Step 11. Define authservice skeletn that will hld the business lgic fr user lgin, registratin, lgut, will hld the currently lgged-in user, whether it is nrmal user r administratr and ther user sessin related functinality: authservice.js app.factry('authservice', functin ($http, baseserviceurl) { return { lgin: functin(userdata, success, errr) {, register: functin(userdata, success, errr) {, lgut: functin() {, getcurrentuser : functin() {, isannymus : functin() {, islggedin : functin() {, isnrmaluser : functin() {, isadmin : functin() {, Fllw us: Page 6 f 10
getauthheaders : functin() { Step 12. Define ntifyservice that will be used t display inf and errr messages. Typically, when the user perfrms sme actin, it will either succeed r fail. In bth cases, we need sme kind f ntificatins. We will use the jquery Nty t display inf / errr messages. We will add sme lgic t display crrectly the errr messages returned frm the Ads REST Services: ntifyservice.js app.factry('ntifyservice', functin () { return { shwinf: functin(msg) { nty({ text: msg, type: 'inf', layut: 'tpcenter', timeut: 1000, shwerrr: functin(msg, servererrr) { // Cllect errrs t display frm the server respnse var errrs = []; if (servererrr && servererrr.errr_descriptin) { errrs.push(servererrr.errr_descriptin if (servererrr && servererrr.mdelstate) { var mdelstateerrrs = servererrr.mdelstate; fr (var prpertyname in mdelstateerrrs) { var errrmessages = mdelstateerrrs[prpertyname]; var trimmedname = prpertyname.substr(prpertyname.indexof('.') + 1 fr (var i = 0; i < errrmessages.length; i++) { var currenterrr = errrmessages[i]; errrs.push(trimmedname + ' - ' + currenterrr if (errrs.length > 0) { msg = msg + ":<br>" + errrs.jin("<br>" nty({ text: msg, type: 'errr', layut: 'tpcenter', timeut: 5000 Fllw us: Page 7 f 10
Step 13. Define a hme.html template skeletn fr yur hme screen: <h2>hme Screen</h2> TODO hme.html Step 14. Define a left-sidebar.html template skeletn fr yur left sidebar that will hld different navigatin menus depending n the current user (annymus site visitr / nrmal user / administratr): left-sidebar.html TODO: implement lgic t shw different navigatin menu fr: - annymus site visitrs - lgged in users - lgged in administratrs Navigatin bx fr annymus site visitrs <div class="bx"> <h2>navigatin</h2> <ul class="sidebar-menu"> <li><a href="#/">hme</a></li> <li><a href="#/lgin">lgin</a></li> <li><a href="#/register">register</a></li> </ul> Step 15. Define a skeletn lgin.html fr yur user lgin screen: <div class="bx"> <h2>lgin</h2> TODO lgin.html Step 16. Define skeletn register.html fr yur user registratin screen (just like the lgin screen) 3 scre Fllw us: Page 8 f 10
Step 17. Define a skeletn header.html fr yur site header. It will display different cntent depending n the current user (annymus site visitr / nrmal user / administratr): 3 scre Ads TODO: header.html 1) Implement lgic t shw different app header fr: - annymus site visitrs - lgged in users - lgged in administratrs 2) Implement lgic t shw different title fr different screens Step 18. Define a skeletn right-sidebar.html fr yur right sidebar. It will hld the filter by categry and twn fr the screens that need it: 3 scre <div class="bx"> <h2>categries</h2> TODO <div class="bx"> <h2>twns</h2> TODO right-sidebar.html Step 19. Start and test yur applicatin. Fix all bugs. Check the develpment cnsle. It shuld be errr free: 3 scre Fllw us: Page 9 f 10
10 scre Fllw us: Page 10 f 10