Added ngRoute and controller for single event

bower.json

@@ -9,6 +9,8 @@
   "private": true,
   "dependencies": {
     "angular": "~1.4.8",
+    "angular-route": "~1.4.9",
+    "angular-resource": "~1.4.9",
     "jquery": "~2.2.0",
     "lodash": "~4.0.0"
   }

grunt/config/concat.js

@@ -4,6 +4,8 @@ module.exports = {
       '<%= general.tempDir %>/libs.js': appendLibsPath([
         'jquery/dist/jquery.js',
         'angular/angular.js',
+        'angular-route/angular-route.js',
+        'angular-resource/angular-resource.js',
         'lodash/lodash.js',
       ])
     }

grunt/config/copy.js

@@ -0,0 +1,10 @@
+module.exports = {
+  html: {
+    expand: true,
+    cwd: 'src/templates/',
+    src: '*',
+    dest: 'public/templates/',
+    filter: 'isFile',
+    flatten: true,
+  },
+};

grunt/tasks/build.js

@@ -1,3 +1,3 @@
 module.exports = function (grunt) {
-  grunt.registerTask('build', ['concat']);
+  grunt.registerTask('build', ['concat','copy:html']);
 };

package.json

@@ -13,6 +13,7 @@
     "express": "~4.13.1",
     "grunt": "^0.4.5",
     "grunt-contrib-concat": "^0.5.1",
+    "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-jshint": "^0.12.0",
     "grunt-contrib-watch": "^0.6.1",
     "jade": "~1.11.0",
@@ -24,6 +25,7 @@
     "serve-favicon": "~2.3.0"
   },
   "devDependencies": {
+    "grunt-contrib-copy": "^0.8.2",
     "grunt-contrib-jshint": "^0.12.0",
     "grunt-contrib-watch": "^0.6.1"
   }

routes/api.js

@@ -8,4 +8,24 @@ router.get('/psy', function(req, res, next) {
   });
 });
 
+router.get('/events-list', function(req, res, next) {
+  var eventList = [
+      {
+          "id": "event-1", 
+          "image": "http://community.stagephod.com/wp-content/uploads/2015/02/Events-stagephod.jpg",
+          "name": "First Event", 
+          "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione consectetur fuga molestias odio voluptatem vitae voluptates deleniti iure qui fugit, eveniet atque? Reprehenderit nobis ex aliquid, in nesciunt, explicabo fugiat.",
+          "price": "50$"
+      },
+      {
+          "id": "event-2", 
+          "image": "http://mybanket.com/sites/default/files/event-marketing2.jpg", 
+          "name": "Second Event", 
+          "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione consectetur fuga molestias odio voluptatem vitae voluptates deleniti iure qui fugit, eveniet atque? Reprehenderit nobis ex aliquid, in nesciunt, explicabo fugiat.",
+          "price": "10$"
+      }
+  ];
+  res.json(eventList);
+});
+
 module.exports = router;

src/js/app/app.js

@@ -1,26 +1,35 @@
-(function () {
-  angular.module('eva', [])
-          .config(['$sceProvider', function ($sceProvider) {
-            $sceProvider.enabled(false);
-          }])
-          .run(['$rootScope',
-                '$document',
-                '$timeout',
-                function ($rootScope, $document, $timeout) {
+eventApp = angular.module('eva', ['ngRoute', 'ngResource']);
+eventApp.config(['$routeProvider', '$locationProvider', function($routeProvide, $locationProvider){
+    $locationProvider.html5Mode({
+        enabled:true,
+        requireBase:false,
+    })
+    $routeProvide
+      .when('/',{
+        templateUrl:'/templates/index.html',
+        controller:'EventListCtrl',
+        controllerAs: "Events",
+        resolve: {
+            myData: ["httpDataLoader", function(httpDataLoader){
+                return httpDataLoader.load();
+            }]
+        }
+      })
+      .when('/events/:eventId', {
+        templateUrl:'/templates/single-event.html',
+        controller:'EventDetailCtrl',
+        controllerAs: "EventDetail",
+        resolve: {
+            myData: ["httpDataLoader", function(httpDataLoader){
+                return httpDataLoader.load();
+            }]
+        }
+      })
+      .otherwise({
+        redirectTo: '/'
+      });
+  }
+]);
 
-            watchDigest();
 
-            function watchDigest () {
-              var unregister = $rootScope.$watch(function(){
-                console.log('digest-end');
-                unregister();
 
-                $timeout(function(){
-                  $rootScope.$emit('digest-end');
-                  watchDigest();
-                },0,false);
-              });
-            }
-
-          }]);
-})();

src/js/app/controllers/event.js

@@ -0,0 +1,14 @@
+eventApp.controller("EventListCtrl", ["$scope", "myData", function ($scope, myData) {
+    $scope.data = myData.data;
+}]);
+
+eventApp.controller("EventDetailCtrl", ["$scope", "$routeParams", "myData", function ($scope, $routeParams, myData) {
+    $scope.eventId = $routeParams.eventId;
+    $scope.data = myData.data;
+    for(var i = 0; i < myData.data.length; i++) {
+        $scope.event = myData.data[i];
+        if($scope.event.id === $routeParams.eventId) {
+            return $scope.event;
+        }
+      }
+}]);

src/js/app/services/event.js

@@ -0,0 +1,5 @@
+eventApp.service("httpDataLoader", ["$http", function($http) {
+    this.load = function() {
+      return $http.get("/api/events-list");
+    }
+}]);

src/templates/index.html

@@ -0,0 +1,7 @@
+<div>
+	<ul>
+		<li ng-repeat="event in data">
+			<a href="/events/{{event.id}}">{{event.id}}</a>
+		</li>
+	</ul>
+</div>

src/templates/single-event.html

@@ -0,0 +1,12 @@
+<article class="container">
+	<div class="row">
+		<div class="col m12 l6">
+			<img ng-src="{{event.image}}" alt="{{event.name}}" class="responsive-img z-depth-2">
+		</div>
+		<div class="col m12 l6">
+			<h2>{{event.name}}</h2>
+			<p>{{event.description}}</p>
+			<span>Price: {{event.price}}</span>
+		</div>
+	</div>
+</article>

views/layout.jade

@@ -5,4 +5,5 @@ html
     link(rel='stylesheet', href='/stylesheets/style.css')
     script(src='/js/main.js')
   body(ng-app='eva')
+    ng-view
     block content