[{"data":1,"prerenderedAt":7154},["ShallowReactive",2],{"article:series-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-2-555":3,"\u002Fblog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-2-555-surround":7143},{"id":4,"title":5,"author":6,"body":7,"date":7132,"description":7133,"extension":7134,"image":7135,"meta":7136,"minRead":282,"navigation":571,"path":7137,"published":571,"seo":7138,"stem":7139,"tags":7140,"__hash__":7142},"blog\u002Fblog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-2-555.md","Build an app with Laravel5 (backend) and Angularjs (frontend) – Part 2","Baljeet Singh",{"type":8,"value":9,"toc":7123},"minimark",[10,28,40,43,48,57,60,87,90,103,106,109,112,135,138,150,153,162,171,174,193,196,235,238,333,337,340,347,350,621,624,852,855,858,909,912,1002,1005,1014,1017,1026,1030,1033,1844,1847,1852,1861,1877,1880,1975,1978,2098,2101,2104,2599,2602,2607,2610,2614,2617,2843,2846,3141,3144,3147,3152,3156,3159,3985,3988,4186,4189,4194,4197,4206,4222,4225,4331,4334,4549,4552,4555,4657,4660,4663,4863,4866,5044,5047,5051,5054,5759,5762,6584,6589,6594,6599,6604,6609,6614,6618,6621,6680,6683,7102,7105,7110,7113,7116,7119],[11,12,17],"pre",{"className":13,"code":14,"language":15,"meta":16,"style":16},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","https:\u002F\u002Fgithub.com\u002Fmbaljeetsingh\u002Fangularjs-jokes-app-with-laravel5-api\n","bash","",[18,19,20],"code",{"__ignoreMap":16},[21,22,25],"span",{"class":23,"line":24},"line",1,[21,26,14],{"class":27},"sBMFI",[29,30,31,32,39],"p",{},"In the ",[33,34,38],"a",{"href":35,"rel":36},"https:\u002F\u002Fbaljeetsingh.in\u002Fblog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-1-480\u002F",[37],"nofollow","Previous part"," of this series, we have seen how we can use Laravel5 to create an full fledged API and we checked the API response with the chrome extension called Postman. And in this second part of the two part series, we will see how we can interact with or use this API to make requests from the client side with Angularjs and make a simple jokes app.",[29,41,42],{},"So without further due, let’s jump right into the frontend part.",[44,45,47],"h2",{"id":46},"installing-angular-seed","Installing Angular Seed",[29,49,50,51,56],{},"Let’s start by creating skeleton for the client side work, we will use ",[33,52,55],{"href":53,"rel":54},"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangular-seed",[37],"angular seed"," for this.",[29,58,59],{},"First you need to clone the angular seed project from the git.",[11,61,63],{"className":13,"code":62,"language":15,"meta":16,"style":16},"git clone https:\u002F\u002Fgithub.com\u002Fangular\u002Fangular-seed.git\ncd angular-seed\n",[18,64,65,77],{"__ignoreMap":16},[21,66,67,70,74],{"class":23,"line":24},[21,68,69],{"class":27},"git",[21,71,73],{"class":72},"sfazB"," clone",[21,75,76],{"class":72}," https:\u002F\u002Fgithub.com\u002Fangular\u002Fangular-seed.git\n",[21,78,80,84],{"class":23,"line":79},2,[21,81,83],{"class":82},"s2Zo4","cd",[21,85,86],{"class":72}," angular-seed\n",[29,88,89],{},"Next step is to install the dependencies for the angular seed project. So we will run following command.",[11,91,93],{"className":13,"code":92,"language":15,"meta":16,"style":16},"npm install\n",[18,94,95],{"__ignoreMap":16},[21,96,97,100],{"class":23,"line":24},[21,98,99],{"class":27},"npm",[21,101,102],{"class":72}," install\n",[29,104,105],{},"This will fetch the dependencies for the angular seed project. Now you can see two new folders created in the directory structure named node_modules & app\u002Fbower_components.",[29,107,108],{},"Both Laravel 5 and Angularjs by default use port 8000 so we need to use other port for one of these. Let’s change port for angular seed project.",[29,110,111],{},"Open package.json file and update start property as,",[11,113,115],{"className":13,"code":114,"language":15,"meta":16,"style":16},"\"start\": \"http-server -a localhost -p 8080 -c-1\"\n",[18,116,117],{"__ignoreMap":16},[21,118,119,122,125,129,132],{"class":23,"line":24},[21,120,121],{"class":27},"\"start\"",[21,123,124],{"class":82},":",[21,126,128],{"class":127},"sMK4o"," \"",[21,130,131],{"class":72},"http-server -a localhost -p 8080 -c-1",[21,133,134],{"class":127},"\"\n",[29,136,137],{},"Now you can run the project by running the following command.",[11,139,141],{"className":13,"code":140,"language":15,"meta":16,"style":16},"npm start\n",[18,142,143],{"__ignoreMap":16},[21,144,145,147],{"class":23,"line":24},[21,146,99],{"class":27},[21,148,149],{"class":72}," start\n",[29,151,152],{},"Now browse to the app at",[11,154,156],{"className":13,"code":155,"language":15,"meta":16,"style":16},"http:\u002F\u002Flocalhost:8080\u002Fapp\u002Findex.html\n",[18,157,158],{"__ignoreMap":16},[21,159,160],{"class":23,"line":24},[21,161,155],{"class":27},[29,163,164,165,170],{},"Install ui-router\nAngular Seed project by defaults ships with angular’s default router. But i prefer ",[33,166,169],{"href":167,"rel":168},"https:\u002F\u002Fgithub.com\u002Fangular-ui\u002Fui-router",[37],"ui-router"," (A third party router for angular). So we will modify our project to include the ui-router instead of default angular router.",[29,172,173],{},"We will use bower for downloaing ui-router to our project as",[11,175,177],{"className":13,"code":176,"language":15,"meta":16,"style":16},"bower install angular-ui-router --save\n",[18,178,179],{"__ignoreMap":16},[21,180,181,184,187,190],{"class":23,"line":24},[21,182,183],{"class":27},"bower",[21,185,186],{"class":72}," install",[21,188,189],{"class":72}," angular-ui-router",[21,191,192],{"class":72}," --save\n",[29,194,195],{},"Include angular-ui-router.js in your index.html",[11,197,201],{"className":198,"code":199,"language":200,"meta":16,"style":16},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"bower_components\u002Fangular-ui-router\u002Frelease\u002Fangular-ui-router.js\">\u003C\u002Fscript>\n","html",[18,202,203],{"__ignoreMap":16},[21,204,205,208,212,216,219,222,225,227,230,232],{"class":23,"line":24},[21,206,207],{"class":127},"\u003C",[21,209,211],{"class":210},"swJcz","script",[21,213,215],{"class":214},"spNyl"," src",[21,217,218],{"class":127},"=",[21,220,221],{"class":127},"\"",[21,223,224],{"class":72},"bower_components\u002Fangular-ui-router\u002Frelease\u002Fangular-ui-router.js",[21,226,221],{"class":127},[21,228,229],{"class":127},">\u003C\u002F",[21,231,211],{"class":210},[21,233,234],{"class":127},">\n",[29,236,237],{},"Now add ui-router to list of dependenices in the app.js",[11,239,243],{"className":240,"code":241,"language":242,"meta":16,"style":16},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","angular.module('myApp', [\n  \u002F\u002F 'ngRoute',\n  'ui.router',\n  'myApp.view1',\n  'myApp.view2'\n  'myApp.version'\n])\n","js",[18,244,245,274,280,294,306,317,327],{"__ignoreMap":16},[21,246,247,251,254,257,260,263,266,268,271],{"class":23,"line":24},[21,248,250],{"class":249},"sTEyZ","angular",[21,252,253],{"class":127},".",[21,255,256],{"class":82},"module",[21,258,259],{"class":249},"(",[21,261,262],{"class":127},"'",[21,264,265],{"class":72},"myApp",[21,267,262],{"class":127},[21,269,270],{"class":127},",",[21,272,273],{"class":249}," [\n",[21,275,276],{"class":23,"line":79},[21,277,279],{"class":278},"sHwdD","  \u002F\u002F 'ngRoute',\n",[21,281,283,286,289,291],{"class":23,"line":282},3,[21,284,285],{"class":127},"  '",[21,287,288],{"class":72},"ui.router",[21,290,262],{"class":127},[21,292,293],{"class":127},",\n",[21,295,297,299,302,304],{"class":23,"line":296},4,[21,298,285],{"class":127},[21,300,301],{"class":72},"myApp.view1",[21,303,262],{"class":127},[21,305,293],{"class":127},[21,307,309,311,314],{"class":23,"line":308},5,[21,310,285],{"class":127},[21,312,313],{"class":72},"myApp.view2",[21,315,316],{"class":127},"'\n",[21,318,320,322,325],{"class":23,"line":319},6,[21,321,285],{"class":127},[21,323,324],{"class":72},"myApp.version",[21,326,316],{"class":127},[21,328,330],{"class":23,"line":329},7,[21,331,332],{"class":249},"])\n",[44,334,336],{"id":335},"creating-new-routes","Creating New Routes",[29,338,339],{},"Now we will create two routes, one for the auth and other for the jokes. Let’s start by creating two new directories in the app directory named view_auth & view_jokes. Your directory structure will look something like this.",[29,341,342],{},[343,344],"img",{"alt":345,"src":346},"null","\u002Fimg\u002F2015-11-13_22-02-40.png",[29,348,349],{},"Now open view_auth\u002Fauth.js, and update the code as follows:",[11,351,353],{"className":240,"code":352,"language":242,"meta":16,"style":16},"angular\n  .module('myApp.auth', [])\n  .config([\n    '$stateProvider',\n    '$urlRouterProvider',\n    function ($stateProvider, $urlRouterProvider) {\n      $stateProvider.state('auth', {\n        url: '\u002Fauth',\n        views: {\n          jokesContent: {\n            templateUrl: 'view_auth\u002Fauth.html',\n            controller: 'AuthCtrl as auth',\n          },\n        },\n      });\n    },\n  ])\n\n  .controller('AuthCtrl', ['$rootScope', function ($rootScope) {}]);\n",[18,354,355,360,381,391,403,414,436,459,477,487,497,514,531,537,543,554,560,566,573],{"__ignoreMap":16},[21,356,357],{"class":23,"line":24},[21,358,359],{"class":249},"angular\n",[21,361,362,365,367,369,371,374,376,378],{"class":23,"line":79},[21,363,364],{"class":127},"  .",[21,366,256],{"class":82},[21,368,259],{"class":249},[21,370,262],{"class":127},[21,372,373],{"class":72},"myApp.auth",[21,375,262],{"class":127},[21,377,270],{"class":127},[21,379,380],{"class":249}," [])\n",[21,382,383,385,388],{"class":23,"line":282},[21,384,364],{"class":127},[21,386,387],{"class":82},"config",[21,389,390],{"class":249},"([\n",[21,392,393,396,399,401],{"class":23,"line":296},[21,394,395],{"class":127},"    '",[21,397,398],{"class":72},"$stateProvider",[21,400,262],{"class":127},[21,402,293],{"class":127},[21,404,405,407,410,412],{"class":23,"line":308},[21,406,395],{"class":127},[21,408,409],{"class":72},"$urlRouterProvider",[21,411,262],{"class":127},[21,413,293],{"class":127},[21,415,416,419,422,425,427,430,433],{"class":23,"line":319},[21,417,418],{"class":214},"    function",[21,420,421],{"class":127}," (",[21,423,398],{"class":424},"sHdIc",[21,426,270],{"class":127},[21,428,429],{"class":424}," $urlRouterProvider",[21,431,432],{"class":127},")",[21,434,435],{"class":127}," {\n",[21,437,438,441,443,446,448,450,453,455,457],{"class":23,"line":329},[21,439,440],{"class":249},"      $stateProvider",[21,442,253],{"class":127},[21,444,445],{"class":82},"state",[21,447,259],{"class":210},[21,449,262],{"class":127},[21,451,452],{"class":72},"auth",[21,454,262],{"class":127},[21,456,270],{"class":127},[21,458,435],{"class":127},[21,460,462,465,467,470,473,475],{"class":23,"line":461},8,[21,463,464],{"class":210},"        url",[21,466,124],{"class":127},[21,468,469],{"class":127}," '",[21,471,472],{"class":72},"\u002Fauth",[21,474,262],{"class":127},[21,476,293],{"class":127},[21,478,480,483,485],{"class":23,"line":479},9,[21,481,482],{"class":210},"        views",[21,484,124],{"class":127},[21,486,435],{"class":127},[21,488,490,493,495],{"class":23,"line":489},10,[21,491,492],{"class":210},"          jokesContent",[21,494,124],{"class":127},[21,496,435],{"class":127},[21,498,500,503,505,507,510,512],{"class":23,"line":499},11,[21,501,502],{"class":210},"            templateUrl",[21,504,124],{"class":127},[21,506,469],{"class":127},[21,508,509],{"class":72},"view_auth\u002Fauth.html",[21,511,262],{"class":127},[21,513,293],{"class":127},[21,515,517,520,522,524,527,529],{"class":23,"line":516},12,[21,518,519],{"class":210},"            controller",[21,521,124],{"class":127},[21,523,469],{"class":127},[21,525,526],{"class":72},"AuthCtrl as auth",[21,528,262],{"class":127},[21,530,293],{"class":127},[21,532,534],{"class":23,"line":533},13,[21,535,536],{"class":127},"          },\n",[21,538,540],{"class":23,"line":539},14,[21,541,542],{"class":127},"        },\n",[21,544,546,549,551],{"class":23,"line":545},15,[21,547,548],{"class":127},"      }",[21,550,432],{"class":210},[21,552,553],{"class":127},";\n",[21,555,557],{"class":23,"line":556},16,[21,558,559],{"class":127},"    },\n",[21,561,563],{"class":23,"line":562},17,[21,564,565],{"class":249},"  ])\n",[21,567,569],{"class":23,"line":568},18,[21,570,572],{"emptyLinePlaceholder":571},true,"\n",[21,574,576,578,581,583,585,588,590,592,595,597,600,602,604,607,609,611,613,616,619],{"class":23,"line":575},19,[21,577,364],{"class":127},[21,579,580],{"class":82},"controller",[21,582,259],{"class":249},[21,584,262],{"class":127},[21,586,587],{"class":72},"AuthCtrl",[21,589,262],{"class":127},[21,591,270],{"class":127},[21,593,594],{"class":249}," [",[21,596,262],{"class":127},[21,598,599],{"class":72},"$rootScope",[21,601,262],{"class":127},[21,603,270],{"class":127},[21,605,606],{"class":214}," function",[21,608,421],{"class":127},[21,610,599],{"class":424},[21,612,432],{"class":127},[21,614,615],{"class":127}," {}",[21,617,618],{"class":249},"])",[21,620,553],{"class":127},[29,622,623],{},"Now open view_jokes\u002Fjokes.js, and update the code as follows:",[11,625,627],{"className":240,"code":626,"language":242,"meta":16,"style":16},"angular\n  .module('myApp.jokes', [])\n\n  .config([\n    '$stateProvider',\n    '$urlRouterProvider',\n    function ($stateProvider, $urlRouterProvider) {\n      $stateProvider.state('jokes', {\n        url: '\u002Fjokes',\n        views: {\n          jokesContent: {\n            templateUrl: 'view_jokes\u002Fjokes.html',\n            controller: 'JokesCtrl as jokes',\n          },\n        },\n      });\n    },\n  ])\n\n  .controller('JokesCtrl', ['$rootScope', function ($rootScope) {}]);\n",[18,628,629,633,652,656,664,674,684,700,721,736,744,752,767,782,786,790,798,802,806,810],{"__ignoreMap":16},[21,630,631],{"class":23,"line":24},[21,632,359],{"class":249},[21,634,635,637,639,641,643,646,648,650],{"class":23,"line":79},[21,636,364],{"class":127},[21,638,256],{"class":82},[21,640,259],{"class":249},[21,642,262],{"class":127},[21,644,645],{"class":72},"myApp.jokes",[21,647,262],{"class":127},[21,649,270],{"class":127},[21,651,380],{"class":249},[21,653,654],{"class":23,"line":282},[21,655,572],{"emptyLinePlaceholder":571},[21,657,658,660,662],{"class":23,"line":296},[21,659,364],{"class":127},[21,661,387],{"class":82},[21,663,390],{"class":249},[21,665,666,668,670,672],{"class":23,"line":308},[21,667,395],{"class":127},[21,669,398],{"class":72},[21,671,262],{"class":127},[21,673,293],{"class":127},[21,675,676,678,680,682],{"class":23,"line":319},[21,677,395],{"class":127},[21,679,409],{"class":72},[21,681,262],{"class":127},[21,683,293],{"class":127},[21,685,686,688,690,692,694,696,698],{"class":23,"line":329},[21,687,418],{"class":214},[21,689,421],{"class":127},[21,691,398],{"class":424},[21,693,270],{"class":127},[21,695,429],{"class":424},[21,697,432],{"class":127},[21,699,435],{"class":127},[21,701,702,704,706,708,710,712,715,717,719],{"class":23,"line":461},[21,703,440],{"class":249},[21,705,253],{"class":127},[21,707,445],{"class":82},[21,709,259],{"class":210},[21,711,262],{"class":127},[21,713,714],{"class":72},"jokes",[21,716,262],{"class":127},[21,718,270],{"class":127},[21,720,435],{"class":127},[21,722,723,725,727,729,732,734],{"class":23,"line":479},[21,724,464],{"class":210},[21,726,124],{"class":127},[21,728,469],{"class":127},[21,730,731],{"class":72},"\u002Fjokes",[21,733,262],{"class":127},[21,735,293],{"class":127},[21,737,738,740,742],{"class":23,"line":489},[21,739,482],{"class":210},[21,741,124],{"class":127},[21,743,435],{"class":127},[21,745,746,748,750],{"class":23,"line":499},[21,747,492],{"class":210},[21,749,124],{"class":127},[21,751,435],{"class":127},[21,753,754,756,758,760,763,765],{"class":23,"line":516},[21,755,502],{"class":210},[21,757,124],{"class":127},[21,759,469],{"class":127},[21,761,762],{"class":72},"view_jokes\u002Fjokes.html",[21,764,262],{"class":127},[21,766,293],{"class":127},[21,768,769,771,773,775,778,780],{"class":23,"line":533},[21,770,519],{"class":210},[21,772,124],{"class":127},[21,774,469],{"class":127},[21,776,777],{"class":72},"JokesCtrl as jokes",[21,779,262],{"class":127},[21,781,293],{"class":127},[21,783,784],{"class":23,"line":539},[21,785,536],{"class":127},[21,787,788],{"class":23,"line":545},[21,789,542],{"class":127},[21,791,792,794,796],{"class":23,"line":556},[21,793,548],{"class":127},[21,795,432],{"class":210},[21,797,553],{"class":127},[21,799,800],{"class":23,"line":562},[21,801,559],{"class":127},[21,803,804],{"class":23,"line":568},[21,805,565],{"class":249},[21,807,808],{"class":23,"line":575},[21,809,572],{"emptyLinePlaceholder":571},[21,811,813,815,817,819,821,824,826,828,830,832,834,836,838,840,842,844,846,848,850],{"class":23,"line":812},20,[21,814,364],{"class":127},[21,816,580],{"class":82},[21,818,259],{"class":249},[21,820,262],{"class":127},[21,822,823],{"class":72},"JokesCtrl",[21,825,262],{"class":127},[21,827,270],{"class":127},[21,829,594],{"class":249},[21,831,262],{"class":127},[21,833,599],{"class":72},[21,835,262],{"class":127},[21,837,270],{"class":127},[21,839,606],{"class":214},[21,841,421],{"class":127},[21,843,599],{"class":424},[21,845,432],{"class":127},[21,847,615],{"class":127},[21,849,618],{"class":249},[21,851,553],{"class":127},[29,853,854],{},"Open view_auth\u002Fauth.html & view_jokes\u002Fjokes.html and add some content. These are view specific files.",[29,856,857],{},"Now include these view specific script files in the index.html as",[11,859,861],{"className":198,"code":860,"language":200,"meta":16,"style":16},"\u003Cscript src=\"view_auth\u002Fauth.js\">\u003C\u002Fscript>\n\u003Cscript src=\"view_jokes\u002Fjokes.js\">\u003C\u002Fscript>\n",[18,862,863,886],{"__ignoreMap":16},[21,864,865,867,869,871,873,875,878,880,882,884],{"class":23,"line":24},[21,866,207],{"class":127},[21,868,211],{"class":210},[21,870,215],{"class":214},[21,872,218],{"class":127},[21,874,221],{"class":127},[21,876,877],{"class":72},"view_auth\u002Fauth.js",[21,879,221],{"class":127},[21,881,229],{"class":127},[21,883,211],{"class":210},[21,885,234],{"class":127},[21,887,888,890,892,894,896,898,901,903,905,907],{"class":23,"line":79},[21,889,207],{"class":127},[21,891,211],{"class":210},[21,893,215],{"class":214},[21,895,218],{"class":127},[21,897,221],{"class":127},[21,899,900],{"class":72},"view_jokes\u002Fjokes.js",[21,902,221],{"class":127},[21,904,229],{"class":127},[21,906,211],{"class":210},[21,908,234],{"class":127},[29,910,911],{},"Now update the list of dependencies in the app.js file as",[11,913,915],{"className":240,"code":914,"language":242,"meta":16,"style":16},"\u002F\u002F Declare app level module which depends on views, and components\nangular.module('myApp', [\n  \u002F\u002F 'ngRoute',\n  'ui.router',\n  'myApp.jokes',\n  'myApp.view2',\n  'myApp.auth',\n  'myApp.version',\n]);\n",[18,916,917,922,942,946,956,966,976,986,996],{"__ignoreMap":16},[21,918,919],{"class":23,"line":24},[21,920,921],{"class":278},"\u002F\u002F Declare app level module which depends on views, and components\n",[21,923,924,926,928,930,932,934,936,938,940],{"class":23,"line":79},[21,925,250],{"class":249},[21,927,253],{"class":127},[21,929,256],{"class":82},[21,931,259],{"class":249},[21,933,262],{"class":127},[21,935,265],{"class":72},[21,937,262],{"class":127},[21,939,270],{"class":127},[21,941,273],{"class":249},[21,943,944],{"class":23,"line":282},[21,945,279],{"class":278},[21,947,948,950,952,954],{"class":23,"line":296},[21,949,285],{"class":127},[21,951,288],{"class":72},[21,953,262],{"class":127},[21,955,293],{"class":127},[21,957,958,960,962,964],{"class":23,"line":308},[21,959,285],{"class":127},[21,961,645],{"class":72},[21,963,262],{"class":127},[21,965,293],{"class":127},[21,967,968,970,972,974],{"class":23,"line":319},[21,969,285],{"class":127},[21,971,313],{"class":72},[21,973,262],{"class":127},[21,975,293],{"class":127},[21,977,978,980,982,984],{"class":23,"line":329},[21,979,285],{"class":127},[21,981,373],{"class":72},[21,983,262],{"class":127},[21,985,293],{"class":127},[21,987,988,990,992,994],{"class":23,"line":461},[21,989,285],{"class":127},[21,991,324],{"class":72},[21,993,262],{"class":127},[21,995,293],{"class":127},[21,997,998,1000],{"class":23,"line":479},[21,999,618],{"class":249},[21,1001,553],{"class":127},[29,1003,1004],{},"Now you can view these routes in the browser as.",[11,1006,1008],{"className":13,"code":1007,"language":15,"meta":16,"style":16},"http:\u002F\u002Flocalhost:8080\u002Fapp\u002F#\u002Fauth\n",[18,1009,1010],{"__ignoreMap":16},[21,1011,1012],{"class":23,"line":24},[21,1013,1007],{"class":27},[29,1015,1016],{},"and",[11,1018,1020],{"className":13,"code":1019,"language":15,"meta":16,"style":16},"http:\u002F\u002Flocalhost:8080\u002Fapp\u002F#\u002Fjokes\n",[18,1021,1022],{"__ignoreMap":16},[21,1023,1024],{"class":23,"line":24},[21,1025,1019],{"class":27},[44,1027,1029],{"id":1028},"client-side-auth","Client Side Auth",[29,1031,1032],{},"Open the view_auth\u002Fauth.html and add the following code.",[11,1034,1036],{"className":198,"code":1035,"language":200,"meta":16,"style":16},"\u003Cdiv class=\"container\">\n  \u003Cdiv class=\"row\">\n    \u003Cdiv class=\"col-md-4 col-md-offset-4\">\n      \u003Cdiv class=\"panel panel-default\">\n        \u003Cdiv class=\"panel-heading\">\u003Cstrong class=\"\">Login\u003C\u002Fstrong>\u003C\u002Fdiv>\n        \u003Cdiv class=\"panel-body\">\n          \u003Cform class=\"form-horizontal\" role=\"form\">\n            \u003Cdiv class=\"form-group\">\n              \u003Clabel for=\"inputEmail3\" class=\"col-sm-3 control-label\"\n                >Email\u003C\u002Flabel\n              >\n              \u003Cdiv class=\"col-sm-9\">\n                \u003Cinput\n                  type=\"email\"\n                  class=\"form-control\"\n                  id=\"inputEmail3\"\n                  placeholder=\"Email\"\n                  required=\"\"\n                  ng-model=\"auth.email\"\n                \u002F>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"form-group\">\n              \u003Clabel for=\"inputPassword3\" class=\"col-sm-3 control-label\"\n                >Password\u003C\u002Flabel\n              >\n              \u003Cdiv class=\"col-sm-9\">\n                \u003Cinput\n                  type=\"password\"\n                  class=\"form-control\"\n                  id=\"inputPassword3\"\n                  placeholder=\"Password\"\n                  required=\"\"\n                  ng-model=\"auth.password\"\n                \u002F>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"form-group last\">\n              \u003Cdiv class=\"col-sm-offset-3 col-sm-9\">\n                \u003Cbutton\n                  type=\"submit\"\n                  class=\"btn btn-success btn-sm\"\n                  ng-click=\"auth.login()\"\n                >\n                  Sign in\n                \u003C\u002Fbutton>\n                \u003Cbutton type=\"reset\" class=\"btn btn-default btn-sm\">\n                  Reset\n                \u003C\u002Fbutton>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n          \u003C\u002Fform>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[18,1037,1038,1059,1079,1099,1119,1167,1186,1218,1238,1269,1282,1287,1306,1314,1328,1342,1355,1368,1378,1392,1397,1407,1417,1436,1464,1476,1481,1500,1507,1521,1534,1547,1560,1569,1583,1588,1597,1606,1626,1646,1654,1668,1682,1697,1703,1709,1720,1752,1758,1767,1776,1785,1795,1805,1815,1825,1835],{"__ignoreMap":16},[21,1039,1040,1042,1045,1048,1050,1052,1055,1057],{"class":23,"line":24},[21,1041,207],{"class":127},[21,1043,1044],{"class":210},"div",[21,1046,1047],{"class":214}," class",[21,1049,218],{"class":127},[21,1051,221],{"class":127},[21,1053,1054],{"class":72},"container",[21,1056,221],{"class":127},[21,1058,234],{"class":127},[21,1060,1061,1064,1066,1068,1070,1072,1075,1077],{"class":23,"line":79},[21,1062,1063],{"class":127},"  \u003C",[21,1065,1044],{"class":210},[21,1067,1047],{"class":214},[21,1069,218],{"class":127},[21,1071,221],{"class":127},[21,1073,1074],{"class":72},"row",[21,1076,221],{"class":127},[21,1078,234],{"class":127},[21,1080,1081,1084,1086,1088,1090,1092,1095,1097],{"class":23,"line":282},[21,1082,1083],{"class":127},"    \u003C",[21,1085,1044],{"class":210},[21,1087,1047],{"class":214},[21,1089,218],{"class":127},[21,1091,221],{"class":127},[21,1093,1094],{"class":72},"col-md-4 col-md-offset-4",[21,1096,221],{"class":127},[21,1098,234],{"class":127},[21,1100,1101,1104,1106,1108,1110,1112,1115,1117],{"class":23,"line":296},[21,1102,1103],{"class":127},"      \u003C",[21,1105,1044],{"class":210},[21,1107,1047],{"class":214},[21,1109,218],{"class":127},[21,1111,221],{"class":127},[21,1113,1114],{"class":72},"panel panel-default",[21,1116,221],{"class":127},[21,1118,234],{"class":127},[21,1120,1121,1124,1126,1128,1130,1132,1135,1137,1140,1143,1145,1147,1150,1153,1156,1159,1161,1163,1165],{"class":23,"line":308},[21,1122,1123],{"class":127},"        \u003C",[21,1125,1044],{"class":210},[21,1127,1047],{"class":214},[21,1129,218],{"class":127},[21,1131,221],{"class":127},[21,1133,1134],{"class":72},"panel-heading",[21,1136,221],{"class":127},[21,1138,1139],{"class":127},">\u003C",[21,1141,1142],{"class":210},"strong",[21,1144,1047],{"class":214},[21,1146,218],{"class":127},[21,1148,1149],{"class":127},"\"\"",[21,1151,1152],{"class":127},">",[21,1154,1155],{"class":249},"Login",[21,1157,1158],{"class":127},"\u003C\u002F",[21,1160,1142],{"class":210},[21,1162,229],{"class":127},[21,1164,1044],{"class":210},[21,1166,234],{"class":127},[21,1168,1169,1171,1173,1175,1177,1179,1182,1184],{"class":23,"line":319},[21,1170,1123],{"class":127},[21,1172,1044],{"class":210},[21,1174,1047],{"class":214},[21,1176,218],{"class":127},[21,1178,221],{"class":127},[21,1180,1181],{"class":72},"panel-body",[21,1183,221],{"class":127},[21,1185,234],{"class":127},[21,1187,1188,1191,1194,1196,1198,1200,1203,1205,1208,1210,1212,1214,1216],{"class":23,"line":329},[21,1189,1190],{"class":127},"          \u003C",[21,1192,1193],{"class":210},"form",[21,1195,1047],{"class":214},[21,1197,218],{"class":127},[21,1199,221],{"class":127},[21,1201,1202],{"class":72},"form-horizontal",[21,1204,221],{"class":127},[21,1206,1207],{"class":214}," role",[21,1209,218],{"class":127},[21,1211,221],{"class":127},[21,1213,1193],{"class":72},[21,1215,221],{"class":127},[21,1217,234],{"class":127},[21,1219,1220,1223,1225,1227,1229,1231,1234,1236],{"class":23,"line":461},[21,1221,1222],{"class":127},"            \u003C",[21,1224,1044],{"class":210},[21,1226,1047],{"class":214},[21,1228,218],{"class":127},[21,1230,221],{"class":127},[21,1232,1233],{"class":72},"form-group",[21,1235,221],{"class":127},[21,1237,234],{"class":127},[21,1239,1240,1243,1246,1249,1251,1253,1256,1258,1260,1262,1264,1267],{"class":23,"line":479},[21,1241,1242],{"class":127},"              \u003C",[21,1244,1245],{"class":210},"label",[21,1247,1248],{"class":214}," for",[21,1250,218],{"class":127},[21,1252,221],{"class":127},[21,1254,1255],{"class":72},"inputEmail3",[21,1257,221],{"class":127},[21,1259,1047],{"class":214},[21,1261,218],{"class":127},[21,1263,221],{"class":127},[21,1265,1266],{"class":72},"col-sm-3 control-label",[21,1268,134],{"class":127},[21,1270,1271,1274,1277,1279],{"class":23,"line":489},[21,1272,1273],{"class":127},"                >",[21,1275,1276],{"class":249},"Email",[21,1278,1158],{"class":127},[21,1280,1281],{"class":210},"label\n",[21,1283,1284],{"class":23,"line":499},[21,1285,1286],{"class":127},"              >\n",[21,1288,1289,1291,1293,1295,1297,1299,1302,1304],{"class":23,"line":516},[21,1290,1242],{"class":127},[21,1292,1044],{"class":210},[21,1294,1047],{"class":214},[21,1296,218],{"class":127},[21,1298,221],{"class":127},[21,1300,1301],{"class":72},"col-sm-9",[21,1303,221],{"class":127},[21,1305,234],{"class":127},[21,1307,1308,1311],{"class":23,"line":533},[21,1309,1310],{"class":127},"                \u003C",[21,1312,1313],{"class":210},"input\n",[21,1315,1316,1319,1321,1323,1326],{"class":23,"line":539},[21,1317,1318],{"class":214},"                  type",[21,1320,218],{"class":127},[21,1322,221],{"class":127},[21,1324,1325],{"class":72},"email",[21,1327,134],{"class":127},[21,1329,1330,1333,1335,1337,1340],{"class":23,"line":545},[21,1331,1332],{"class":214},"                  class",[21,1334,218],{"class":127},[21,1336,221],{"class":127},[21,1338,1339],{"class":72},"form-control",[21,1341,134],{"class":127},[21,1343,1344,1347,1349,1351,1353],{"class":23,"line":556},[21,1345,1346],{"class":214},"                  id",[21,1348,218],{"class":127},[21,1350,221],{"class":127},[21,1352,1255],{"class":72},[21,1354,134],{"class":127},[21,1356,1357,1360,1362,1364,1366],{"class":23,"line":562},[21,1358,1359],{"class":214},"                  placeholder",[21,1361,218],{"class":127},[21,1363,221],{"class":127},[21,1365,1276],{"class":72},[21,1367,134],{"class":127},[21,1369,1370,1373,1375],{"class":23,"line":568},[21,1371,1372],{"class":214},"                  required",[21,1374,218],{"class":127},[21,1376,1377],{"class":127},"\"\"\n",[21,1379,1380,1383,1385,1387,1390],{"class":23,"line":575},[21,1381,1382],{"class":214},"                  ng-model",[21,1384,218],{"class":127},[21,1386,221],{"class":127},[21,1388,1389],{"class":72},"auth.email",[21,1391,134],{"class":127},[21,1393,1394],{"class":23,"line":812},[21,1395,1396],{"class":127},"                \u002F>\n",[21,1398,1400,1403,1405],{"class":23,"line":1399},21,[21,1401,1402],{"class":127},"              \u003C\u002F",[21,1404,1044],{"class":210},[21,1406,234],{"class":127},[21,1408,1410,1413,1415],{"class":23,"line":1409},22,[21,1411,1412],{"class":127},"            \u003C\u002F",[21,1414,1044],{"class":210},[21,1416,234],{"class":127},[21,1418,1420,1422,1424,1426,1428,1430,1432,1434],{"class":23,"line":1419},23,[21,1421,1222],{"class":127},[21,1423,1044],{"class":210},[21,1425,1047],{"class":214},[21,1427,218],{"class":127},[21,1429,221],{"class":127},[21,1431,1233],{"class":72},[21,1433,221],{"class":127},[21,1435,234],{"class":127},[21,1437,1439,1441,1443,1445,1447,1449,1452,1454,1456,1458,1460,1462],{"class":23,"line":1438},24,[21,1440,1242],{"class":127},[21,1442,1245],{"class":210},[21,1444,1248],{"class":214},[21,1446,218],{"class":127},[21,1448,221],{"class":127},[21,1450,1451],{"class":72},"inputPassword3",[21,1453,221],{"class":127},[21,1455,1047],{"class":214},[21,1457,218],{"class":127},[21,1459,221],{"class":127},[21,1461,1266],{"class":72},[21,1463,134],{"class":127},[21,1465,1467,1469,1472,1474],{"class":23,"line":1466},25,[21,1468,1273],{"class":127},[21,1470,1471],{"class":249},"Password",[21,1473,1158],{"class":127},[21,1475,1281],{"class":210},[21,1477,1479],{"class":23,"line":1478},26,[21,1480,1286],{"class":127},[21,1482,1484,1486,1488,1490,1492,1494,1496,1498],{"class":23,"line":1483},27,[21,1485,1242],{"class":127},[21,1487,1044],{"class":210},[21,1489,1047],{"class":214},[21,1491,218],{"class":127},[21,1493,221],{"class":127},[21,1495,1301],{"class":72},[21,1497,221],{"class":127},[21,1499,234],{"class":127},[21,1501,1503,1505],{"class":23,"line":1502},28,[21,1504,1310],{"class":127},[21,1506,1313],{"class":210},[21,1508,1510,1512,1514,1516,1519],{"class":23,"line":1509},29,[21,1511,1318],{"class":214},[21,1513,218],{"class":127},[21,1515,221],{"class":127},[21,1517,1518],{"class":72},"password",[21,1520,134],{"class":127},[21,1522,1524,1526,1528,1530,1532],{"class":23,"line":1523},30,[21,1525,1332],{"class":214},[21,1527,218],{"class":127},[21,1529,221],{"class":127},[21,1531,1339],{"class":72},[21,1533,134],{"class":127},[21,1535,1537,1539,1541,1543,1545],{"class":23,"line":1536},31,[21,1538,1346],{"class":214},[21,1540,218],{"class":127},[21,1542,221],{"class":127},[21,1544,1451],{"class":72},[21,1546,134],{"class":127},[21,1548,1550,1552,1554,1556,1558],{"class":23,"line":1549},32,[21,1551,1359],{"class":214},[21,1553,218],{"class":127},[21,1555,221],{"class":127},[21,1557,1471],{"class":72},[21,1559,134],{"class":127},[21,1561,1563,1565,1567],{"class":23,"line":1562},33,[21,1564,1372],{"class":214},[21,1566,218],{"class":127},[21,1568,1377],{"class":127},[21,1570,1572,1574,1576,1578,1581],{"class":23,"line":1571},34,[21,1573,1382],{"class":214},[21,1575,218],{"class":127},[21,1577,221],{"class":127},[21,1579,1580],{"class":72},"auth.password",[21,1582,134],{"class":127},[21,1584,1586],{"class":23,"line":1585},35,[21,1587,1396],{"class":127},[21,1589,1591,1593,1595],{"class":23,"line":1590},36,[21,1592,1402],{"class":127},[21,1594,1044],{"class":210},[21,1596,234],{"class":127},[21,1598,1600,1602,1604],{"class":23,"line":1599},37,[21,1601,1412],{"class":127},[21,1603,1044],{"class":210},[21,1605,234],{"class":127},[21,1607,1609,1611,1613,1615,1617,1619,1622,1624],{"class":23,"line":1608},38,[21,1610,1222],{"class":127},[21,1612,1044],{"class":210},[21,1614,1047],{"class":214},[21,1616,218],{"class":127},[21,1618,221],{"class":127},[21,1620,1621],{"class":72},"form-group last",[21,1623,221],{"class":127},[21,1625,234],{"class":127},[21,1627,1629,1631,1633,1635,1637,1639,1642,1644],{"class":23,"line":1628},39,[21,1630,1242],{"class":127},[21,1632,1044],{"class":210},[21,1634,1047],{"class":214},[21,1636,218],{"class":127},[21,1638,221],{"class":127},[21,1640,1641],{"class":72},"col-sm-offset-3 col-sm-9",[21,1643,221],{"class":127},[21,1645,234],{"class":127},[21,1647,1649,1651],{"class":23,"line":1648},40,[21,1650,1310],{"class":127},[21,1652,1653],{"class":210},"button\n",[21,1655,1657,1659,1661,1663,1666],{"class":23,"line":1656},41,[21,1658,1318],{"class":214},[21,1660,218],{"class":127},[21,1662,221],{"class":127},[21,1664,1665],{"class":72},"submit",[21,1667,134],{"class":127},[21,1669,1671,1673,1675,1677,1680],{"class":23,"line":1670},42,[21,1672,1332],{"class":214},[21,1674,218],{"class":127},[21,1676,221],{"class":127},[21,1678,1679],{"class":72},"btn btn-success btn-sm",[21,1681,134],{"class":127},[21,1683,1685,1688,1690,1692,1695],{"class":23,"line":1684},43,[21,1686,1687],{"class":214},"                  ng-click",[21,1689,218],{"class":127},[21,1691,221],{"class":127},[21,1693,1694],{"class":72},"auth.login()",[21,1696,134],{"class":127},[21,1698,1700],{"class":23,"line":1699},44,[21,1701,1702],{"class":127},"                >\n",[21,1704,1706],{"class":23,"line":1705},45,[21,1707,1708],{"class":249},"                  Sign in\n",[21,1710,1712,1715,1718],{"class":23,"line":1711},46,[21,1713,1714],{"class":127},"                \u003C\u002F",[21,1716,1717],{"class":210},"button",[21,1719,234],{"class":127},[21,1721,1723,1725,1727,1730,1732,1734,1737,1739,1741,1743,1745,1748,1750],{"class":23,"line":1722},47,[21,1724,1310],{"class":127},[21,1726,1717],{"class":210},[21,1728,1729],{"class":214}," type",[21,1731,218],{"class":127},[21,1733,221],{"class":127},[21,1735,1736],{"class":72},"reset",[21,1738,221],{"class":127},[21,1740,1047],{"class":214},[21,1742,218],{"class":127},[21,1744,221],{"class":127},[21,1746,1747],{"class":72},"btn btn-default btn-sm",[21,1749,221],{"class":127},[21,1751,234],{"class":127},[21,1753,1755],{"class":23,"line":1754},48,[21,1756,1757],{"class":249},"                  Reset\n",[21,1759,1761,1763,1765],{"class":23,"line":1760},49,[21,1762,1714],{"class":127},[21,1764,1717],{"class":210},[21,1766,234],{"class":127},[21,1768,1770,1772,1774],{"class":23,"line":1769},50,[21,1771,1402],{"class":127},[21,1773,1044],{"class":210},[21,1775,234],{"class":127},[21,1777,1779,1781,1783],{"class":23,"line":1778},51,[21,1780,1412],{"class":127},[21,1782,1044],{"class":210},[21,1784,234],{"class":127},[21,1786,1788,1791,1793],{"class":23,"line":1787},52,[21,1789,1790],{"class":127},"          \u003C\u002F",[21,1792,1193],{"class":210},[21,1794,234],{"class":127},[21,1796,1798,1801,1803],{"class":23,"line":1797},53,[21,1799,1800],{"class":127},"        \u003C\u002F",[21,1802,1044],{"class":210},[21,1804,234],{"class":127},[21,1806,1808,1811,1813],{"class":23,"line":1807},54,[21,1809,1810],{"class":127},"      \u003C\u002F",[21,1812,1044],{"class":210},[21,1814,234],{"class":127},[21,1816,1818,1821,1823],{"class":23,"line":1817},55,[21,1819,1820],{"class":127},"    \u003C\u002F",[21,1822,1044],{"class":210},[21,1824,234],{"class":127},[21,1826,1828,1831,1833],{"class":23,"line":1827},56,[21,1829,1830],{"class":127},"  \u003C\u002F",[21,1832,1044],{"class":210},[21,1834,234],{"class":127},[21,1836,1838,1840,1842],{"class":23,"line":1837},57,[21,1839,1158],{"class":127},[21,1841,1044],{"class":210},[21,1843,234],{"class":127},[29,1845,1846],{},"The output will look similar to this.",[29,1848,1849],{},[343,1850],{"alt":345,"src":1851},"\u002Fimg\u002F2015-11-13_22-24-06.png",[29,1853,1854,1855,1860],{},"Using Satellizer\nNow for client side authentication, we will use a token based authentication moude for angular called ",[33,1856,1859],{"href":1857,"rel":1858},"https:\u002F\u002Fgithub.com\u002Fsahat\u002Fsatellizer",[37],"satellizer",", let’s first start by including satellizer to our project by running,",[11,1862,1864],{"className":13,"code":1863,"language":15,"meta":16,"style":16},"bower install satellizer --save\n",[18,1865,1866],{"__ignoreMap":16},[21,1867,1868,1870,1872,1875],{"class":23,"line":24},[21,1869,183],{"class":27},[21,1871,186],{"class":72},[21,1873,1874],{"class":72}," satellizer",[21,1876,192],{"class":72},[29,1878,1879],{},"Add satellizer to list of dependencies in the app.js,",[11,1881,1883],{"className":240,"code":1882,"language":242,"meta":16,"style":16},"angular.module('myApp', [\n  \u002F\u002F 'ngRoute',\n  'ui.router',\n  'myApp.jokes',\n  'myApp.view2',\n  'myApp.auth',\n  'myApp.version',\n  'satellizer',\n]);\n",[18,1884,1885,1905,1909,1919,1929,1939,1949,1959,1969],{"__ignoreMap":16},[21,1886,1887,1889,1891,1893,1895,1897,1899,1901,1903],{"class":23,"line":24},[21,1888,250],{"class":249},[21,1890,253],{"class":127},[21,1892,256],{"class":82},[21,1894,259],{"class":249},[21,1896,262],{"class":127},[21,1898,265],{"class":72},[21,1900,262],{"class":127},[21,1902,270],{"class":127},[21,1904,273],{"class":249},[21,1906,1907],{"class":23,"line":79},[21,1908,279],{"class":278},[21,1910,1911,1913,1915,1917],{"class":23,"line":282},[21,1912,285],{"class":127},[21,1914,288],{"class":72},[21,1916,262],{"class":127},[21,1918,293],{"class":127},[21,1920,1921,1923,1925,1927],{"class":23,"line":296},[21,1922,285],{"class":127},[21,1924,645],{"class":72},[21,1926,262],{"class":127},[21,1928,293],{"class":127},[21,1930,1931,1933,1935,1937],{"class":23,"line":308},[21,1932,285],{"class":127},[21,1934,313],{"class":72},[21,1936,262],{"class":127},[21,1938,293],{"class":127},[21,1940,1941,1943,1945,1947],{"class":23,"line":319},[21,1942,285],{"class":127},[21,1944,373],{"class":72},[21,1946,262],{"class":127},[21,1948,293],{"class":127},[21,1950,1951,1953,1955,1957],{"class":23,"line":329},[21,1952,285],{"class":127},[21,1954,324],{"class":72},[21,1956,262],{"class":127},[21,1958,293],{"class":127},[21,1960,1961,1963,1965,1967],{"class":23,"line":461},[21,1962,285],{"class":127},[21,1964,1859],{"class":72},[21,1966,262],{"class":127},[21,1968,293],{"class":127},[21,1970,1971,1973],{"class":23,"line":479},[21,1972,618],{"class":249},[21,1974,553],{"class":127},[29,1976,1977],{},"Now add the login end point in the app.js from the api by updating the config block,",[11,1979,1981],{"className":240,"code":1980,"language":242,"meta":16,"style":16},".config(['$stateProvider', '$urlRouterProvider', '$authProvider', function($stateProvider, $urlRouterProvider, $authProvider) {\n\n    $authProvider.loginUrl = 'http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fauthenticate';\n  \u002F\u002F $urlRouterProvider.otherwise('\u002Fview1');\n  $urlRouterProvider.otherwise('\u002Fauth');\n}]);\n",[18,1982,1983,2036,2040,2062,2067,2089],{"__ignoreMap":16},[21,1984,1985,1987,1989,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2013,2015,2017,2019,2021,2023,2025,2027,2029,2032,2034],{"class":23,"line":24},[21,1986,253],{"class":127},[21,1988,387],{"class":82},[21,1990,1991],{"class":249},"([",[21,1993,262],{"class":127},[21,1995,398],{"class":72},[21,1997,262],{"class":127},[21,1999,270],{"class":127},[21,2001,469],{"class":127},[21,2003,409],{"class":72},[21,2005,262],{"class":127},[21,2007,270],{"class":127},[21,2009,469],{"class":127},[21,2011,2012],{"class":72},"$authProvider",[21,2014,262],{"class":127},[21,2016,270],{"class":127},[21,2018,606],{"class":214},[21,2020,259],{"class":127},[21,2022,398],{"class":424},[21,2024,270],{"class":127},[21,2026,429],{"class":424},[21,2028,270],{"class":127},[21,2030,2031],{"class":424}," $authProvider",[21,2033,432],{"class":127},[21,2035,435],{"class":127},[21,2037,2038],{"class":23,"line":79},[21,2039,572],{"emptyLinePlaceholder":571},[21,2041,2042,2045,2047,2050,2053,2055,2058,2060],{"class":23,"line":282},[21,2043,2044],{"class":249},"    $authProvider",[21,2046,253],{"class":127},[21,2048,2049],{"class":249},"loginUrl",[21,2051,2052],{"class":127}," =",[21,2054,469],{"class":127},[21,2056,2057],{"class":72},"http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fauthenticate",[21,2059,262],{"class":127},[21,2061,553],{"class":127},[21,2063,2064],{"class":23,"line":296},[21,2065,2066],{"class":278},"  \u002F\u002F $urlRouterProvider.otherwise('\u002Fview1');\n",[21,2068,2069,2072,2074,2077,2079,2081,2083,2085,2087],{"class":23,"line":308},[21,2070,2071],{"class":249},"  $urlRouterProvider",[21,2073,253],{"class":127},[21,2075,2076],{"class":82},"otherwise",[21,2078,259],{"class":210},[21,2080,262],{"class":127},[21,2082,472],{"class":72},[21,2084,262],{"class":127},[21,2086,432],{"class":210},[21,2088,553],{"class":127},[21,2090,2091,2094,2096],{"class":23,"line":319},[21,2092,2093],{"class":127},"}",[21,2095,618],{"class":249},[21,2097,553],{"class":127},[29,2099,2100],{},"Satellizer gives us access to the $authProvider, which we used to specify the login url. The benefit of Satellizer is that when the user is logged in, a token is saved to the local storage. We know that to make request to our laravel api we need token every time, Satellizer makes sure to send the token with each request. So we don’t have to send the token manually.",[29,2102,2103],{},"Now open the view_auth\u002Fauth.js and update the controller code as follows:",[11,2105,2107],{"className":240,"code":2106,"language":242,"meta":16,"style":16},".controller('AuthCtrl', ['$auth', '$state', '$http', '$rootScope', function($auth, $state, $http, $rootScope) {\n\n      var vm = this;\n\n        vm.loginError = false;\n        vm.loginErrorText;\n\n        vm.login = function() {\n\n            var credentials = {\n                email: vm.email,\n                password: vm.password\n            }\n\n            $auth.login(credentials).then(function() {\n                $http.get('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fauthenticate\u002Fuser').success(function(response){\n                    var user = JSON.stringify(response.user);\n                    localStorage.setItem('user', user);\n                    $rootScope.currentUser = response.user;\n                    $state.go('jokes');\n                })\n                .error(function(){\n                    vm.loginError = true;\n                    vm.loginErrorText = error.data.error;\n                    console.log(vm.loginErrorText);\n                })\n            });\n        }\n\n}]);\n",[18,2108,2109,2187,2191,2204,2208,2226,2237,2241,2259,2263,2275,2290,2304,2309,2313,2343,2381,2412,2438,2459,2481,2489,2504,2520,2544,2567,2573,2582,2587,2591],{"__ignoreMap":16},[21,2110,2111,2113,2115,2117,2119,2121,2123,2125,2127,2129,2132,2134,2136,2138,2141,2143,2145,2147,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2173,2175,2178,2180,2183,2185],{"class":23,"line":24},[21,2112,253],{"class":127},[21,2114,580],{"class":82},[21,2116,259],{"class":249},[21,2118,262],{"class":127},[21,2120,587],{"class":72},[21,2122,262],{"class":127},[21,2124,270],{"class":127},[21,2126,594],{"class":249},[21,2128,262],{"class":127},[21,2130,2131],{"class":72},"$auth",[21,2133,262],{"class":127},[21,2135,270],{"class":127},[21,2137,469],{"class":127},[21,2139,2140],{"class":72},"$state",[21,2142,262],{"class":127},[21,2144,270],{"class":127},[21,2146,469],{"class":127},[21,2148,2149],{"class":72},"$http",[21,2151,262],{"class":127},[21,2153,270],{"class":127},[21,2155,469],{"class":127},[21,2157,599],{"class":72},[21,2159,262],{"class":127},[21,2161,270],{"class":127},[21,2163,606],{"class":214},[21,2165,259],{"class":127},[21,2167,2131],{"class":424},[21,2169,270],{"class":127},[21,2171,2172],{"class":424}," $state",[21,2174,270],{"class":127},[21,2176,2177],{"class":424}," $http",[21,2179,270],{"class":127},[21,2181,2182],{"class":424}," $rootScope",[21,2184,432],{"class":127},[21,2186,435],{"class":127},[21,2188,2189],{"class":23,"line":79},[21,2190,572],{"emptyLinePlaceholder":571},[21,2192,2193,2196,2199,2201],{"class":23,"line":282},[21,2194,2195],{"class":214},"      var",[21,2197,2198],{"class":249}," vm",[21,2200,2052],{"class":127},[21,2202,2203],{"class":127}," this;\n",[21,2205,2206],{"class":23,"line":296},[21,2207,572],{"emptyLinePlaceholder":571},[21,2209,2210,2213,2215,2218,2220,2224],{"class":23,"line":308},[21,2211,2212],{"class":249},"        vm",[21,2214,253],{"class":127},[21,2216,2217],{"class":249},"loginError",[21,2219,2052],{"class":127},[21,2221,2223],{"class":2222},"sfNiH"," false",[21,2225,553],{"class":127},[21,2227,2228,2230,2232,2235],{"class":23,"line":319},[21,2229,2212],{"class":249},[21,2231,253],{"class":127},[21,2233,2234],{"class":249},"loginErrorText",[21,2236,553],{"class":127},[21,2238,2239],{"class":23,"line":329},[21,2240,572],{"emptyLinePlaceholder":571},[21,2242,2243,2245,2247,2250,2252,2254,2257],{"class":23,"line":461},[21,2244,2212],{"class":249},[21,2246,253],{"class":127},[21,2248,2249],{"class":82},"login",[21,2251,2052],{"class":127},[21,2253,606],{"class":214},[21,2255,2256],{"class":127},"()",[21,2258,435],{"class":127},[21,2260,2261],{"class":23,"line":479},[21,2262,572],{"emptyLinePlaceholder":571},[21,2264,2265,2268,2271,2273],{"class":23,"line":489},[21,2266,2267],{"class":214},"            var",[21,2269,2270],{"class":249}," credentials",[21,2272,2052],{"class":127},[21,2274,435],{"class":127},[21,2276,2277,2280,2282,2284,2286,2288],{"class":23,"line":499},[21,2278,2279],{"class":210},"                email",[21,2281,124],{"class":127},[21,2283,2198],{"class":249},[21,2285,253],{"class":127},[21,2287,1325],{"class":249},[21,2289,293],{"class":127},[21,2291,2292,2295,2297,2299,2301],{"class":23,"line":516},[21,2293,2294],{"class":210},"                password",[21,2296,124],{"class":127},[21,2298,2198],{"class":249},[21,2300,253],{"class":127},[21,2302,2303],{"class":249},"password\n",[21,2305,2306],{"class":23,"line":533},[21,2307,2308],{"class":127},"            }\n",[21,2310,2311],{"class":23,"line":539},[21,2312,572],{"emptyLinePlaceholder":571},[21,2314,2315,2318,2320,2322,2324,2327,2329,2331,2334,2336,2339,2341],{"class":23,"line":545},[21,2316,2317],{"class":249},"            $auth",[21,2319,253],{"class":127},[21,2321,2249],{"class":82},[21,2323,259],{"class":210},[21,2325,2326],{"class":249},"credentials",[21,2328,432],{"class":210},[21,2330,253],{"class":127},[21,2332,2333],{"class":82},"then",[21,2335,259],{"class":210},[21,2337,2338],{"class":214},"function",[21,2340,2256],{"class":127},[21,2342,435],{"class":127},[21,2344,2345,2348,2350,2353,2355,2357,2360,2362,2364,2366,2369,2371,2373,2375,2378],{"class":23,"line":556},[21,2346,2347],{"class":249},"                $http",[21,2349,253],{"class":127},[21,2351,2352],{"class":82},"get",[21,2354,259],{"class":210},[21,2356,262],{"class":127},[21,2358,2359],{"class":72},"http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fauthenticate\u002Fuser",[21,2361,262],{"class":127},[21,2363,432],{"class":210},[21,2365,253],{"class":127},[21,2367,2368],{"class":82},"success",[21,2370,259],{"class":210},[21,2372,2338],{"class":214},[21,2374,259],{"class":127},[21,2376,2377],{"class":424},"response",[21,2379,2380],{"class":127},"){\n",[21,2382,2383,2386,2389,2391,2394,2396,2399,2401,2403,2405,2408,2410],{"class":23,"line":562},[21,2384,2385],{"class":214},"                    var",[21,2387,2388],{"class":249}," user",[21,2390,2052],{"class":127},[21,2392,2393],{"class":249}," JSON",[21,2395,253],{"class":127},[21,2397,2398],{"class":82},"stringify",[21,2400,259],{"class":210},[21,2402,2377],{"class":249},[21,2404,253],{"class":127},[21,2406,2407],{"class":249},"user",[21,2409,432],{"class":210},[21,2411,553],{"class":127},[21,2413,2414,2417,2419,2422,2424,2426,2428,2430,2432,2434,2436],{"class":23,"line":568},[21,2415,2416],{"class":249},"                    localStorage",[21,2418,253],{"class":127},[21,2420,2421],{"class":82},"setItem",[21,2423,259],{"class":210},[21,2425,262],{"class":127},[21,2427,2407],{"class":72},[21,2429,262],{"class":127},[21,2431,270],{"class":127},[21,2433,2388],{"class":249},[21,2435,432],{"class":210},[21,2437,553],{"class":127},[21,2439,2440,2443,2445,2448,2450,2453,2455,2457],{"class":23,"line":575},[21,2441,2442],{"class":249},"                    $rootScope",[21,2444,253],{"class":127},[21,2446,2447],{"class":249},"currentUser",[21,2449,2052],{"class":127},[21,2451,2452],{"class":249}," response",[21,2454,253],{"class":127},[21,2456,2407],{"class":249},[21,2458,553],{"class":127},[21,2460,2461,2464,2466,2469,2471,2473,2475,2477,2479],{"class":23,"line":812},[21,2462,2463],{"class":249},"                    $state",[21,2465,253],{"class":127},[21,2467,2468],{"class":82},"go",[21,2470,259],{"class":210},[21,2472,262],{"class":127},[21,2474,714],{"class":72},[21,2476,262],{"class":127},[21,2478,432],{"class":210},[21,2480,553],{"class":127},[21,2482,2483,2486],{"class":23,"line":1399},[21,2484,2485],{"class":127},"                }",[21,2487,2488],{"class":210},")\n",[21,2490,2491,2494,2497,2499,2501],{"class":23,"line":1409},[21,2492,2493],{"class":127},"                .",[21,2495,2496],{"class":82},"error",[21,2498,259],{"class":210},[21,2500,2338],{"class":214},[21,2502,2503],{"class":127},"(){\n",[21,2505,2506,2509,2511,2513,2515,2518],{"class":23,"line":1419},[21,2507,2508],{"class":249},"                    vm",[21,2510,253],{"class":127},[21,2512,2217],{"class":249},[21,2514,2052],{"class":127},[21,2516,2517],{"class":2222}," true",[21,2519,553],{"class":127},[21,2521,2522,2524,2526,2528,2530,2533,2535,2538,2540,2542],{"class":23,"line":1438},[21,2523,2508],{"class":249},[21,2525,253],{"class":127},[21,2527,2234],{"class":249},[21,2529,2052],{"class":127},[21,2531,2532],{"class":249}," error",[21,2534,253],{"class":127},[21,2536,2537],{"class":249},"data",[21,2539,253],{"class":127},[21,2541,2496],{"class":249},[21,2543,553],{"class":127},[21,2545,2546,2549,2551,2554,2556,2559,2561,2563,2565],{"class":23,"line":1466},[21,2547,2548],{"class":249},"                    console",[21,2550,253],{"class":127},[21,2552,2553],{"class":82},"log",[21,2555,259],{"class":210},[21,2557,2558],{"class":249},"vm",[21,2560,253],{"class":127},[21,2562,2234],{"class":249},[21,2564,432],{"class":210},[21,2566,553],{"class":127},[21,2568,2569,2571],{"class":23,"line":1478},[21,2570,2485],{"class":127},[21,2572,2488],{"class":210},[21,2574,2575,2578,2580],{"class":23,"line":1483},[21,2576,2577],{"class":127},"            }",[21,2579,432],{"class":210},[21,2581,553],{"class":127},[21,2583,2584],{"class":23,"line":1502},[21,2585,2586],{"class":127},"        }\n",[21,2588,2589],{"class":23,"line":1509},[21,2590,572],{"emptyLinePlaceholder":571},[21,2592,2593,2595,2597],{"class":23,"line":1523},[21,2594,2093],{"class":127},[21,2596,618],{"class":249},[21,2598,553],{"class":127},[29,2600,2601],{},"Now after starting the laravel server, hit the auth route and enter the correct credentials and hit submit. If everything works, you will be redirected to the jokes route and you will see following items added to the local storage.",[29,2603,2604],{},[343,2605],{"alt":345,"src":2606},"\u002Fimg\u002F2015-11-13_22-39-14.png",[29,2608,2609],{},"This satellizer_token will be sent with the each request that we will make from the client side from now on.",[44,2611,2613],{"id":2612},"get-all-jokes","GET all Jokes",[29,2615,2616],{},"Open view_jokes\u002Fjokes.html and update the code as follows,",[11,2618,2620],{"className":198,"code":2619,"language":200,"meta":16,"style":16},"\u003Cdiv class=\"col-sm-6 col-sm-offset-3\">\n  \u003Cdiv>\n    \u003Cul class=\"list-group\">\n      \u003Cli class=\"list-group-item\" ng-repeat=\"joke in jokes.jokes\">\n        \u003Ch5>{{joke.joke}}\u003C\u002Fh5>\n        \u003Ch5>{{joke.submitted_by}}\u003C\u002Fh5>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n    \u003Cdiv class=\"alert alert-danger\" ng-if=\"jokes.error\">\n      \u003Cstrong>There was an error: \u003C\u002Fstrong> {{jokes.error}} \u003Cbr \u002F>Please go back\n      and login again...\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[18,2621,2622,2641,2649,2669,2701,2719,2736,2744,2752,2783,2814,2819,2827,2835],{"__ignoreMap":16},[21,2623,2624,2626,2628,2630,2632,2634,2637,2639],{"class":23,"line":24},[21,2625,207],{"class":127},[21,2627,1044],{"class":210},[21,2629,1047],{"class":214},[21,2631,218],{"class":127},[21,2633,221],{"class":127},[21,2635,2636],{"class":72},"col-sm-6 col-sm-offset-3",[21,2638,221],{"class":127},[21,2640,234],{"class":127},[21,2642,2643,2645,2647],{"class":23,"line":79},[21,2644,1063],{"class":127},[21,2646,1044],{"class":210},[21,2648,234],{"class":127},[21,2650,2651,2653,2656,2658,2660,2662,2665,2667],{"class":23,"line":282},[21,2652,1083],{"class":127},[21,2654,2655],{"class":210},"ul",[21,2657,1047],{"class":214},[21,2659,218],{"class":127},[21,2661,221],{"class":127},[21,2663,2664],{"class":72},"list-group",[21,2666,221],{"class":127},[21,2668,234],{"class":127},[21,2670,2671,2673,2676,2678,2680,2682,2685,2687,2690,2692,2694,2697,2699],{"class":23,"line":296},[21,2672,1103],{"class":127},[21,2674,2675],{"class":210},"li",[21,2677,1047],{"class":214},[21,2679,218],{"class":127},[21,2681,221],{"class":127},[21,2683,2684],{"class":72},"list-group-item",[21,2686,221],{"class":127},[21,2688,2689],{"class":214}," ng-repeat",[21,2691,218],{"class":127},[21,2693,221],{"class":127},[21,2695,2696],{"class":72},"joke in jokes.jokes",[21,2698,221],{"class":127},[21,2700,234],{"class":127},[21,2702,2703,2705,2708,2710,2713,2715,2717],{"class":23,"line":308},[21,2704,1123],{"class":127},[21,2706,2707],{"class":210},"h5",[21,2709,1152],{"class":127},[21,2711,2712],{"class":249},"{{joke.joke}}",[21,2714,1158],{"class":127},[21,2716,2707],{"class":210},[21,2718,234],{"class":127},[21,2720,2721,2723,2725,2727,2730,2732,2734],{"class":23,"line":319},[21,2722,1123],{"class":127},[21,2724,2707],{"class":210},[21,2726,1152],{"class":127},[21,2728,2729],{"class":249},"{{joke.submitted_by}}",[21,2731,1158],{"class":127},[21,2733,2707],{"class":210},[21,2735,234],{"class":127},[21,2737,2738,2740,2742],{"class":23,"line":329},[21,2739,1810],{"class":127},[21,2741,2675],{"class":210},[21,2743,234],{"class":127},[21,2745,2746,2748,2750],{"class":23,"line":461},[21,2747,1820],{"class":127},[21,2749,2655],{"class":210},[21,2751,234],{"class":127},[21,2753,2754,2756,2758,2760,2762,2764,2767,2769,2772,2774,2776,2779,2781],{"class":23,"line":479},[21,2755,1083],{"class":127},[21,2757,1044],{"class":210},[21,2759,1047],{"class":214},[21,2761,218],{"class":127},[21,2763,221],{"class":127},[21,2765,2766],{"class":72},"alert alert-danger",[21,2768,221],{"class":127},[21,2770,2771],{"class":214}," ng-if",[21,2773,218],{"class":127},[21,2775,221],{"class":127},[21,2777,2778],{"class":72},"jokes.error",[21,2780,221],{"class":127},[21,2782,234],{"class":127},[21,2784,2785,2787,2789,2791,2794,2796,2798,2800,2803,2805,2808,2811],{"class":23,"line":489},[21,2786,1103],{"class":127},[21,2788,1142],{"class":210},[21,2790,1152],{"class":127},[21,2792,2793],{"class":249},"There was an error: ",[21,2795,1158],{"class":127},[21,2797,1142],{"class":210},[21,2799,1152],{"class":127},[21,2801,2802],{"class":249}," {{jokes.error}} ",[21,2804,207],{"class":127},[21,2806,2807],{"class":210},"br",[21,2809,2810],{"class":127}," \u002F>",[21,2812,2813],{"class":249},"Please go back\n",[21,2815,2816],{"class":23,"line":499},[21,2817,2818],{"class":249},"      and login again...\n",[21,2820,2821,2823,2825],{"class":23,"line":516},[21,2822,1820],{"class":127},[21,2824,1044],{"class":210},[21,2826,234],{"class":127},[21,2828,2829,2831,2833],{"class":23,"line":533},[21,2830,1830],{"class":127},[21,2832,1044],{"class":210},[21,2834,234],{"class":127},[21,2836,2837,2839,2841],{"class":23,"line":539},[21,2838,1158],{"class":127},[21,2840,1044],{"class":210},[21,2842,234],{"class":127},[29,2844,2845],{},"Now open view_jokes\u002Fjokes.js and update the controller code as follows:",[11,2847,2849],{"className":240,"code":2848,"language":242,"meta":16,"style":16},".controller('JokesCtrl', ['$http', '$auth', '$rootScope','$state', '$q' , function($http, $auth, $rootScope, $state, $q) {\n\n  var vm = this;\n\n  vm.jokes = [];\n  vm.error;\n  vm.joke;\n\n  $http.get('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes').success(function(jokes){\n    console.log(jokes);\n    vm.jokes = jokes.data;\n    }).error(function(error){\n      vm.error = error;\n    })\n\n  vm.init();\n\n}]);\n",[18,2850,2851,2939,2943,2954,2958,2974,2984,2995,2999,3033,3050,3070,3091,3106,3112,3116,3129,3133],{"__ignoreMap":16},[21,2852,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889,2891,2893,2895,2897,2899,2901,2903,2906,2908,2911,2913,2915,2917,2919,2922,2924,2926,2928,2930,2932,2935,2937],{"class":23,"line":24},[21,2854,253],{"class":127},[21,2856,580],{"class":82},[21,2858,259],{"class":249},[21,2860,262],{"class":127},[21,2862,823],{"class":72},[21,2864,262],{"class":127},[21,2866,270],{"class":127},[21,2868,594],{"class":249},[21,2870,262],{"class":127},[21,2872,2149],{"class":72},[21,2874,262],{"class":127},[21,2876,270],{"class":127},[21,2878,469],{"class":127},[21,2880,2131],{"class":72},[21,2882,262],{"class":127},[21,2884,270],{"class":127},[21,2886,469],{"class":127},[21,2888,599],{"class":72},[21,2890,262],{"class":127},[21,2892,270],{"class":127},[21,2894,262],{"class":127},[21,2896,2140],{"class":72},[21,2898,262],{"class":127},[21,2900,270],{"class":127},[21,2902,469],{"class":127},[21,2904,2905],{"class":72},"$q",[21,2907,262],{"class":127},[21,2909,2910],{"class":127}," ,",[21,2912,606],{"class":214},[21,2914,259],{"class":127},[21,2916,2149],{"class":424},[21,2918,270],{"class":127},[21,2920,2921],{"class":424}," $auth",[21,2923,270],{"class":127},[21,2925,2182],{"class":424},[21,2927,270],{"class":127},[21,2929,2172],{"class":424},[21,2931,270],{"class":127},[21,2933,2934],{"class":424}," $q",[21,2936,432],{"class":127},[21,2938,435],{"class":127},[21,2940,2941],{"class":23,"line":79},[21,2942,572],{"emptyLinePlaceholder":571},[21,2944,2945,2948,2950,2952],{"class":23,"line":282},[21,2946,2947],{"class":214},"  var",[21,2949,2198],{"class":249},[21,2951,2052],{"class":127},[21,2953,2203],{"class":127},[21,2955,2956],{"class":23,"line":296},[21,2957,572],{"emptyLinePlaceholder":571},[21,2959,2960,2963,2965,2967,2969,2972],{"class":23,"line":308},[21,2961,2962],{"class":249},"  vm",[21,2964,253],{"class":127},[21,2966,714],{"class":249},[21,2968,2052],{"class":127},[21,2970,2971],{"class":210}," []",[21,2973,553],{"class":127},[21,2975,2976,2978,2980,2982],{"class":23,"line":319},[21,2977,2962],{"class":249},[21,2979,253],{"class":127},[21,2981,2496],{"class":249},[21,2983,553],{"class":127},[21,2985,2986,2988,2990,2993],{"class":23,"line":329},[21,2987,2962],{"class":249},[21,2989,253],{"class":127},[21,2991,2992],{"class":249},"joke",[21,2994,553],{"class":127},[21,2996,2997],{"class":23,"line":461},[21,2998,572],{"emptyLinePlaceholder":571},[21,3000,3001,3004,3006,3008,3010,3012,3015,3017,3019,3021,3023,3025,3027,3029,3031],{"class":23,"line":479},[21,3002,3003],{"class":249},"  $http",[21,3005,253],{"class":127},[21,3007,2352],{"class":82},[21,3009,259],{"class":210},[21,3011,262],{"class":127},[21,3013,3014],{"class":72},"http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes",[21,3016,262],{"class":127},[21,3018,432],{"class":210},[21,3020,253],{"class":127},[21,3022,2368],{"class":82},[21,3024,259],{"class":210},[21,3026,2338],{"class":214},[21,3028,259],{"class":127},[21,3030,714],{"class":424},[21,3032,2380],{"class":127},[21,3034,3035,3038,3040,3042,3044,3046,3048],{"class":23,"line":489},[21,3036,3037],{"class":249},"    console",[21,3039,253],{"class":127},[21,3041,2553],{"class":82},[21,3043,259],{"class":210},[21,3045,714],{"class":249},[21,3047,432],{"class":210},[21,3049,553],{"class":127},[21,3051,3052,3055,3057,3059,3061,3064,3066,3068],{"class":23,"line":499},[21,3053,3054],{"class":249},"    vm",[21,3056,253],{"class":127},[21,3058,714],{"class":249},[21,3060,2052],{"class":127},[21,3062,3063],{"class":249}," jokes",[21,3065,253],{"class":127},[21,3067,2537],{"class":249},[21,3069,553],{"class":127},[21,3071,3072,3075,3077,3079,3081,3083,3085,3087,3089],{"class":23,"line":516},[21,3073,3074],{"class":127},"    }",[21,3076,432],{"class":210},[21,3078,253],{"class":127},[21,3080,2496],{"class":82},[21,3082,259],{"class":210},[21,3084,2338],{"class":214},[21,3086,259],{"class":127},[21,3088,2496],{"class":424},[21,3090,2380],{"class":127},[21,3092,3093,3096,3098,3100,3102,3104],{"class":23,"line":533},[21,3094,3095],{"class":249},"      vm",[21,3097,253],{"class":127},[21,3099,2496],{"class":249},[21,3101,2052],{"class":127},[21,3103,2532],{"class":249},[21,3105,553],{"class":127},[21,3107,3108,3110],{"class":23,"line":539},[21,3109,3074],{"class":127},[21,3111,2488],{"class":210},[21,3113,3114],{"class":23,"line":545},[21,3115,572],{"emptyLinePlaceholder":571},[21,3117,3118,3120,3122,3125,3127],{"class":23,"line":556},[21,3119,2962],{"class":249},[21,3121,253],{"class":127},[21,3123,3124],{"class":82},"init",[21,3126,2256],{"class":210},[21,3128,553],{"class":127},[21,3130,3131],{"class":23,"line":562},[21,3132,572],{"emptyLinePlaceholder":571},[21,3134,3135,3137,3139],{"class":23,"line":568},[21,3136,2093],{"class":127},[21,3138,618],{"class":249},[21,3140,553],{"class":127},[29,3142,3143],{},"I know, i can move most of the code to the factory or service, but for the sake of simplicity, i am not going to do this.",[29,3145,3146],{},"Now Open the jokes route, you will see a output similar to this,",[29,3148,3149],{},[343,3150],{"alt":345,"src":3151},"\u002Fimg\u002F2015-11-13_22-50-04.png",[44,3153,3155],{"id":3154},"prettify-app-logout-part","Prettify App & Logout Part",[29,3157,3158],{},"Let’s start by adding nav to the app, open index.html and update the container code as follows:",[11,3160,3162],{"className":198,"code":3161,"language":200,"meta":16,"style":16},"\u003Cdiv class=\"container\">\n  \u003Cnav class=\"navbar navbar-default\">\n    \u003Cdiv class=\"container-fluid\">\n      \u003C!-- Brand and toggle get grouped for better mobile display -->\n      \u003Cdiv class=\"navbar-header\">\n        \u003Cbutton\n          type=\"button\"\n          class=\"navbar-toggle collapsed\"\n          data-toggle=\"collapse\"\n          data-target=\"#bs-example-navbar-collapse-1\"\n          aria-expanded=\"false\"\n        >\n          \u003Cspan class=\"sr-only\">Toggle navigation\u003C\u002Fspan>\n          \u003Cspan class=\"icon-bar\">\u003C\u002Fspan>\n          \u003Cspan class=\"icon-bar\">\u003C\u002Fspan>\n          \u003Cspan class=\"icon-bar\">\u003C\u002Fspan>\n        \u003C\u002Fbutton>\n        \u003Ca class=\"navbar-brand\" href=\"\">Jokes App\u003C\u002Fa>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Collect the nav links, forms, and other content for toggling -->\n      \u003Cdiv class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">\n        \u003Cul class=\"nav navbar-nav\">\n          \u003Cli>\u003Ca ui-sref=\"auth\">Auth\u003C\u002Fa>\u003C\u002Fli>\n          \u003Cli>\u003Ca ui-sref=\"jokes\">Jokes\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n        \u003Cul class=\"nav navbar-nav navbar-right\" ng-show=\"currentUser != null\">\n          \u003Cli>\u003Ca href=\"\">Welcome, {{currentUser.name}}\u003C\u002Fa>\u003C\u002Fli>\n          \u003Cli class=\"dropdown\">\n            \u003Ca\n              href=\"#\"\n              class=\"dropdown-toggle\"\n              data-toggle=\"dropdown\"\n              role=\"button\"\n              aria-haspopup=\"true\"\n              aria-expanded=\"false\"\n              >My Profile \u003Cspan class=\"caret\">\u003C\u002Fspan\n            >\u003C\u002Fa>\n            \u003Cul class=\"dropdown-menu\">\n              \u003Cli>\n                \u003Ca ng-click=\"logout()\" style=\"cursor: pointer;\">Logout\u003C\u002Fa>\n              \u003C\u002Fli>\n            \u003C\u002Ful>\n          \u003C\u002Fli>\n        \u003C\u002Ful>\n      \u003C\u002Fdiv>\n      \u003C!-- \u002F.navbar-collapse -->\n    \u003C\u002Fdiv>\n    \u003C!-- \u002F.container-fluid -->\n  \u003C\u002Fnav>\n\n  \u003Cdiv ui-view=\"jokesContent\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[18,3163,3164,3182,3202,3221,3226,3245,3251,3264,3278,3292,3306,3320,3325,3353,3376,3398,3420,3428,3463,3471,3475,3480,3511,3530,3566,3601,3609,3640,3671,3690,3697,3711,3725,3738,3751,3765,3778,3806,3815,3834,3842,3883,3891,3899,3907,3915,3923,3928,3936,3941,3949,3953,3977],{"__ignoreMap":16},[21,3165,3166,3168,3170,3172,3174,3176,3178,3180],{"class":23,"line":24},[21,3167,207],{"class":127},[21,3169,1044],{"class":210},[21,3171,1047],{"class":214},[21,3173,218],{"class":127},[21,3175,221],{"class":127},[21,3177,1054],{"class":72},[21,3179,221],{"class":127},[21,3181,234],{"class":127},[21,3183,3184,3186,3189,3191,3193,3195,3198,3200],{"class":23,"line":79},[21,3185,1063],{"class":127},[21,3187,3188],{"class":210},"nav",[21,3190,1047],{"class":214},[21,3192,218],{"class":127},[21,3194,221],{"class":127},[21,3196,3197],{"class":72},"navbar navbar-default",[21,3199,221],{"class":127},[21,3201,234],{"class":127},[21,3203,3204,3206,3208,3210,3212,3214,3217,3219],{"class":23,"line":282},[21,3205,1083],{"class":127},[21,3207,1044],{"class":210},[21,3209,1047],{"class":214},[21,3211,218],{"class":127},[21,3213,221],{"class":127},[21,3215,3216],{"class":72},"container-fluid",[21,3218,221],{"class":127},[21,3220,234],{"class":127},[21,3222,3223],{"class":23,"line":296},[21,3224,3225],{"class":278},"      \u003C!-- Brand and toggle get grouped for better mobile display -->\n",[21,3227,3228,3230,3232,3234,3236,3238,3241,3243],{"class":23,"line":308},[21,3229,1103],{"class":127},[21,3231,1044],{"class":210},[21,3233,1047],{"class":214},[21,3235,218],{"class":127},[21,3237,221],{"class":127},[21,3239,3240],{"class":72},"navbar-header",[21,3242,221],{"class":127},[21,3244,234],{"class":127},[21,3246,3247,3249],{"class":23,"line":319},[21,3248,1123],{"class":127},[21,3250,1653],{"class":210},[21,3252,3253,3256,3258,3260,3262],{"class":23,"line":329},[21,3254,3255],{"class":214},"          type",[21,3257,218],{"class":127},[21,3259,221],{"class":127},[21,3261,1717],{"class":72},[21,3263,134],{"class":127},[21,3265,3266,3269,3271,3273,3276],{"class":23,"line":461},[21,3267,3268],{"class":214},"          class",[21,3270,218],{"class":127},[21,3272,221],{"class":127},[21,3274,3275],{"class":72},"navbar-toggle collapsed",[21,3277,134],{"class":127},[21,3279,3280,3283,3285,3287,3290],{"class":23,"line":479},[21,3281,3282],{"class":214},"          data-toggle",[21,3284,218],{"class":127},[21,3286,221],{"class":127},[21,3288,3289],{"class":72},"collapse",[21,3291,134],{"class":127},[21,3293,3294,3297,3299,3301,3304],{"class":23,"line":489},[21,3295,3296],{"class":214},"          data-target",[21,3298,218],{"class":127},[21,3300,221],{"class":127},[21,3302,3303],{"class":72},"#bs-example-navbar-collapse-1",[21,3305,134],{"class":127},[21,3307,3308,3311,3313,3315,3318],{"class":23,"line":499},[21,3309,3310],{"class":214},"          aria-expanded",[21,3312,218],{"class":127},[21,3314,221],{"class":127},[21,3316,3317],{"class":72},"false",[21,3319,134],{"class":127},[21,3321,3322],{"class":23,"line":516},[21,3323,3324],{"class":127},"        >\n",[21,3326,3327,3329,3331,3333,3335,3337,3340,3342,3344,3347,3349,3351],{"class":23,"line":533},[21,3328,1190],{"class":127},[21,3330,21],{"class":210},[21,3332,1047],{"class":214},[21,3334,218],{"class":127},[21,3336,221],{"class":127},[21,3338,3339],{"class":72},"sr-only",[21,3341,221],{"class":127},[21,3343,1152],{"class":127},[21,3345,3346],{"class":249},"Toggle navigation",[21,3348,1158],{"class":127},[21,3350,21],{"class":210},[21,3352,234],{"class":127},[21,3354,3355,3357,3359,3361,3363,3365,3368,3370,3372,3374],{"class":23,"line":539},[21,3356,1190],{"class":127},[21,3358,21],{"class":210},[21,3360,1047],{"class":214},[21,3362,218],{"class":127},[21,3364,221],{"class":127},[21,3366,3367],{"class":72},"icon-bar",[21,3369,221],{"class":127},[21,3371,229],{"class":127},[21,3373,21],{"class":210},[21,3375,234],{"class":127},[21,3377,3378,3380,3382,3384,3386,3388,3390,3392,3394,3396],{"class":23,"line":545},[21,3379,1190],{"class":127},[21,3381,21],{"class":210},[21,3383,1047],{"class":214},[21,3385,218],{"class":127},[21,3387,221],{"class":127},[21,3389,3367],{"class":72},[21,3391,221],{"class":127},[21,3393,229],{"class":127},[21,3395,21],{"class":210},[21,3397,234],{"class":127},[21,3399,3400,3402,3404,3406,3408,3410,3412,3414,3416,3418],{"class":23,"line":556},[21,3401,1190],{"class":127},[21,3403,21],{"class":210},[21,3405,1047],{"class":214},[21,3407,218],{"class":127},[21,3409,221],{"class":127},[21,3411,3367],{"class":72},[21,3413,221],{"class":127},[21,3415,229],{"class":127},[21,3417,21],{"class":210},[21,3419,234],{"class":127},[21,3421,3422,3424,3426],{"class":23,"line":562},[21,3423,1800],{"class":127},[21,3425,1717],{"class":210},[21,3427,234],{"class":127},[21,3429,3430,3432,3434,3436,3438,3440,3443,3445,3448,3450,3452,3454,3457,3459,3461],{"class":23,"line":568},[21,3431,1123],{"class":127},[21,3433,33],{"class":210},[21,3435,1047],{"class":214},[21,3437,218],{"class":127},[21,3439,221],{"class":127},[21,3441,3442],{"class":72},"navbar-brand",[21,3444,221],{"class":127},[21,3446,3447],{"class":214}," href",[21,3449,218],{"class":127},[21,3451,1149],{"class":127},[21,3453,1152],{"class":127},[21,3455,3456],{"class":249},"Jokes App",[21,3458,1158],{"class":127},[21,3460,33],{"class":210},[21,3462,234],{"class":127},[21,3464,3465,3467,3469],{"class":23,"line":575},[21,3466,1810],{"class":127},[21,3468,1044],{"class":210},[21,3470,234],{"class":127},[21,3472,3473],{"class":23,"line":812},[21,3474,572],{"emptyLinePlaceholder":571},[21,3476,3477],{"class":23,"line":1399},[21,3478,3479],{"class":278},"      \u003C!-- Collect the nav links, forms, and other content for toggling -->\n",[21,3481,3482,3484,3486,3488,3490,3492,3495,3497,3500,3502,3504,3507,3509],{"class":23,"line":1409},[21,3483,1103],{"class":127},[21,3485,1044],{"class":210},[21,3487,1047],{"class":214},[21,3489,218],{"class":127},[21,3491,221],{"class":127},[21,3493,3494],{"class":72},"collapse navbar-collapse",[21,3496,221],{"class":127},[21,3498,3499],{"class":214}," id",[21,3501,218],{"class":127},[21,3503,221],{"class":127},[21,3505,3506],{"class":72},"bs-example-navbar-collapse-1",[21,3508,221],{"class":127},[21,3510,234],{"class":127},[21,3512,3513,3515,3517,3519,3521,3523,3526,3528],{"class":23,"line":1419},[21,3514,1123],{"class":127},[21,3516,2655],{"class":210},[21,3518,1047],{"class":214},[21,3520,218],{"class":127},[21,3522,221],{"class":127},[21,3524,3525],{"class":72},"nav navbar-nav",[21,3527,221],{"class":127},[21,3529,234],{"class":127},[21,3531,3532,3534,3536,3538,3540,3543,3545,3547,3549,3551,3553,3556,3558,3560,3562,3564],{"class":23,"line":1438},[21,3533,1190],{"class":127},[21,3535,2675],{"class":210},[21,3537,1139],{"class":127},[21,3539,33],{"class":210},[21,3541,3542],{"class":214}," ui-sref",[21,3544,218],{"class":127},[21,3546,221],{"class":127},[21,3548,452],{"class":72},[21,3550,221],{"class":127},[21,3552,1152],{"class":127},[21,3554,3555],{"class":249},"Auth",[21,3557,1158],{"class":127},[21,3559,33],{"class":210},[21,3561,229],{"class":127},[21,3563,2675],{"class":210},[21,3565,234],{"class":127},[21,3567,3568,3570,3572,3574,3576,3578,3580,3582,3584,3586,3588,3591,3593,3595,3597,3599],{"class":23,"line":1466},[21,3569,1190],{"class":127},[21,3571,2675],{"class":210},[21,3573,1139],{"class":127},[21,3575,33],{"class":210},[21,3577,3542],{"class":214},[21,3579,218],{"class":127},[21,3581,221],{"class":127},[21,3583,714],{"class":72},[21,3585,221],{"class":127},[21,3587,1152],{"class":127},[21,3589,3590],{"class":249},"Jokes",[21,3592,1158],{"class":127},[21,3594,33],{"class":210},[21,3596,229],{"class":127},[21,3598,2675],{"class":210},[21,3600,234],{"class":127},[21,3602,3603,3605,3607],{"class":23,"line":1478},[21,3604,1800],{"class":127},[21,3606,2655],{"class":210},[21,3608,234],{"class":127},[21,3610,3611,3613,3615,3617,3619,3621,3624,3626,3629,3631,3633,3636,3638],{"class":23,"line":1483},[21,3612,1123],{"class":127},[21,3614,2655],{"class":210},[21,3616,1047],{"class":214},[21,3618,218],{"class":127},[21,3620,221],{"class":127},[21,3622,3623],{"class":72},"nav navbar-nav navbar-right",[21,3625,221],{"class":127},[21,3627,3628],{"class":214}," ng-show",[21,3630,218],{"class":127},[21,3632,221],{"class":127},[21,3634,3635],{"class":72},"currentUser != null",[21,3637,221],{"class":127},[21,3639,234],{"class":127},[21,3641,3642,3644,3646,3648,3650,3652,3654,3656,3658,3661,3663,3665,3667,3669],{"class":23,"line":1502},[21,3643,1190],{"class":127},[21,3645,2675],{"class":210},[21,3647,1139],{"class":127},[21,3649,33],{"class":210},[21,3651,3447],{"class":214},[21,3653,218],{"class":127},[21,3655,1149],{"class":127},[21,3657,1152],{"class":127},[21,3659,3660],{"class":249},"Welcome, {{currentUser.name}}",[21,3662,1158],{"class":127},[21,3664,33],{"class":210},[21,3666,229],{"class":127},[21,3668,2675],{"class":210},[21,3670,234],{"class":127},[21,3672,3673,3675,3677,3679,3681,3683,3686,3688],{"class":23,"line":1509},[21,3674,1190],{"class":127},[21,3676,2675],{"class":210},[21,3678,1047],{"class":214},[21,3680,218],{"class":127},[21,3682,221],{"class":127},[21,3684,3685],{"class":72},"dropdown",[21,3687,221],{"class":127},[21,3689,234],{"class":127},[21,3691,3692,3694],{"class":23,"line":1523},[21,3693,1222],{"class":127},[21,3695,3696],{"class":210},"a\n",[21,3698,3699,3702,3704,3706,3709],{"class":23,"line":1536},[21,3700,3701],{"class":214},"              href",[21,3703,218],{"class":127},[21,3705,221],{"class":127},[21,3707,3708],{"class":72},"#",[21,3710,134],{"class":127},[21,3712,3713,3716,3718,3720,3723],{"class":23,"line":1549},[21,3714,3715],{"class":214},"              class",[21,3717,218],{"class":127},[21,3719,221],{"class":127},[21,3721,3722],{"class":72},"dropdown-toggle",[21,3724,134],{"class":127},[21,3726,3727,3730,3732,3734,3736],{"class":23,"line":1562},[21,3728,3729],{"class":214},"              data-toggle",[21,3731,218],{"class":127},[21,3733,221],{"class":127},[21,3735,3685],{"class":72},[21,3737,134],{"class":127},[21,3739,3740,3743,3745,3747,3749],{"class":23,"line":1571},[21,3741,3742],{"class":214},"              role",[21,3744,218],{"class":127},[21,3746,221],{"class":127},[21,3748,1717],{"class":72},[21,3750,134],{"class":127},[21,3752,3753,3756,3758,3760,3763],{"class":23,"line":1585},[21,3754,3755],{"class":214},"              aria-haspopup",[21,3757,218],{"class":127},[21,3759,221],{"class":127},[21,3761,3762],{"class":72},"true",[21,3764,134],{"class":127},[21,3766,3767,3770,3772,3774,3776],{"class":23,"line":1590},[21,3768,3769],{"class":214},"              aria-expanded",[21,3771,218],{"class":127},[21,3773,221],{"class":127},[21,3775,3317],{"class":72},[21,3777,134],{"class":127},[21,3779,3780,3783,3786,3788,3790,3792,3794,3796,3799,3801,3803],{"class":23,"line":1599},[21,3781,3782],{"class":127},"              >",[21,3784,3785],{"class":249},"My Profile ",[21,3787,207],{"class":127},[21,3789,21],{"class":210},[21,3791,1047],{"class":214},[21,3793,218],{"class":127},[21,3795,221],{"class":127},[21,3797,3798],{"class":72},"caret",[21,3800,221],{"class":127},[21,3802,229],{"class":127},[21,3804,3805],{"class":210},"span\n",[21,3807,3808,3811,3813],{"class":23,"line":1608},[21,3809,3810],{"class":127},"            >\u003C\u002F",[21,3812,33],{"class":210},[21,3814,234],{"class":127},[21,3816,3817,3819,3821,3823,3825,3827,3830,3832],{"class":23,"line":1628},[21,3818,1222],{"class":127},[21,3820,2655],{"class":210},[21,3822,1047],{"class":214},[21,3824,218],{"class":127},[21,3826,221],{"class":127},[21,3828,3829],{"class":72},"dropdown-menu",[21,3831,221],{"class":127},[21,3833,234],{"class":127},[21,3835,3836,3838,3840],{"class":23,"line":1648},[21,3837,1242],{"class":127},[21,3839,2675],{"class":210},[21,3841,234],{"class":127},[21,3843,3844,3846,3848,3851,3853,3855,3858,3860,3863,3865,3867,3870,3872,3874,3877,3879,3881],{"class":23,"line":1656},[21,3845,1310],{"class":127},[21,3847,33],{"class":210},[21,3849,3850],{"class":214}," ng-click",[21,3852,218],{"class":127},[21,3854,221],{"class":127},[21,3856,3857],{"class":72},"logout()",[21,3859,221],{"class":127},[21,3861,3862],{"class":214}," style",[21,3864,218],{"class":127},[21,3866,221],{"class":127},[21,3868,3869],{"class":72},"cursor: pointer;",[21,3871,221],{"class":127},[21,3873,1152],{"class":127},[21,3875,3876],{"class":249},"Logout",[21,3878,1158],{"class":127},[21,3880,33],{"class":210},[21,3882,234],{"class":127},[21,3884,3885,3887,3889],{"class":23,"line":1670},[21,3886,1402],{"class":127},[21,3888,2675],{"class":210},[21,3890,234],{"class":127},[21,3892,3893,3895,3897],{"class":23,"line":1684},[21,3894,1412],{"class":127},[21,3896,2655],{"class":210},[21,3898,234],{"class":127},[21,3900,3901,3903,3905],{"class":23,"line":1699},[21,3902,1790],{"class":127},[21,3904,2675],{"class":210},[21,3906,234],{"class":127},[21,3908,3909,3911,3913],{"class":23,"line":1705},[21,3910,1800],{"class":127},[21,3912,2655],{"class":210},[21,3914,234],{"class":127},[21,3916,3917,3919,3921],{"class":23,"line":1711},[21,3918,1810],{"class":127},[21,3920,1044],{"class":210},[21,3922,234],{"class":127},[21,3924,3925],{"class":23,"line":1722},[21,3926,3927],{"class":278},"      \u003C!-- \u002F.navbar-collapse -->\n",[21,3929,3930,3932,3934],{"class":23,"line":1754},[21,3931,1820],{"class":127},[21,3933,1044],{"class":210},[21,3935,234],{"class":127},[21,3937,3938],{"class":23,"line":1760},[21,3939,3940],{"class":278},"    \u003C!-- \u002F.container-fluid -->\n",[21,3942,3943,3945,3947],{"class":23,"line":1769},[21,3944,1830],{"class":127},[21,3946,3188],{"class":210},[21,3948,234],{"class":127},[21,3950,3951],{"class":23,"line":1778},[21,3952,572],{"emptyLinePlaceholder":571},[21,3954,3955,3957,3959,3962,3964,3966,3969,3971,3973,3975],{"class":23,"line":1787},[21,3956,1063],{"class":127},[21,3958,1044],{"class":210},[21,3960,3961],{"class":214}," ui-view",[21,3963,218],{"class":127},[21,3965,221],{"class":127},[21,3967,3968],{"class":72},"jokesContent",[21,3970,221],{"class":127},[21,3972,229],{"class":127},[21,3974,1044],{"class":210},[21,3976,234],{"class":127},[21,3978,3979,3981,3983],{"class":23,"line":1797},[21,3980,1158],{"class":127},[21,3982,1044],{"class":210},[21,3984,234],{"class":127},[29,3986,3987],{},"Now open app.js and add the logout code in the run function as,",[11,3989,3991],{"className":240,"code":3990,"language":242,"meta":16,"style":16},".run(function ($rootScope, $state, $auth) {\n\n      $rootScope.logout = function() {\n        $auth.logout().then(function() {\n            localStorage.removeItem('user');\n            $rootScope.currentUser = null;\n            $state.go('auth');\n            });\n           }\n         })\n$rootScope.currentUser = JSON.parse(localStorage.getItem('user'));\n}\n",[18,3992,3993,4020,4024,4042,4065,4087,4101,4122,4130,4135,4142,4181],{"__ignoreMap":16},[21,3994,3995,3997,4000,4002,4004,4006,4008,4010,4012,4014,4016,4018],{"class":23,"line":24},[21,3996,253],{"class":127},[21,3998,3999],{"class":82},"run",[21,4001,259],{"class":249},[21,4003,2338],{"class":214},[21,4005,421],{"class":127},[21,4007,599],{"class":424},[21,4009,270],{"class":127},[21,4011,2172],{"class":424},[21,4013,270],{"class":127},[21,4015,2921],{"class":424},[21,4017,432],{"class":127},[21,4019,435],{"class":127},[21,4021,4022],{"class":23,"line":79},[21,4023,572],{"emptyLinePlaceholder":571},[21,4025,4026,4029,4031,4034,4036,4038,4040],{"class":23,"line":282},[21,4027,4028],{"class":249},"      $rootScope",[21,4030,253],{"class":127},[21,4032,4033],{"class":82},"logout",[21,4035,2052],{"class":127},[21,4037,606],{"class":214},[21,4039,2256],{"class":127},[21,4041,435],{"class":127},[21,4043,4044,4047,4049,4051,4053,4055,4057,4059,4061,4063],{"class":23,"line":296},[21,4045,4046],{"class":249},"        $auth",[21,4048,253],{"class":127},[21,4050,4033],{"class":82},[21,4052,2256],{"class":210},[21,4054,253],{"class":127},[21,4056,2333],{"class":82},[21,4058,259],{"class":210},[21,4060,2338],{"class":214},[21,4062,2256],{"class":127},[21,4064,435],{"class":127},[21,4066,4067,4070,4072,4075,4077,4079,4081,4083,4085],{"class":23,"line":308},[21,4068,4069],{"class":249},"            localStorage",[21,4071,253],{"class":127},[21,4073,4074],{"class":82},"removeItem",[21,4076,259],{"class":210},[21,4078,262],{"class":127},[21,4080,2407],{"class":72},[21,4082,262],{"class":127},[21,4084,432],{"class":210},[21,4086,553],{"class":127},[21,4088,4089,4092,4094,4096,4098],{"class":23,"line":319},[21,4090,4091],{"class":249},"            $rootScope",[21,4093,253],{"class":127},[21,4095,2447],{"class":249},[21,4097,2052],{"class":127},[21,4099,4100],{"class":127}," null;\n",[21,4102,4103,4106,4108,4110,4112,4114,4116,4118,4120],{"class":23,"line":329},[21,4104,4105],{"class":249},"            $state",[21,4107,253],{"class":127},[21,4109,2468],{"class":82},[21,4111,259],{"class":210},[21,4113,262],{"class":127},[21,4115,452],{"class":72},[21,4117,262],{"class":127},[21,4119,432],{"class":210},[21,4121,553],{"class":127},[21,4123,4124,4126,4128],{"class":23,"line":461},[21,4125,2577],{"class":127},[21,4127,432],{"class":210},[21,4129,553],{"class":127},[21,4131,4132],{"class":23,"line":479},[21,4133,4134],{"class":127},"           }\n",[21,4136,4137,4140],{"class":23,"line":489},[21,4138,4139],{"class":127},"         }",[21,4141,2488],{"class":249},[21,4143,4144,4146,4148,4151,4153,4155,4157,4160,4163,4165,4168,4170,4172,4174,4176,4179],{"class":23,"line":499},[21,4145,599],{"class":249},[21,4147,253],{"class":127},[21,4149,4150],{"class":249},"currentUser ",[21,4152,218],{"class":127},[21,4154,2393],{"class":249},[21,4156,253],{"class":127},[21,4158,4159],{"class":82},"parse",[21,4161,4162],{"class":249},"(localStorage",[21,4164,253],{"class":127},[21,4166,4167],{"class":82},"getItem",[21,4169,259],{"class":249},[21,4171,262],{"class":127},[21,4173,2407],{"class":72},[21,4175,262],{"class":127},[21,4177,4178],{"class":249},"))",[21,4180,553],{"class":127},[21,4182,4183],{"class":23,"line":516},[21,4184,4185],{"class":249},"}\n",[29,4187,4188],{},"Now the app will look similar to this and logout will work.",[29,4190,4191],{},[343,4192],{"alt":345,"src":4193},"\u002Fimg\u002F2015-11-13_23-00-01.png",[29,4195,4196],{},"Securing Routes\nAt that point, we are authenticating the user from the server and fetching and showing the jokes from the server. But we can see that, if the user is not authenticated, he\u002Fshe can still go to jokes route and if the user is authenticated, he\u002Fshe can still go to the auth route. We don’t want this to happen in our app. So we need to secure our routes.",[29,4198,4199,4200,4205],{},"For securing routes we will use a angular package called ",[33,4201,4204],{"href":4202,"rel":4203},"https:\u002F\u002Fgithub.com\u002FNarzerus\u002Fangular-permission",[37],"angular-permission",", so let’s start by installing the package.",[11,4207,4209],{"className":13,"code":4208,"language":15,"meta":16,"style":16},"bower install angular-permission --save\n",[18,4210,4211],{"__ignoreMap":16},[21,4212,4213,4215,4217,4220],{"class":23,"line":24},[21,4214,183],{"class":27},[21,4216,186],{"class":72},[21,4218,4219],{"class":72}," angular-permission",[21,4221,192],{"class":72},[29,4223,4224],{},"Include the package to the app.js list of dependencies,",[11,4226,4228],{"className":240,"code":4227,"language":242,"meta":16,"style":16},"angular.module('myApp', [\n  \u002F\u002F 'ngRoute',\n  'ui.router',\n  'myApp.jokes',\n  'myApp.view2',\n  'myApp.auth',\n  'myApp.version',\n  'satellizer',\n  'permission',\n]);\n",[18,4229,4230,4250,4254,4264,4274,4284,4294,4304,4314,4325],{"__ignoreMap":16},[21,4231,4232,4234,4236,4238,4240,4242,4244,4246,4248],{"class":23,"line":24},[21,4233,250],{"class":249},[21,4235,253],{"class":127},[21,4237,256],{"class":82},[21,4239,259],{"class":249},[21,4241,262],{"class":127},[21,4243,265],{"class":72},[21,4245,262],{"class":127},[21,4247,270],{"class":127},[21,4249,273],{"class":249},[21,4251,4252],{"class":23,"line":79},[21,4253,279],{"class":278},[21,4255,4256,4258,4260,4262],{"class":23,"line":282},[21,4257,285],{"class":127},[21,4259,288],{"class":72},[21,4261,262],{"class":127},[21,4263,293],{"class":127},[21,4265,4266,4268,4270,4272],{"class":23,"line":296},[21,4267,285],{"class":127},[21,4269,645],{"class":72},[21,4271,262],{"class":127},[21,4273,293],{"class":127},[21,4275,4276,4278,4280,4282],{"class":23,"line":308},[21,4277,285],{"class":127},[21,4279,313],{"class":72},[21,4281,262],{"class":127},[21,4283,293],{"class":127},[21,4285,4286,4288,4290,4292],{"class":23,"line":319},[21,4287,285],{"class":127},[21,4289,373],{"class":72},[21,4291,262],{"class":127},[21,4293,293],{"class":127},[21,4295,4296,4298,4300,4302],{"class":23,"line":329},[21,4297,285],{"class":127},[21,4299,324],{"class":72},[21,4301,262],{"class":127},[21,4303,293],{"class":127},[21,4305,4306,4308,4310,4312],{"class":23,"line":461},[21,4307,285],{"class":127},[21,4309,1859],{"class":72},[21,4311,262],{"class":127},[21,4313,293],{"class":127},[21,4315,4316,4318,4321,4323],{"class":23,"line":479},[21,4317,285],{"class":127},[21,4319,4320],{"class":72},"permission",[21,4322,262],{"class":127},[21,4324,293],{"class":127},[21,4326,4327,4329],{"class":23,"line":489},[21,4328,618],{"class":249},[21,4330,553],{"class":127},[29,4332,4333],{},"Now first open the view_auth\u002Fauth.js and update the config block as,",[11,4335,4337],{"className":240,"code":4336,"language":242,"meta":16,"style":16},".config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {\n  $stateProvider\n  .state('auth', {\n    url: '\u002Fauth',\n    data: {\n        permissions: {\n          except: ['isloggedin'],\n          redirectTo: 'jokes'\n        }\n      },\n    views: {\n      'jokesContent': {\n        templateUrl: \"view_auth\u002Fauth.html\",\n        controller: 'AuthCtrl as auth'\n      }\n    }\n  })\n}])\n",[18,4338,4339,4377,4382,4400,4415,4424,4433,4454,4467,4471,4476,4485,4498,4513,4526,4531,4536,4543],{"__ignoreMap":16},[21,4340,4341,4343,4345,4347,4349,4351,4353,4355,4357,4359,4361,4363,4365,4367,4369,4371,4373,4375],{"class":23,"line":24},[21,4342,253],{"class":127},[21,4344,387],{"class":82},[21,4346,1991],{"class":249},[21,4348,262],{"class":127},[21,4350,398],{"class":72},[21,4352,262],{"class":127},[21,4354,270],{"class":127},[21,4356,469],{"class":127},[21,4358,409],{"class":72},[21,4360,262],{"class":127},[21,4362,270],{"class":127},[21,4364,606],{"class":214},[21,4366,259],{"class":127},[21,4368,398],{"class":424},[21,4370,270],{"class":127},[21,4372,429],{"class":424},[21,4374,432],{"class":127},[21,4376,435],{"class":127},[21,4378,4379],{"class":23,"line":79},[21,4380,4381],{"class":249},"  $stateProvider\n",[21,4383,4384,4386,4388,4390,4392,4394,4396,4398],{"class":23,"line":282},[21,4385,364],{"class":127},[21,4387,445],{"class":82},[21,4389,259],{"class":210},[21,4391,262],{"class":127},[21,4393,452],{"class":72},[21,4395,262],{"class":127},[21,4397,270],{"class":127},[21,4399,435],{"class":127},[21,4401,4402,4405,4407,4409,4411,4413],{"class":23,"line":296},[21,4403,4404],{"class":210},"    url",[21,4406,124],{"class":127},[21,4408,469],{"class":127},[21,4410,472],{"class":72},[21,4412,262],{"class":127},[21,4414,293],{"class":127},[21,4416,4417,4420,4422],{"class":23,"line":308},[21,4418,4419],{"class":210},"    data",[21,4421,124],{"class":127},[21,4423,435],{"class":127},[21,4425,4426,4429,4431],{"class":23,"line":319},[21,4427,4428],{"class":210},"        permissions",[21,4430,124],{"class":127},[21,4432,435],{"class":127},[21,4434,4435,4438,4440,4442,4444,4447,4449,4452],{"class":23,"line":329},[21,4436,4437],{"class":210},"          except",[21,4439,124],{"class":127},[21,4441,594],{"class":210},[21,4443,262],{"class":127},[21,4445,4446],{"class":72},"isloggedin",[21,4448,262],{"class":127},[21,4450,4451],{"class":210},"]",[21,4453,293],{"class":127},[21,4455,4456,4459,4461,4463,4465],{"class":23,"line":461},[21,4457,4458],{"class":210},"          redirectTo",[21,4460,124],{"class":127},[21,4462,469],{"class":127},[21,4464,714],{"class":72},[21,4466,316],{"class":127},[21,4468,4469],{"class":23,"line":479},[21,4470,2586],{"class":127},[21,4472,4473],{"class":23,"line":489},[21,4474,4475],{"class":127},"      },\n",[21,4477,4478,4481,4483],{"class":23,"line":499},[21,4479,4480],{"class":210},"    views",[21,4482,124],{"class":127},[21,4484,435],{"class":127},[21,4486,4487,4490,4492,4494,4496],{"class":23,"line":516},[21,4488,4489],{"class":127},"      '",[21,4491,3968],{"class":210},[21,4493,262],{"class":127},[21,4495,124],{"class":127},[21,4497,435],{"class":127},[21,4499,4500,4503,4505,4507,4509,4511],{"class":23,"line":533},[21,4501,4502],{"class":210},"        templateUrl",[21,4504,124],{"class":127},[21,4506,128],{"class":127},[21,4508,509],{"class":72},[21,4510,221],{"class":127},[21,4512,293],{"class":127},[21,4514,4515,4518,4520,4522,4524],{"class":23,"line":539},[21,4516,4517],{"class":210},"        controller",[21,4519,124],{"class":127},[21,4521,469],{"class":127},[21,4523,526],{"class":72},[21,4525,316],{"class":127},[21,4527,4528],{"class":23,"line":545},[21,4529,4530],{"class":127},"      }\n",[21,4532,4533],{"class":23,"line":556},[21,4534,4535],{"class":127},"    }\n",[21,4537,4538,4541],{"class":23,"line":562},[21,4539,4540],{"class":127},"  }",[21,4542,2488],{"class":210},[21,4544,4545,4547],{"class":23,"line":568},[21,4546,2093],{"class":127},[21,4548,332],{"class":249},[29,4550,4551],{},"Here you can see we are using the new field data, where we have defined permissions, it is available by the angular-permission package. Here we have defined permission role (isloggedin) as, this route is available all the users who are not logged in.",[29,4553,4554],{},"So now we need to define that role in the app.js run funciton,",[11,4556,4558],{"className":240,"code":4557,"language":242,"meta":16,"style":16},"Permission.defineRole('isloggedin', function (stateParams) {\n  \u002F\u002F If the returned value is *truthy* then the user has the role, otherwise they don't\n  \u002F\u002F console.log(\"isloggedin \", $auth.isAuthenticated());\n  if ($auth.isAuthenticated()) {\n    return true; \u002F\u002F Is loggedin\n  }\n  return false;\n});\n",[18,4559,4560,4591,4596,4601,4622,4635,4640,4649],{"__ignoreMap":16},[21,4561,4562,4565,4567,4570,4572,4574,4576,4578,4580,4582,4584,4587,4589],{"class":23,"line":24},[21,4563,4564],{"class":249},"Permission",[21,4566,253],{"class":127},[21,4568,4569],{"class":82},"defineRole",[21,4571,259],{"class":249},[21,4573,262],{"class":127},[21,4575,4446],{"class":72},[21,4577,262],{"class":127},[21,4579,270],{"class":127},[21,4581,606],{"class":214},[21,4583,421],{"class":127},[21,4585,4586],{"class":424},"stateParams",[21,4588,432],{"class":127},[21,4590,435],{"class":127},[21,4592,4593],{"class":23,"line":79},[21,4594,4595],{"class":278},"  \u002F\u002F If the returned value is *truthy* then the user has the role, otherwise they don't\n",[21,4597,4598],{"class":23,"line":282},[21,4599,4600],{"class":278},"  \u002F\u002F console.log(\"isloggedin \", $auth.isAuthenticated());\n",[21,4602,4603,4607,4609,4611,4613,4616,4619],{"class":23,"line":296},[21,4604,4606],{"class":4605},"s7zQu","  if",[21,4608,421],{"class":210},[21,4610,2131],{"class":249},[21,4612,253],{"class":127},[21,4614,4615],{"class":82},"isAuthenticated",[21,4617,4618],{"class":210},"()) ",[21,4620,4621],{"class":127},"{\n",[21,4623,4624,4627,4629,4632],{"class":23,"line":308},[21,4625,4626],{"class":4605},"    return",[21,4628,2517],{"class":2222},[21,4630,4631],{"class":127},";",[21,4633,4634],{"class":278}," \u002F\u002F Is loggedin\n",[21,4636,4637],{"class":23,"line":319},[21,4638,4639],{"class":127},"  }\n",[21,4641,4642,4645,4647],{"class":23,"line":329},[21,4643,4644],{"class":4605},"  return",[21,4646,2223],{"class":2222},[21,4648,553],{"class":127},[21,4650,4651,4653,4655],{"class":23,"line":461},[21,4652,2093],{"class":127},[21,4654,432],{"class":249},[21,4656,553],{"class":127},[29,4658,4659],{},"Here we are checking if the user is authenticated, then he will not be allowed to enter this route.",[29,4661,4662],{},"Similarly update the view_jokes\u002Fjokes.js config function as,",[11,4664,4666],{"className":240,"code":4665,"language":242,"meta":16,"style":16},".config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {\n  $stateProvider\n  .state('jokes', {\n    url: '\u002Fjokes',\n    data: {\n        permissions: {\n          except: ['anonymous'],\n          redirectTo: 'auth'\n        }\n      },\n    views: {\n      'jokesContent': {\n        templateUrl: \"view_jokes\u002Fjokes.html\",\n        controller: 'JokesCtrl as jokes'\n      }\n    }\n  })\n}])\n",[18,4667,4668,4706,4710,4728,4742,4750,4758,4777,4789,4793,4797,4805,4817,4831,4843,4847,4851,4857],{"__ignoreMap":16},[21,4669,4670,4672,4674,4676,4678,4680,4682,4684,4686,4688,4690,4692,4694,4696,4698,4700,4702,4704],{"class":23,"line":24},[21,4671,253],{"class":127},[21,4673,387],{"class":82},[21,4675,1991],{"class":249},[21,4677,262],{"class":127},[21,4679,398],{"class":72},[21,4681,262],{"class":127},[21,4683,270],{"class":127},[21,4685,469],{"class":127},[21,4687,409],{"class":72},[21,4689,262],{"class":127},[21,4691,270],{"class":127},[21,4693,606],{"class":214},[21,4695,259],{"class":127},[21,4697,398],{"class":424},[21,4699,270],{"class":127},[21,4701,429],{"class":424},[21,4703,432],{"class":127},[21,4705,435],{"class":127},[21,4707,4708],{"class":23,"line":79},[21,4709,4381],{"class":249},[21,4711,4712,4714,4716,4718,4720,4722,4724,4726],{"class":23,"line":282},[21,4713,364],{"class":127},[21,4715,445],{"class":82},[21,4717,259],{"class":210},[21,4719,262],{"class":127},[21,4721,714],{"class":72},[21,4723,262],{"class":127},[21,4725,270],{"class":127},[21,4727,435],{"class":127},[21,4729,4730,4732,4734,4736,4738,4740],{"class":23,"line":296},[21,4731,4404],{"class":210},[21,4733,124],{"class":127},[21,4735,469],{"class":127},[21,4737,731],{"class":72},[21,4739,262],{"class":127},[21,4741,293],{"class":127},[21,4743,4744,4746,4748],{"class":23,"line":308},[21,4745,4419],{"class":210},[21,4747,124],{"class":127},[21,4749,435],{"class":127},[21,4751,4752,4754,4756],{"class":23,"line":319},[21,4753,4428],{"class":210},[21,4755,124],{"class":127},[21,4757,435],{"class":127},[21,4759,4760,4762,4764,4766,4768,4771,4773,4775],{"class":23,"line":329},[21,4761,4437],{"class":210},[21,4763,124],{"class":127},[21,4765,594],{"class":210},[21,4767,262],{"class":127},[21,4769,4770],{"class":72},"anonymous",[21,4772,262],{"class":127},[21,4774,4451],{"class":210},[21,4776,293],{"class":127},[21,4778,4779,4781,4783,4785,4787],{"class":23,"line":461},[21,4780,4458],{"class":210},[21,4782,124],{"class":127},[21,4784,469],{"class":127},[21,4786,452],{"class":72},[21,4788,316],{"class":127},[21,4790,4791],{"class":23,"line":479},[21,4792,2586],{"class":127},[21,4794,4795],{"class":23,"line":489},[21,4796,4475],{"class":127},[21,4798,4799,4801,4803],{"class":23,"line":499},[21,4800,4480],{"class":210},[21,4802,124],{"class":127},[21,4804,435],{"class":127},[21,4806,4807,4809,4811,4813,4815],{"class":23,"line":516},[21,4808,4489],{"class":127},[21,4810,3968],{"class":210},[21,4812,262],{"class":127},[21,4814,124],{"class":127},[21,4816,435],{"class":127},[21,4818,4819,4821,4823,4825,4827,4829],{"class":23,"line":533},[21,4820,4502],{"class":210},[21,4822,124],{"class":127},[21,4824,128],{"class":127},[21,4826,762],{"class":72},[21,4828,221],{"class":127},[21,4830,293],{"class":127},[21,4832,4833,4835,4837,4839,4841],{"class":23,"line":539},[21,4834,4517],{"class":210},[21,4836,124],{"class":127},[21,4838,469],{"class":127},[21,4840,777],{"class":72},[21,4842,316],{"class":127},[21,4844,4845],{"class":23,"line":545},[21,4846,4530],{"class":127},[21,4848,4849],{"class":23,"line":556},[21,4850,4535],{"class":127},[21,4852,4853,4855],{"class":23,"line":562},[21,4854,4540],{"class":127},[21,4856,2488],{"class":210},[21,4858,4859,4861],{"class":23,"line":568},[21,4860,2093],{"class":127},[21,4862,332],{"class":249},[29,4864,4865],{},"Now we need to define the anonymous role in the app.js run function, so the complete permission block will look like this.",[11,4867,4869],{"className":240,"code":4868,"language":242,"meta":16,"style":16},"\u002F\u002F Define anonymous role\nPermission.defineRole('anonymous', function (stateParams) {\n  \u002F\u002F If the returned value is *truthy* then the user has the role, otherwise they don't\n  \u002F\u002F var User = JSON.parse(localStorage.getItem('user'));\n  \u002F\u002F console.log(\"anonymous \", $auth.isAuthenticated());\n  if (!$auth.isAuthenticated()) {\n    return true; \u002F\u002F Is anonymous\n  }\n  return false;\n}).defineRole('isloggedin', function (stateParams) {\n  \u002F\u002F If the returned value is *truthy* then the user has the role, otherwise they don't\n  \u002F\u002F console.log(\"isloggedin \", $auth.isAuthenticated());\n  if ($auth.isAuthenticated()) {\n    return true; \u002F\u002F Is loggedin\n  }\n  return false;\n});\n",[18,4870,4871,4876,4904,4908,4913,4918,4937,4948,4952,4960,4990,4994,4998,5014,5024,5028,5036],{"__ignoreMap":16},[21,4872,4873],{"class":23,"line":24},[21,4874,4875],{"class":278},"\u002F\u002F Define anonymous role\n",[21,4877,4878,4880,4882,4884,4886,4888,4890,4892,4894,4896,4898,4900,4902],{"class":23,"line":79},[21,4879,4564],{"class":249},[21,4881,253],{"class":127},[21,4883,4569],{"class":82},[21,4885,259],{"class":249},[21,4887,262],{"class":127},[21,4889,4770],{"class":72},[21,4891,262],{"class":127},[21,4893,270],{"class":127},[21,4895,606],{"class":214},[21,4897,421],{"class":127},[21,4899,4586],{"class":424},[21,4901,432],{"class":127},[21,4903,435],{"class":127},[21,4905,4906],{"class":23,"line":282},[21,4907,4595],{"class":278},[21,4909,4910],{"class":23,"line":296},[21,4911,4912],{"class":278},"  \u002F\u002F var User = JSON.parse(localStorage.getItem('user'));\n",[21,4914,4915],{"class":23,"line":308},[21,4916,4917],{"class":278},"  \u002F\u002F console.log(\"anonymous \", $auth.isAuthenticated());\n",[21,4919,4920,4922,4924,4927,4929,4931,4933,4935],{"class":23,"line":319},[21,4921,4606],{"class":4605},[21,4923,421],{"class":210},[21,4925,4926],{"class":127},"!",[21,4928,2131],{"class":249},[21,4930,253],{"class":127},[21,4932,4615],{"class":82},[21,4934,4618],{"class":210},[21,4936,4621],{"class":127},[21,4938,4939,4941,4943,4945],{"class":23,"line":329},[21,4940,4626],{"class":4605},[21,4942,2517],{"class":2222},[21,4944,4631],{"class":127},[21,4946,4947],{"class":278}," \u002F\u002F Is anonymous\n",[21,4949,4950],{"class":23,"line":461},[21,4951,4639],{"class":127},[21,4953,4954,4956,4958],{"class":23,"line":479},[21,4955,4644],{"class":4605},[21,4957,2223],{"class":2222},[21,4959,553],{"class":127},[21,4961,4962,4964,4966,4968,4970,4972,4974,4976,4978,4980,4982,4984,4986,4988],{"class":23,"line":489},[21,4963,2093],{"class":127},[21,4965,432],{"class":249},[21,4967,253],{"class":127},[21,4969,4569],{"class":82},[21,4971,259],{"class":249},[21,4973,262],{"class":127},[21,4975,4446],{"class":72},[21,4977,262],{"class":127},[21,4979,270],{"class":127},[21,4981,606],{"class":214},[21,4983,421],{"class":127},[21,4985,4586],{"class":424},[21,4987,432],{"class":127},[21,4989,435],{"class":127},[21,4991,4992],{"class":23,"line":499},[21,4993,4595],{"class":278},[21,4995,4996],{"class":23,"line":516},[21,4997,4600],{"class":278},[21,4999,5000,5002,5004,5006,5008,5010,5012],{"class":23,"line":533},[21,5001,4606],{"class":4605},[21,5003,421],{"class":210},[21,5005,2131],{"class":249},[21,5007,253],{"class":127},[21,5009,4615],{"class":82},[21,5011,4618],{"class":210},[21,5013,4621],{"class":127},[21,5015,5016,5018,5020,5022],{"class":23,"line":539},[21,5017,4626],{"class":4605},[21,5019,2517],{"class":2222},[21,5021,4631],{"class":127},[21,5023,4634],{"class":278},[21,5025,5026],{"class":23,"line":545},[21,5027,4639],{"class":127},[21,5029,5030,5032,5034],{"class":23,"line":556},[21,5031,4644],{"class":4605},[21,5033,2223],{"class":2222},[21,5035,553],{"class":127},[21,5037,5038,5040,5042],{"class":23,"line":562},[21,5039,2093],{"class":127},[21,5041,432],{"class":249},[21,5043,553],{"class":127},[29,5045,5046],{},"Now Try going to the jokes route without login, you will be redirected to the auth route also login and then try to open the auth route you will be redirected to the jokes route.",[44,5048,5050],{"id":5049},"post-update-delete-request","Post, Update, Delete Request",[29,5052,5053],{},"For using Post, Update and Delete Request. Update the view_jokes\u002Fjokes.html code as follows.",[11,5055,5057],{"className":198,"code":5056,"language":200,"meta":16,"style":16},"\u003Cdiv class=\"col-sm-6 col-sm-offset-3\">\n  \u003Cdiv class=\"row\">\n    \u003Cdiv class=\"col-sm-12\">\n      \u003Cdiv class=\"input-group\">\n        \u003Cinput\n          type=\"text\"\n          class=\"form-control\"\n          placeholder=\"Add new joke..\"\n          ng-model=\"jokes.joke\"\n        \u002F>\n        \u003Cspan class=\"input-group-btn\">\n          \u003Cbutton\n            class=\"btn btn-default\"\n            type=\"button\"\n            ng-click=\"jokes.addJoke()\"\n          >\n            Add!\n          \u003C\u002Fbutton>\n        \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003C!-- \u002Finput-group -->\n    \u003C\u002Fdiv>\n    \u003C!-- \u002F.col-lg-6 -->\n  \u003C\u002Fdiv>\n  \u003Cbr \u002F>\n  \u003Cdiv>\n    \u003Cul class=\"list-group\">\n      \u003Cli class=\"list-group-item\" ng-repeat=\"joke in jokes.jokes\">\n        \u003Cspan ng-hide=\"editEnabled\">\n          {{joke.joke}}\n          \u003Ca href=\"#\" ng-click=\"editEnabled=!editEnabled\"\n            >\u003Cspan class=\"glyphicon glyphicon-pencil\">\u003C\u002Fspan\n          >\u003C\u002Fa>\n        \u003C\u002Fspan>\n        \u003Cspan ng-show=\"editEnabled\">\n          \u003Cinput ng-model=\"joke.joke\" \u002F>\n          \u003Ca\n            href=\"#\"\n            ng-click=\"editEnabled=!editEnabled; jokes.updateJoke(joke)\"\n            >\u003Cspan class=\"glyphicon glyphicon-ok\">\u003C\u002Fspan\n          >\u003C\u002Fa>\n        \u003C\u002Fspan>\n        \u003C!-- \u003Ch4>{{joke.joke}}\u003C\u002Fh4> -->\n        \u003Cspan\n          style=\"cursor: pointer;\"\n          class=\"glyphicon glyphicon-trash\"\n          ng-click=\"jokes.deleteJoke($index, joke.joke_id)\"\n        >\u003C\u002Fspan>\n        \u003Ch5>{{joke.submitted_by}}\u003C\u002Fh5>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n    \u003Cdiv class=\"alert alert-danger\" ng-if=\"jokes.error\">\n      \u003Cstrong>There was an error: \u003C\u002Fstrong> {{jokes.error}} \u003Cbr \u002F>Please go back\n      and login again...\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[18,5058,5059,5077,5095,5114,5133,5139,5152,5164,5178,5192,5197,5216,5222,5236,5249,5263,5268,5273,5281,5289,5297,5302,5310,5315,5323,5332,5340,5358,5386,5406,5411,5438,5460,5469,5477,5495,5516,5522,5535,5548,5569,5577,5585,5590,5596,5609,5622,5636,5645,5661,5669,5677,5705,5731,5735,5743,5751],{"__ignoreMap":16},[21,5060,5061,5063,5065,5067,5069,5071,5073,5075],{"class":23,"line":24},[21,5062,207],{"class":127},[21,5064,1044],{"class":210},[21,5066,1047],{"class":214},[21,5068,218],{"class":127},[21,5070,221],{"class":127},[21,5072,2636],{"class":72},[21,5074,221],{"class":127},[21,5076,234],{"class":127},[21,5078,5079,5081,5083,5085,5087,5089,5091,5093],{"class":23,"line":79},[21,5080,1063],{"class":127},[21,5082,1044],{"class":210},[21,5084,1047],{"class":214},[21,5086,218],{"class":127},[21,5088,221],{"class":127},[21,5090,1074],{"class":72},[21,5092,221],{"class":127},[21,5094,234],{"class":127},[21,5096,5097,5099,5101,5103,5105,5107,5110,5112],{"class":23,"line":282},[21,5098,1083],{"class":127},[21,5100,1044],{"class":210},[21,5102,1047],{"class":214},[21,5104,218],{"class":127},[21,5106,221],{"class":127},[21,5108,5109],{"class":72},"col-sm-12",[21,5111,221],{"class":127},[21,5113,234],{"class":127},[21,5115,5116,5118,5120,5122,5124,5126,5129,5131],{"class":23,"line":296},[21,5117,1103],{"class":127},[21,5119,1044],{"class":210},[21,5121,1047],{"class":214},[21,5123,218],{"class":127},[21,5125,221],{"class":127},[21,5127,5128],{"class":72},"input-group",[21,5130,221],{"class":127},[21,5132,234],{"class":127},[21,5134,5135,5137],{"class":23,"line":308},[21,5136,1123],{"class":127},[21,5138,1313],{"class":210},[21,5140,5141,5143,5145,5147,5150],{"class":23,"line":319},[21,5142,3255],{"class":214},[21,5144,218],{"class":127},[21,5146,221],{"class":127},[21,5148,5149],{"class":72},"text",[21,5151,134],{"class":127},[21,5153,5154,5156,5158,5160,5162],{"class":23,"line":329},[21,5155,3268],{"class":214},[21,5157,218],{"class":127},[21,5159,221],{"class":127},[21,5161,1339],{"class":72},[21,5163,134],{"class":127},[21,5165,5166,5169,5171,5173,5176],{"class":23,"line":461},[21,5167,5168],{"class":214},"          placeholder",[21,5170,218],{"class":127},[21,5172,221],{"class":127},[21,5174,5175],{"class":72},"Add new joke..",[21,5177,134],{"class":127},[21,5179,5180,5183,5185,5187,5190],{"class":23,"line":479},[21,5181,5182],{"class":214},"          ng-model",[21,5184,218],{"class":127},[21,5186,221],{"class":127},[21,5188,5189],{"class":72},"jokes.joke",[21,5191,134],{"class":127},[21,5193,5194],{"class":23,"line":489},[21,5195,5196],{"class":127},"        \u002F>\n",[21,5198,5199,5201,5203,5205,5207,5209,5212,5214],{"class":23,"line":499},[21,5200,1123],{"class":127},[21,5202,21],{"class":210},[21,5204,1047],{"class":214},[21,5206,218],{"class":127},[21,5208,221],{"class":127},[21,5210,5211],{"class":72},"input-group-btn",[21,5213,221],{"class":127},[21,5215,234],{"class":127},[21,5217,5218,5220],{"class":23,"line":516},[21,5219,1190],{"class":127},[21,5221,1653],{"class":210},[21,5223,5224,5227,5229,5231,5234],{"class":23,"line":533},[21,5225,5226],{"class":214},"            class",[21,5228,218],{"class":127},[21,5230,221],{"class":127},[21,5232,5233],{"class":72},"btn btn-default",[21,5235,134],{"class":127},[21,5237,5238,5241,5243,5245,5247],{"class":23,"line":539},[21,5239,5240],{"class":214},"            type",[21,5242,218],{"class":127},[21,5244,221],{"class":127},[21,5246,1717],{"class":72},[21,5248,134],{"class":127},[21,5250,5251,5254,5256,5258,5261],{"class":23,"line":545},[21,5252,5253],{"class":214},"            ng-click",[21,5255,218],{"class":127},[21,5257,221],{"class":127},[21,5259,5260],{"class":72},"jokes.addJoke()",[21,5262,134],{"class":127},[21,5264,5265],{"class":23,"line":556},[21,5266,5267],{"class":127},"          >\n",[21,5269,5270],{"class":23,"line":562},[21,5271,5272],{"class":249},"            Add!\n",[21,5274,5275,5277,5279],{"class":23,"line":568},[21,5276,1790],{"class":127},[21,5278,1717],{"class":210},[21,5280,234],{"class":127},[21,5282,5283,5285,5287],{"class":23,"line":575},[21,5284,1800],{"class":127},[21,5286,21],{"class":210},[21,5288,234],{"class":127},[21,5290,5291,5293,5295],{"class":23,"line":812},[21,5292,1810],{"class":127},[21,5294,1044],{"class":210},[21,5296,234],{"class":127},[21,5298,5299],{"class":23,"line":1399},[21,5300,5301],{"class":278},"      \u003C!-- \u002Finput-group -->\n",[21,5303,5304,5306,5308],{"class":23,"line":1409},[21,5305,1820],{"class":127},[21,5307,1044],{"class":210},[21,5309,234],{"class":127},[21,5311,5312],{"class":23,"line":1419},[21,5313,5314],{"class":278},"    \u003C!-- \u002F.col-lg-6 -->\n",[21,5316,5317,5319,5321],{"class":23,"line":1438},[21,5318,1830],{"class":127},[21,5320,1044],{"class":210},[21,5322,234],{"class":127},[21,5324,5325,5327,5329],{"class":23,"line":1466},[21,5326,1063],{"class":127},[21,5328,2807],{"class":210},[21,5330,5331],{"class":127}," \u002F>\n",[21,5333,5334,5336,5338],{"class":23,"line":1478},[21,5335,1063],{"class":127},[21,5337,1044],{"class":210},[21,5339,234],{"class":127},[21,5341,5342,5344,5346,5348,5350,5352,5354,5356],{"class":23,"line":1483},[21,5343,1083],{"class":127},[21,5345,2655],{"class":210},[21,5347,1047],{"class":214},[21,5349,218],{"class":127},[21,5351,221],{"class":127},[21,5353,2664],{"class":72},[21,5355,221],{"class":127},[21,5357,234],{"class":127},[21,5359,5360,5362,5364,5366,5368,5370,5372,5374,5376,5378,5380,5382,5384],{"class":23,"line":1502},[21,5361,1103],{"class":127},[21,5363,2675],{"class":210},[21,5365,1047],{"class":214},[21,5367,218],{"class":127},[21,5369,221],{"class":127},[21,5371,2684],{"class":72},[21,5373,221],{"class":127},[21,5375,2689],{"class":214},[21,5377,218],{"class":127},[21,5379,221],{"class":127},[21,5381,2696],{"class":72},[21,5383,221],{"class":127},[21,5385,234],{"class":127},[21,5387,5388,5390,5392,5395,5397,5399,5402,5404],{"class":23,"line":1509},[21,5389,1123],{"class":127},[21,5391,21],{"class":210},[21,5393,5394],{"class":214}," ng-hide",[21,5396,218],{"class":127},[21,5398,221],{"class":127},[21,5400,5401],{"class":72},"editEnabled",[21,5403,221],{"class":127},[21,5405,234],{"class":127},[21,5407,5408],{"class":23,"line":1523},[21,5409,5410],{"class":249},"          {{joke.joke}}\n",[21,5412,5413,5415,5417,5419,5421,5423,5425,5427,5429,5431,5433,5436],{"class":23,"line":1536},[21,5414,1190],{"class":127},[21,5416,33],{"class":210},[21,5418,3447],{"class":214},[21,5420,218],{"class":127},[21,5422,221],{"class":127},[21,5424,3708],{"class":72},[21,5426,221],{"class":127},[21,5428,3850],{"class":214},[21,5430,218],{"class":127},[21,5432,221],{"class":127},[21,5434,5435],{"class":72},"editEnabled=!editEnabled",[21,5437,134],{"class":127},[21,5439,5440,5443,5445,5447,5449,5451,5454,5456,5458],{"class":23,"line":1549},[21,5441,5442],{"class":127},"            >\u003C",[21,5444,21],{"class":210},[21,5446,1047],{"class":214},[21,5448,218],{"class":127},[21,5450,221],{"class":127},[21,5452,5453],{"class":72},"glyphicon glyphicon-pencil",[21,5455,221],{"class":127},[21,5457,229],{"class":127},[21,5459,3805],{"class":210},[21,5461,5462,5465,5467],{"class":23,"line":1562},[21,5463,5464],{"class":127},"          >\u003C\u002F",[21,5466,33],{"class":210},[21,5468,234],{"class":127},[21,5470,5471,5473,5475],{"class":23,"line":1571},[21,5472,1800],{"class":127},[21,5474,21],{"class":210},[21,5476,234],{"class":127},[21,5478,5479,5481,5483,5485,5487,5489,5491,5493],{"class":23,"line":1585},[21,5480,1123],{"class":127},[21,5482,21],{"class":210},[21,5484,3628],{"class":214},[21,5486,218],{"class":127},[21,5488,221],{"class":127},[21,5490,5401],{"class":72},[21,5492,221],{"class":127},[21,5494,234],{"class":127},[21,5496,5497,5499,5502,5505,5507,5509,5512,5514],{"class":23,"line":1590},[21,5498,1190],{"class":127},[21,5500,5501],{"class":210},"input",[21,5503,5504],{"class":214}," ng-model",[21,5506,218],{"class":127},[21,5508,221],{"class":127},[21,5510,5511],{"class":72},"joke.joke",[21,5513,221],{"class":127},[21,5515,5331],{"class":127},[21,5517,5518,5520],{"class":23,"line":1599},[21,5519,1190],{"class":127},[21,5521,3696],{"class":210},[21,5523,5524,5527,5529,5531,5533],{"class":23,"line":1608},[21,5525,5526],{"class":214},"            href",[21,5528,218],{"class":127},[21,5530,221],{"class":127},[21,5532,3708],{"class":72},[21,5534,134],{"class":127},[21,5536,5537,5539,5541,5543,5546],{"class":23,"line":1628},[21,5538,5253],{"class":214},[21,5540,218],{"class":127},[21,5542,221],{"class":127},[21,5544,5545],{"class":72},"editEnabled=!editEnabled; jokes.updateJoke(joke)",[21,5547,134],{"class":127},[21,5549,5550,5552,5554,5556,5558,5560,5563,5565,5567],{"class":23,"line":1648},[21,5551,5442],{"class":127},[21,5553,21],{"class":210},[21,5555,1047],{"class":214},[21,5557,218],{"class":127},[21,5559,221],{"class":127},[21,5561,5562],{"class":72},"glyphicon glyphicon-ok",[21,5564,221],{"class":127},[21,5566,229],{"class":127},[21,5568,3805],{"class":210},[21,5570,5571,5573,5575],{"class":23,"line":1656},[21,5572,5464],{"class":127},[21,5574,33],{"class":210},[21,5576,234],{"class":127},[21,5578,5579,5581,5583],{"class":23,"line":1670},[21,5580,1800],{"class":127},[21,5582,21],{"class":210},[21,5584,234],{"class":127},[21,5586,5587],{"class":23,"line":1684},[21,5588,5589],{"class":278},"        \u003C!-- \u003Ch4>{{joke.joke}}\u003C\u002Fh4> -->\n",[21,5591,5592,5594],{"class":23,"line":1699},[21,5593,1123],{"class":127},[21,5595,3805],{"class":210},[21,5597,5598,5601,5603,5605,5607],{"class":23,"line":1705},[21,5599,5600],{"class":214},"          style",[21,5602,218],{"class":127},[21,5604,221],{"class":127},[21,5606,3869],{"class":72},[21,5608,134],{"class":127},[21,5610,5611,5613,5615,5617,5620],{"class":23,"line":1711},[21,5612,3268],{"class":214},[21,5614,218],{"class":127},[21,5616,221],{"class":127},[21,5618,5619],{"class":72},"glyphicon glyphicon-trash",[21,5621,134],{"class":127},[21,5623,5624,5627,5629,5631,5634],{"class":23,"line":1722},[21,5625,5626],{"class":214},"          ng-click",[21,5628,218],{"class":127},[21,5630,221],{"class":127},[21,5632,5633],{"class":72},"jokes.deleteJoke($index, joke.joke_id)",[21,5635,134],{"class":127},[21,5637,5638,5641,5643],{"class":23,"line":1754},[21,5639,5640],{"class":127},"        >\u003C\u002F",[21,5642,21],{"class":210},[21,5644,234],{"class":127},[21,5646,5647,5649,5651,5653,5655,5657,5659],{"class":23,"line":1760},[21,5648,1123],{"class":127},[21,5650,2707],{"class":210},[21,5652,1152],{"class":127},[21,5654,2729],{"class":249},[21,5656,1158],{"class":127},[21,5658,2707],{"class":210},[21,5660,234],{"class":127},[21,5662,5663,5665,5667],{"class":23,"line":1769},[21,5664,1810],{"class":127},[21,5666,2675],{"class":210},[21,5668,234],{"class":127},[21,5670,5671,5673,5675],{"class":23,"line":1778},[21,5672,1820],{"class":127},[21,5674,2655],{"class":210},[21,5676,234],{"class":127},[21,5678,5679,5681,5683,5685,5687,5689,5691,5693,5695,5697,5699,5701,5703],{"class":23,"line":1787},[21,5680,1083],{"class":127},[21,5682,1044],{"class":210},[21,5684,1047],{"class":214},[21,5686,218],{"class":127},[21,5688,221],{"class":127},[21,5690,2766],{"class":72},[21,5692,221],{"class":127},[21,5694,2771],{"class":214},[21,5696,218],{"class":127},[21,5698,221],{"class":127},[21,5700,2778],{"class":72},[21,5702,221],{"class":127},[21,5704,234],{"class":127},[21,5706,5707,5709,5711,5713,5715,5717,5719,5721,5723,5725,5727,5729],{"class":23,"line":1797},[21,5708,1103],{"class":127},[21,5710,1142],{"class":210},[21,5712,1152],{"class":127},[21,5714,2793],{"class":249},[21,5716,1158],{"class":127},[21,5718,1142],{"class":210},[21,5720,1152],{"class":127},[21,5722,2802],{"class":249},[21,5724,207],{"class":127},[21,5726,2807],{"class":210},[21,5728,2810],{"class":127},[21,5730,2813],{"class":249},[21,5732,5733],{"class":23,"line":1807},[21,5734,2818],{"class":249},[21,5736,5737,5739,5741],{"class":23,"line":1817},[21,5738,1820],{"class":127},[21,5740,1044],{"class":210},[21,5742,234],{"class":127},[21,5744,5745,5747,5749],{"class":23,"line":1827},[21,5746,1830],{"class":127},[21,5748,1044],{"class":210},[21,5750,234],{"class":127},[21,5752,5753,5755,5757],{"class":23,"line":1837},[21,5754,1158],{"class":127},[21,5756,1044],{"class":210},[21,5758,234],{"class":127},[29,5760,5761],{},"Now open the view_jokes\u002Fjokes.js and update the controller code as follows:",[11,5763,5765],{"className":240,"code":5764,"language":242,"meta":16,"style":16},".controller('JokesCtrl', ['$http', '$auth', '$rootScope','$state', '$q' , function($http, $auth, $rootScope, $state, $q) {\n\n  var vm = this;\n\n  vm.jokes = [];\n  vm.error;\n  vm.joke;\n\n  $http.get('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes').success(function(jokes){\n    console.log(jokes);\n    vm.jokes = jokes.data;\n    }).error(function(error){\n      vm.error = error;\n    })\n\n\n    vm.addJoke = function() {\n\n        $http.post('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes', {\n            body: vm.joke,\n            user_id: $rootScope.currentUser.id\n        }).success(function(response) {\n            \u002F\u002F console.log(vm.jokes);\n            \u002F\u002F vm.jokes.push(response.data);\n            vm.jokes.unshift(response.data);\n            console.log(vm.jokes);\n            vm.joke = '';\n            \u002F\u002F alert(data.message);\n            \u002F\u002F alert(\"Joke Created Successfully\");\n        }).error(function(){\n          console.log(\"error\");\n        });\n    };\n\n    vm.updateJoke = function(joke){\n      console.log(joke);\n      $http.put('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes\u002F' + joke.joke_id, {\n            body: joke.joke,\n            user_id: $rootScope.currentUser.id\n        }).success(function(response) {\n            \u002F\u002F alert(\"Joke Updated Successfully\");\n        }).error(function(){\n          console.log(\"error\");\n        });\n    }\n\n\n    vm.deleteJoke = function(index, jokeId){\n      console.log(index, jokeId);\n\n        $http.delete('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes\u002F' + jokeId)\n            .success(function() {\n                vm.jokes.splice(index, 1);\n            });;\n    }\n\n\n}]);\n",[18,5766,5767,5851,5855,5865,5869,5883,5893,5903,5907,5939,5955,5973,5993,6007,6013,6017,6021,6038,6042,6064,6079,6097,6120,6125,6130,6156,6177,6192,6197,6202,6218,6239,6247,6252,6256,6275,6292,6326,6340,6356,6378,6383,6399,6419,6427,6431,6435,6439,6464,6484,6488,6511,6526,6554,6563,6567,6571,6575],{"__ignoreMap":16},[21,5768,5769,5771,5773,5775,5777,5779,5781,5783,5785,5787,5789,5791,5793,5795,5797,5799,5801,5803,5805,5807,5809,5811,5813,5815,5817,5819,5821,5823,5825,5827,5829,5831,5833,5835,5837,5839,5841,5843,5845,5847,5849],{"class":23,"line":24},[21,5770,253],{"class":127},[21,5772,580],{"class":82},[21,5774,259],{"class":249},[21,5776,262],{"class":127},[21,5778,823],{"class":72},[21,5780,262],{"class":127},[21,5782,270],{"class":127},[21,5784,594],{"class":249},[21,5786,262],{"class":127},[21,5788,2149],{"class":72},[21,5790,262],{"class":127},[21,5792,270],{"class":127},[21,5794,469],{"class":127},[21,5796,2131],{"class":72},[21,5798,262],{"class":127},[21,5800,270],{"class":127},[21,5802,469],{"class":127},[21,5804,599],{"class":72},[21,5806,262],{"class":127},[21,5808,270],{"class":127},[21,5810,262],{"class":127},[21,5812,2140],{"class":72},[21,5814,262],{"class":127},[21,5816,270],{"class":127},[21,5818,469],{"class":127},[21,5820,2905],{"class":72},[21,5822,262],{"class":127},[21,5824,2910],{"class":127},[21,5826,606],{"class":214},[21,5828,259],{"class":127},[21,5830,2149],{"class":424},[21,5832,270],{"class":127},[21,5834,2921],{"class":424},[21,5836,270],{"class":127},[21,5838,2182],{"class":424},[21,5840,270],{"class":127},[21,5842,2172],{"class":424},[21,5844,270],{"class":127},[21,5846,2934],{"class":424},[21,5848,432],{"class":127},[21,5850,435],{"class":127},[21,5852,5853],{"class":23,"line":79},[21,5854,572],{"emptyLinePlaceholder":571},[21,5856,5857,5859,5861,5863],{"class":23,"line":282},[21,5858,2947],{"class":214},[21,5860,2198],{"class":249},[21,5862,2052],{"class":127},[21,5864,2203],{"class":127},[21,5866,5867],{"class":23,"line":296},[21,5868,572],{"emptyLinePlaceholder":571},[21,5870,5871,5873,5875,5877,5879,5881],{"class":23,"line":308},[21,5872,2962],{"class":249},[21,5874,253],{"class":127},[21,5876,714],{"class":249},[21,5878,2052],{"class":127},[21,5880,2971],{"class":210},[21,5882,553],{"class":127},[21,5884,5885,5887,5889,5891],{"class":23,"line":319},[21,5886,2962],{"class":249},[21,5888,253],{"class":127},[21,5890,2496],{"class":249},[21,5892,553],{"class":127},[21,5894,5895,5897,5899,5901],{"class":23,"line":329},[21,5896,2962],{"class":249},[21,5898,253],{"class":127},[21,5900,2992],{"class":249},[21,5902,553],{"class":127},[21,5904,5905],{"class":23,"line":461},[21,5906,572],{"emptyLinePlaceholder":571},[21,5908,5909,5911,5913,5915,5917,5919,5921,5923,5925,5927,5929,5931,5933,5935,5937],{"class":23,"line":479},[21,5910,3003],{"class":249},[21,5912,253],{"class":127},[21,5914,2352],{"class":82},[21,5916,259],{"class":210},[21,5918,262],{"class":127},[21,5920,3014],{"class":72},[21,5922,262],{"class":127},[21,5924,432],{"class":210},[21,5926,253],{"class":127},[21,5928,2368],{"class":82},[21,5930,259],{"class":210},[21,5932,2338],{"class":214},[21,5934,259],{"class":127},[21,5936,714],{"class":424},[21,5938,2380],{"class":127},[21,5940,5941,5943,5945,5947,5949,5951,5953],{"class":23,"line":489},[21,5942,3037],{"class":249},[21,5944,253],{"class":127},[21,5946,2553],{"class":82},[21,5948,259],{"class":210},[21,5950,714],{"class":249},[21,5952,432],{"class":210},[21,5954,553],{"class":127},[21,5956,5957,5959,5961,5963,5965,5967,5969,5971],{"class":23,"line":499},[21,5958,3054],{"class":249},[21,5960,253],{"class":127},[21,5962,714],{"class":249},[21,5964,2052],{"class":127},[21,5966,3063],{"class":249},[21,5968,253],{"class":127},[21,5970,2537],{"class":249},[21,5972,553],{"class":127},[21,5974,5975,5977,5979,5981,5983,5985,5987,5989,5991],{"class":23,"line":516},[21,5976,3074],{"class":127},[21,5978,432],{"class":210},[21,5980,253],{"class":127},[21,5982,2496],{"class":82},[21,5984,259],{"class":210},[21,5986,2338],{"class":214},[21,5988,259],{"class":127},[21,5990,2496],{"class":424},[21,5992,2380],{"class":127},[21,5994,5995,5997,5999,6001,6003,6005],{"class":23,"line":533},[21,5996,3095],{"class":249},[21,5998,253],{"class":127},[21,6000,2496],{"class":249},[21,6002,2052],{"class":127},[21,6004,2532],{"class":249},[21,6006,553],{"class":127},[21,6008,6009,6011],{"class":23,"line":539},[21,6010,3074],{"class":127},[21,6012,2488],{"class":210},[21,6014,6015],{"class":23,"line":545},[21,6016,572],{"emptyLinePlaceholder":571},[21,6018,6019],{"class":23,"line":556},[21,6020,572],{"emptyLinePlaceholder":571},[21,6022,6023,6025,6027,6030,6032,6034,6036],{"class":23,"line":562},[21,6024,3054],{"class":249},[21,6026,253],{"class":127},[21,6028,6029],{"class":82},"addJoke",[21,6031,2052],{"class":127},[21,6033,606],{"class":214},[21,6035,2256],{"class":127},[21,6037,435],{"class":127},[21,6039,6040],{"class":23,"line":568},[21,6041,572],{"emptyLinePlaceholder":571},[21,6043,6044,6047,6049,6052,6054,6056,6058,6060,6062],{"class":23,"line":575},[21,6045,6046],{"class":249},"        $http",[21,6048,253],{"class":127},[21,6050,6051],{"class":82},"post",[21,6053,259],{"class":210},[21,6055,262],{"class":127},[21,6057,3014],{"class":72},[21,6059,262],{"class":127},[21,6061,270],{"class":127},[21,6063,435],{"class":127},[21,6065,6066,6069,6071,6073,6075,6077],{"class":23,"line":812},[21,6067,6068],{"class":210},"            body",[21,6070,124],{"class":127},[21,6072,2198],{"class":249},[21,6074,253],{"class":127},[21,6076,2992],{"class":249},[21,6078,293],{"class":127},[21,6080,6081,6084,6086,6088,6090,6092,6094],{"class":23,"line":1399},[21,6082,6083],{"class":210},"            user_id",[21,6085,124],{"class":127},[21,6087,2182],{"class":249},[21,6089,253],{"class":127},[21,6091,2447],{"class":249},[21,6093,253],{"class":127},[21,6095,6096],{"class":249},"id\n",[21,6098,6099,6102,6104,6106,6108,6110,6112,6114,6116,6118],{"class":23,"line":1409},[21,6100,6101],{"class":127},"        }",[21,6103,432],{"class":210},[21,6105,253],{"class":127},[21,6107,2368],{"class":82},[21,6109,259],{"class":210},[21,6111,2338],{"class":214},[21,6113,259],{"class":127},[21,6115,2377],{"class":424},[21,6117,432],{"class":127},[21,6119,435],{"class":127},[21,6121,6122],{"class":23,"line":1419},[21,6123,6124],{"class":278},"            \u002F\u002F console.log(vm.jokes);\n",[21,6126,6127],{"class":23,"line":1438},[21,6128,6129],{"class":278},"            \u002F\u002F vm.jokes.push(response.data);\n",[21,6131,6132,6135,6137,6139,6141,6144,6146,6148,6150,6152,6154],{"class":23,"line":1466},[21,6133,6134],{"class":249},"            vm",[21,6136,253],{"class":127},[21,6138,714],{"class":249},[21,6140,253],{"class":127},[21,6142,6143],{"class":82},"unshift",[21,6145,259],{"class":210},[21,6147,2377],{"class":249},[21,6149,253],{"class":127},[21,6151,2537],{"class":249},[21,6153,432],{"class":210},[21,6155,553],{"class":127},[21,6157,6158,6161,6163,6165,6167,6169,6171,6173,6175],{"class":23,"line":1478},[21,6159,6160],{"class":249},"            console",[21,6162,253],{"class":127},[21,6164,2553],{"class":82},[21,6166,259],{"class":210},[21,6168,2558],{"class":249},[21,6170,253],{"class":127},[21,6172,714],{"class":249},[21,6174,432],{"class":210},[21,6176,553],{"class":127},[21,6178,6179,6181,6183,6185,6187,6190],{"class":23,"line":1483},[21,6180,6134],{"class":249},[21,6182,253],{"class":127},[21,6184,2992],{"class":249},[21,6186,2052],{"class":127},[21,6188,6189],{"class":127}," ''",[21,6191,553],{"class":127},[21,6193,6194],{"class":23,"line":1502},[21,6195,6196],{"class":278},"            \u002F\u002F alert(data.message);\n",[21,6198,6199],{"class":23,"line":1509},[21,6200,6201],{"class":278},"            \u002F\u002F alert(\"Joke Created Successfully\");\n",[21,6203,6204,6206,6208,6210,6212,6214,6216],{"class":23,"line":1523},[21,6205,6101],{"class":127},[21,6207,432],{"class":210},[21,6209,253],{"class":127},[21,6211,2496],{"class":82},[21,6213,259],{"class":210},[21,6215,2338],{"class":214},[21,6217,2503],{"class":127},[21,6219,6220,6223,6225,6227,6229,6231,6233,6235,6237],{"class":23,"line":1536},[21,6221,6222],{"class":249},"          console",[21,6224,253],{"class":127},[21,6226,2553],{"class":82},[21,6228,259],{"class":210},[21,6230,221],{"class":127},[21,6232,2496],{"class":72},[21,6234,221],{"class":127},[21,6236,432],{"class":210},[21,6238,553],{"class":127},[21,6240,6241,6243,6245],{"class":23,"line":1549},[21,6242,6101],{"class":127},[21,6244,432],{"class":210},[21,6246,553],{"class":127},[21,6248,6249],{"class":23,"line":1562},[21,6250,6251],{"class":127},"    };\n",[21,6253,6254],{"class":23,"line":1571},[21,6255,572],{"emptyLinePlaceholder":571},[21,6257,6258,6260,6262,6265,6267,6269,6271,6273],{"class":23,"line":1585},[21,6259,3054],{"class":249},[21,6261,253],{"class":127},[21,6263,6264],{"class":82},"updateJoke",[21,6266,2052],{"class":127},[21,6268,606],{"class":214},[21,6270,259],{"class":127},[21,6272,2992],{"class":424},[21,6274,2380],{"class":127},[21,6276,6277,6280,6282,6284,6286,6288,6290],{"class":23,"line":1590},[21,6278,6279],{"class":249},"      console",[21,6281,253],{"class":127},[21,6283,2553],{"class":82},[21,6285,259],{"class":210},[21,6287,2992],{"class":249},[21,6289,432],{"class":210},[21,6291,553],{"class":127},[21,6293,6294,6297,6299,6302,6304,6306,6309,6311,6314,6317,6319,6322,6324],{"class":23,"line":1599},[21,6295,6296],{"class":249},"      $http",[21,6298,253],{"class":127},[21,6300,6301],{"class":82},"put",[21,6303,259],{"class":210},[21,6305,262],{"class":127},[21,6307,6308],{"class":72},"http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes\u002F",[21,6310,262],{"class":127},[21,6312,6313],{"class":127}," +",[21,6315,6316],{"class":249}," joke",[21,6318,253],{"class":127},[21,6320,6321],{"class":249},"joke_id",[21,6323,270],{"class":127},[21,6325,435],{"class":127},[21,6327,6328,6330,6332,6334,6336,6338],{"class":23,"line":1608},[21,6329,6068],{"class":210},[21,6331,124],{"class":127},[21,6333,6316],{"class":249},[21,6335,253],{"class":127},[21,6337,2992],{"class":249},[21,6339,293],{"class":127},[21,6341,6342,6344,6346,6348,6350,6352,6354],{"class":23,"line":1628},[21,6343,6083],{"class":210},[21,6345,124],{"class":127},[21,6347,2182],{"class":249},[21,6349,253],{"class":127},[21,6351,2447],{"class":249},[21,6353,253],{"class":127},[21,6355,6096],{"class":249},[21,6357,6358,6360,6362,6364,6366,6368,6370,6372,6374,6376],{"class":23,"line":1648},[21,6359,6101],{"class":127},[21,6361,432],{"class":210},[21,6363,253],{"class":127},[21,6365,2368],{"class":82},[21,6367,259],{"class":210},[21,6369,2338],{"class":214},[21,6371,259],{"class":127},[21,6373,2377],{"class":424},[21,6375,432],{"class":127},[21,6377,435],{"class":127},[21,6379,6380],{"class":23,"line":1656},[21,6381,6382],{"class":278},"            \u002F\u002F alert(\"Joke Updated Successfully\");\n",[21,6384,6385,6387,6389,6391,6393,6395,6397],{"class":23,"line":1670},[21,6386,6101],{"class":127},[21,6388,432],{"class":210},[21,6390,253],{"class":127},[21,6392,2496],{"class":82},[21,6394,259],{"class":210},[21,6396,2338],{"class":214},[21,6398,2503],{"class":127},[21,6400,6401,6403,6405,6407,6409,6411,6413,6415,6417],{"class":23,"line":1684},[21,6402,6222],{"class":249},[21,6404,253],{"class":127},[21,6406,2553],{"class":82},[21,6408,259],{"class":210},[21,6410,221],{"class":127},[21,6412,2496],{"class":72},[21,6414,221],{"class":127},[21,6416,432],{"class":210},[21,6418,553],{"class":127},[21,6420,6421,6423,6425],{"class":23,"line":1699},[21,6422,6101],{"class":127},[21,6424,432],{"class":210},[21,6426,553],{"class":127},[21,6428,6429],{"class":23,"line":1705},[21,6430,4535],{"class":127},[21,6432,6433],{"class":23,"line":1711},[21,6434,572],{"emptyLinePlaceholder":571},[21,6436,6437],{"class":23,"line":1722},[21,6438,572],{"emptyLinePlaceholder":571},[21,6440,6441,6443,6445,6448,6450,6452,6454,6457,6459,6462],{"class":23,"line":1754},[21,6442,3054],{"class":249},[21,6444,253],{"class":127},[21,6446,6447],{"class":82},"deleteJoke",[21,6449,2052],{"class":127},[21,6451,606],{"class":214},[21,6453,259],{"class":127},[21,6455,6456],{"class":424},"index",[21,6458,270],{"class":127},[21,6460,6461],{"class":424}," jokeId",[21,6463,2380],{"class":127},[21,6465,6466,6468,6470,6472,6474,6476,6478,6480,6482],{"class":23,"line":1760},[21,6467,6279],{"class":249},[21,6469,253],{"class":127},[21,6471,2553],{"class":82},[21,6473,259],{"class":210},[21,6475,6456],{"class":249},[21,6477,270],{"class":127},[21,6479,6461],{"class":249},[21,6481,432],{"class":210},[21,6483,553],{"class":127},[21,6485,6486],{"class":23,"line":1769},[21,6487,572],{"emptyLinePlaceholder":571},[21,6489,6490,6492,6494,6497,6499,6501,6503,6505,6507,6509],{"class":23,"line":1778},[21,6491,6046],{"class":249},[21,6493,253],{"class":127},[21,6495,6496],{"class":82},"delete",[21,6498,259],{"class":210},[21,6500,262],{"class":127},[21,6502,6308],{"class":72},[21,6504,262],{"class":127},[21,6506,6313],{"class":127},[21,6508,6461],{"class":249},[21,6510,2488],{"class":210},[21,6512,6513,6516,6518,6520,6522,6524],{"class":23,"line":1787},[21,6514,6515],{"class":127},"            .",[21,6517,2368],{"class":82},[21,6519,259],{"class":210},[21,6521,2338],{"class":214},[21,6523,2256],{"class":127},[21,6525,435],{"class":127},[21,6527,6528,6531,6533,6535,6537,6540,6542,6544,6546,6550,6552],{"class":23,"line":1797},[21,6529,6530],{"class":249},"                vm",[21,6532,253],{"class":127},[21,6534,714],{"class":249},[21,6536,253],{"class":127},[21,6538,6539],{"class":82},"splice",[21,6541,259],{"class":210},[21,6543,6456],{"class":249},[21,6545,270],{"class":127},[21,6547,6549],{"class":6548},"sbssI"," 1",[21,6551,432],{"class":210},[21,6553,553],{"class":127},[21,6555,6556,6558,6560],{"class":23,"line":1807},[21,6557,2577],{"class":127},[21,6559,432],{"class":210},[21,6561,6562],{"class":127},";;\n",[21,6564,6565],{"class":23,"line":1817},[21,6566,4535],{"class":127},[21,6568,6569],{"class":23,"line":1827},[21,6570,572],{"emptyLinePlaceholder":571},[21,6572,6573],{"class":23,"line":1837},[21,6574,572],{"emptyLinePlaceholder":571},[21,6576,6578,6580,6582],{"class":23,"line":6577},58,[21,6579,2093],{"class":127},[21,6581,618],{"class":249},[21,6583,553],{"class":127},[29,6585,6586],{},[1142,6587,6588],{},"Add Joke",[29,6590,6591],{},[343,6592],{"alt":345,"src":6593},"\u002Fimg\u002F2015-11-13_23-21-35.png",[29,6595,6596],{},[1142,6597,6598],{},"Update Joke",[29,6600,6601],{},[343,6602],{"alt":345,"src":6603},"\u002Fimg\u002F2015-11-13_23-22-35.png",[29,6605,6606],{},[1142,6607,6608],{},"Delete Joke",[29,6610,6611],{},[343,6612],{"alt":345,"src":6613},"\u002Fimg\u002F2015-11-13_23-23-08.png",[44,6615,6617],{"id":6616},"tackling-pagination","Tackling Pagination",[29,6619,6620],{},"Now the last step before completing our app is to add the pagination. We will use a load more button. When we click this button, It will load more jokes. First start by adding the load more button in the view_jokes\u002Fjokes.html as,",[11,6622,6624],{"className":198,"code":6623,"language":200,"meta":16,"style":16},"\u003Cbutton class=\"btn btn-success\" ng-click=\"jokes.loadMore()\" style=\"float:right\">\n  Load More....\n\u003C\u002Fbutton>\n",[18,6625,6626,6667,6672],{"__ignoreMap":16},[21,6627,6628,6630,6632,6634,6636,6638,6641,6643,6645,6647,6649,6652,6654,6656,6658,6660,6663,6665],{"class":23,"line":24},[21,6629,207],{"class":127},[21,6631,1717],{"class":210},[21,6633,1047],{"class":214},[21,6635,218],{"class":127},[21,6637,221],{"class":127},[21,6639,6640],{"class":72},"btn btn-success",[21,6642,221],{"class":127},[21,6644,3850],{"class":214},[21,6646,218],{"class":127},[21,6648,221],{"class":127},[21,6650,6651],{"class":72},"jokes.loadMore()",[21,6653,221],{"class":127},[21,6655,3862],{"class":214},[21,6657,218],{"class":127},[21,6659,221],{"class":127},[21,6661,6662],{"class":72},"float:right",[21,6664,221],{"class":127},[21,6666,234],{"class":127},[21,6668,6669],{"class":23,"line":79},[21,6670,6671],{"class":249},"  Load More....\n",[21,6673,6674,6676,6678],{"class":23,"line":282},[21,6675,1158],{"class":127},[21,6677,1717],{"class":210},[21,6679,234],{"class":127},[29,6681,6682],{},"Now open the view_jokes\u002Fjokes.js and add the following code in the controller,",[11,6684,6686],{"className":240,"code":6685,"language":242,"meta":16,"style":16},"\u002F\u002F $http.get('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes').success(function(jokes){\n\u002F\u002F   console.log(jokes);\n\u002F\u002F   vm.jokes = jokes.data;\n\u002F\u002F   }).error(function(error){\n\u002F\u002F     vm.error = error;\n\u002F\u002F   })\n\nvm.lastpage = 1;\nvm.init = function () {\n  vm.lastpage = 1;\n  $http({\n    url: 'http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes',\n    method: 'GET',\n    params: { page: vm.lastpage },\n  }).success(function (jokes, status, headers, config) {\n    vm.jokes = jokes.data;\n    vm.currentpage = jokes.current_page;\n  });\n};\nvm.init();\n\nvm.loadMore = function () {\n  vm.lastpage += 1;\n  $http({\n    url: 'http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes',\n    method: 'GET',\n    params: { page: vm.lastpage },\n  }).success(function (jokes, status, headers, config) {\n    vm.jokes = vm.jokes.concat(jokes.data);\n  });\n};\n",[18,6687,6688,6693,6698,6703,6708,6713,6718,6722,6737,6754,6769,6777,6791,6807,6831,6868,6886,6906,6914,6919,6931,6935,6952,6967,6975,6989,7003,7023,7057,7090,7098],{"__ignoreMap":16},[21,6689,6690],{"class":23,"line":24},[21,6691,6692],{"class":278},"\u002F\u002F $http.get('http:\u002F\u002Flocalhost:8000\u002Fapi\u002Fv1\u002Fjokes').success(function(jokes){\n",[21,6694,6695],{"class":23,"line":79},[21,6696,6697],{"class":278},"\u002F\u002F   console.log(jokes);\n",[21,6699,6700],{"class":23,"line":282},[21,6701,6702],{"class":278},"\u002F\u002F   vm.jokes = jokes.data;\n",[21,6704,6705],{"class":23,"line":296},[21,6706,6707],{"class":278},"\u002F\u002F   }).error(function(error){\n",[21,6709,6710],{"class":23,"line":308},[21,6711,6712],{"class":278},"\u002F\u002F     vm.error = error;\n",[21,6714,6715],{"class":23,"line":319},[21,6716,6717],{"class":278},"\u002F\u002F   })\n",[21,6719,6720],{"class":23,"line":329},[21,6721,572],{"emptyLinePlaceholder":571},[21,6723,6724,6726,6728,6731,6733,6735],{"class":23,"line":461},[21,6725,2558],{"class":249},[21,6727,253],{"class":127},[21,6729,6730],{"class":249},"lastpage ",[21,6732,218],{"class":127},[21,6734,6549],{"class":6548},[21,6736,553],{"class":127},[21,6738,6739,6741,6743,6745,6747,6749,6752],{"class":23,"line":479},[21,6740,2558],{"class":249},[21,6742,253],{"class":127},[21,6744,3124],{"class":82},[21,6746,2052],{"class":127},[21,6748,606],{"class":214},[21,6750,6751],{"class":127}," ()",[21,6753,435],{"class":127},[21,6755,6756,6758,6760,6763,6765,6767],{"class":23,"line":489},[21,6757,2962],{"class":249},[21,6759,253],{"class":127},[21,6761,6762],{"class":249},"lastpage",[21,6764,2052],{"class":127},[21,6766,6549],{"class":6548},[21,6768,553],{"class":127},[21,6770,6771,6773,6775],{"class":23,"line":499},[21,6772,3003],{"class":82},[21,6774,259],{"class":210},[21,6776,4621],{"class":127},[21,6778,6779,6781,6783,6785,6787,6789],{"class":23,"line":516},[21,6780,4404],{"class":210},[21,6782,124],{"class":127},[21,6784,469],{"class":127},[21,6786,3014],{"class":72},[21,6788,262],{"class":127},[21,6790,293],{"class":127},[21,6792,6793,6796,6798,6800,6803,6805],{"class":23,"line":533},[21,6794,6795],{"class":210},"    method",[21,6797,124],{"class":127},[21,6799,469],{"class":127},[21,6801,6802],{"class":72},"GET",[21,6804,262],{"class":127},[21,6806,293],{"class":127},[21,6808,6809,6812,6814,6817,6820,6822,6824,6826,6828],{"class":23,"line":539},[21,6810,6811],{"class":210},"    params",[21,6813,124],{"class":127},[21,6815,6816],{"class":127}," {",[21,6818,6819],{"class":210}," page",[21,6821,124],{"class":127},[21,6823,2198],{"class":249},[21,6825,253],{"class":127},[21,6827,6762],{"class":249},[21,6829,6830],{"class":127}," },\n",[21,6832,6833,6835,6837,6839,6841,6843,6845,6847,6849,6851,6854,6856,6859,6861,6864,6866],{"class":23,"line":545},[21,6834,4540],{"class":127},[21,6836,432],{"class":210},[21,6838,253],{"class":127},[21,6840,2368],{"class":82},[21,6842,259],{"class":210},[21,6844,2338],{"class":214},[21,6846,421],{"class":127},[21,6848,714],{"class":424},[21,6850,270],{"class":127},[21,6852,6853],{"class":424}," status",[21,6855,270],{"class":127},[21,6857,6858],{"class":424}," headers",[21,6860,270],{"class":127},[21,6862,6863],{"class":424}," config",[21,6865,432],{"class":127},[21,6867,435],{"class":127},[21,6869,6870,6872,6874,6876,6878,6880,6882,6884],{"class":23,"line":556},[21,6871,3054],{"class":249},[21,6873,253],{"class":127},[21,6875,714],{"class":249},[21,6877,2052],{"class":127},[21,6879,3063],{"class":249},[21,6881,253],{"class":127},[21,6883,2537],{"class":249},[21,6885,553],{"class":127},[21,6887,6888,6890,6892,6895,6897,6899,6901,6904],{"class":23,"line":562},[21,6889,3054],{"class":249},[21,6891,253],{"class":127},[21,6893,6894],{"class":249},"currentpage",[21,6896,2052],{"class":127},[21,6898,3063],{"class":249},[21,6900,253],{"class":127},[21,6902,6903],{"class":249},"current_page",[21,6905,553],{"class":127},[21,6907,6908,6910,6912],{"class":23,"line":568},[21,6909,4540],{"class":127},[21,6911,432],{"class":210},[21,6913,553],{"class":127},[21,6915,6916],{"class":23,"line":575},[21,6917,6918],{"class":127},"};\n",[21,6920,6921,6923,6925,6927,6929],{"class":23,"line":812},[21,6922,2558],{"class":249},[21,6924,253],{"class":127},[21,6926,3124],{"class":82},[21,6928,2256],{"class":249},[21,6930,553],{"class":127},[21,6932,6933],{"class":23,"line":1399},[21,6934,572],{"emptyLinePlaceholder":571},[21,6936,6937,6939,6941,6944,6946,6948,6950],{"class":23,"line":1409},[21,6938,2558],{"class":249},[21,6940,253],{"class":127},[21,6942,6943],{"class":82},"loadMore",[21,6945,2052],{"class":127},[21,6947,606],{"class":214},[21,6949,6751],{"class":127},[21,6951,435],{"class":127},[21,6953,6954,6956,6958,6960,6963,6965],{"class":23,"line":1419},[21,6955,2962],{"class":249},[21,6957,253],{"class":127},[21,6959,6762],{"class":249},[21,6961,6962],{"class":127}," +=",[21,6964,6549],{"class":6548},[21,6966,553],{"class":127},[21,6968,6969,6971,6973],{"class":23,"line":1438},[21,6970,3003],{"class":82},[21,6972,259],{"class":210},[21,6974,4621],{"class":127},[21,6976,6977,6979,6981,6983,6985,6987],{"class":23,"line":1466},[21,6978,4404],{"class":210},[21,6980,124],{"class":127},[21,6982,469],{"class":127},[21,6984,3014],{"class":72},[21,6986,262],{"class":127},[21,6988,293],{"class":127},[21,6990,6991,6993,6995,6997,6999,7001],{"class":23,"line":1478},[21,6992,6795],{"class":210},[21,6994,124],{"class":127},[21,6996,469],{"class":127},[21,6998,6802],{"class":72},[21,7000,262],{"class":127},[21,7002,293],{"class":127},[21,7004,7005,7007,7009,7011,7013,7015,7017,7019,7021],{"class":23,"line":1483},[21,7006,6811],{"class":210},[21,7008,124],{"class":127},[21,7010,6816],{"class":127},[21,7012,6819],{"class":210},[21,7014,124],{"class":127},[21,7016,2198],{"class":249},[21,7018,253],{"class":127},[21,7020,6762],{"class":249},[21,7022,6830],{"class":127},[21,7024,7025,7027,7029,7031,7033,7035,7037,7039,7041,7043,7045,7047,7049,7051,7053,7055],{"class":23,"line":1502},[21,7026,4540],{"class":127},[21,7028,432],{"class":210},[21,7030,253],{"class":127},[21,7032,2368],{"class":82},[21,7034,259],{"class":210},[21,7036,2338],{"class":214},[21,7038,421],{"class":127},[21,7040,714],{"class":424},[21,7042,270],{"class":127},[21,7044,6853],{"class":424},[21,7046,270],{"class":127},[21,7048,6858],{"class":424},[21,7050,270],{"class":127},[21,7052,6863],{"class":424},[21,7054,432],{"class":127},[21,7056,435],{"class":127},[21,7058,7059,7061,7063,7065,7067,7069,7071,7073,7075,7078,7080,7082,7084,7086,7088],{"class":23,"line":1509},[21,7060,3054],{"class":249},[21,7062,253],{"class":127},[21,7064,714],{"class":249},[21,7066,2052],{"class":127},[21,7068,2198],{"class":249},[21,7070,253],{"class":127},[21,7072,714],{"class":249},[21,7074,253],{"class":127},[21,7076,7077],{"class":82},"concat",[21,7079,259],{"class":210},[21,7081,714],{"class":249},[21,7083,253],{"class":127},[21,7085,2537],{"class":249},[21,7087,432],{"class":210},[21,7089,553],{"class":127},[21,7091,7092,7094,7096],{"class":23,"line":1523},[21,7093,4540],{"class":127},[21,7095,432],{"class":210},[21,7097,553],{"class":127},[21,7099,7100],{"class":23,"line":1536},[21,7101,6918],{"class":127},[29,7103,7104],{},"Now open the jokes routes and click load more button, you can see the new data jokes loaded in the view.",[29,7106,7107],{},[343,7108],{"alt":16,"src":7109},"\u002Fimg\u002F2015-11-13_23-27-37.png",[29,7111,7112],{},"Wrapping Up Part 2\nI hope at the end of this part, you have successfully created you angular app that interact with the Laravel API that we have created in the Part 1 of the series.",[29,7114,7115],{},"If there are any doubts, you can ask in the comments section.",[29,7117,7118],{},"Thanks.",[7120,7121,7122],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":16,"searchDepth":79,"depth":79,"links":7124},[7125,7126,7127,7128,7129,7130,7131],{"id":46,"depth":79,"text":47},{"id":335,"depth":79,"text":336},{"id":1028,"depth":79,"text":1029},{"id":2612,"depth":79,"text":2613},{"id":3154,"depth":79,"text":3155},{"id":5049,"depth":79,"text":5050},{"id":6616,"depth":79,"text":6617},"2015-11-12","In this part 2 of the series we will take a look at how we can consume the api that we built in part 1","md","\u002Fimg\u002Fnglaravel.jpg",{},"\u002Fblog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-2-555",{"title":5,"description":7133},"blog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-2-555",[7141],"Web Development","GJjr1A_tMqkLYah8-ZJbCijmMMP4Qrg-dv0N2WV97Q4",[7144,7149],{"title":7145,"path":7146,"stem":7147,"description":7148,"children":-1},"Build an app with Laravel5 (backend) and Angularjs (frontend) - Part 1","\u002Fblog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-1-480","blog\u002Fseries-build-an-app-with-laravel5-backend-and-angularjs-frontend-part-1-480","In this part 1 of the series we will take a look at how to build the api using Laravel",{"title":7150,"path":7151,"stem":7152,"description":7153,"children":-1},"Sublime Text color scheme for Intellij Jetbrains (phpstorm\u002F webstorm)","\u002Fblog\u002Fsublime-text-color-scheme-for-intellij-jetbrains-phpstorm-webstorm-235","blog\u002Fsublime-text-color-scheme-for-intellij-jetbrains-phpstorm-webstorm-235","In this article we will take a look at how we can add Sublime Text color scheme inside Jetbrains (phpstorm\u002F webstorm)",1775568350832]