Home Explore Help
Register Sign In
jamesperet
/
portfolio-go
Watch 1
Star 0
Fork 0

Browse Source
Switched from ngRouter to ui-router

James Peret 9 years ago
parent
0b2f21dba8
commit
5b4d5a26ce
6 changed files with 59 additions and 33 deletions
Show Diff Stats
  1. 3 1
      app/index.html
  2. 17 16
      app/scripts/app.js
  3. 4 1
      app/scripts/controllers/slideshow.js
  4. 17 0
      app/scripts/services/getController.js
  5. 15 14
      app/views/slideshow.html
  6. 3 1
      bower.json

+ 3 - 1
app/index.html
View File 

@@ -12,6 +12,7 @@
12 12 
 		<!-- bower:js -->
13 13 
     <script src="../bower_components/jquery/dist/jquery.min.js"></script>
14 14 
     <script src="../bower_components/angular/angular.js"></script>
15 
+    <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
15 16 
     <script src="../bower_components/angular-animate/angular-animate.js"></script>
16 17 
     <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
17 18 
     <script src="../bower_components/angular-resource/angular-resource.js"></script>
 
@@ -39,6 +40,7 @@
39 40 
     <script src="scripts/controllers/slideshow.js"></script>
40 41 
     <script src="scripts/directives/wallop-slider.js"></script>
41 42 
     <script src="scripts/services/data.js"></script>
43 
+    <script src="scripts/services/getController.js"></script>
42 44
43 45
44 46 
 
@@ -69,7 +71,7 @@
69 71 
     </ul>
70 72 
   </div>
71 73
72 
-  <div ng-view></div>
74 
+  <div ui-view></div>
73 75
74 76
75 77 
 </body>

+ 17 - 16
app/scripts/app.js
View File 

@@ -10,10 +10,10 @@
10 10 
  */
11 11 
 angular
12 12 
   .module('goApp', [
13 
+    'ui.router',
13 14 
     'ngAnimate',
14 15 
     'ngCookies',
15 16 
     'ngResource',
16 
-    'ngRoute',
17 17 
     'ngSanitize',
18 18 
     'ngTouch',
19 19 
     'famous.angular',
 
@@ -23,10 +23,10 @@ angular
23 23 
     'goApp.background',
24 24 
     'goApp.navigation',
25 25 
     'goApp.slideshow',
26 
-    'goApp.slider'
26 
+    'goApp.slider',
27 27 
   ])
28 28
29 
-  .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
29 
+  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
30 30
31 31 
     // Configs
32 32 
     //Enable cross domain calls
 
@@ -34,17 +34,18 @@ angular
34 34 
     //Remove the header used to identify ajax call  that would prevent CORS from working
35 35 
     //delete $httpProvider.defaults.headers.common['X-Requested-With'];
36 36
37 
-    // Routes
38 
-    $routeProvider
39 
-      .when('/', {
40 
-        templateUrl: 'views/index.html',
41 
-        controller: 'IndexController'
42 
-      })
43 
-      .when('/:slideshowId', {
44 
-        templateUrl: 'views/slideshow.html',
45 
-        controller: 'SlideshowController'
46 
-      })
47 
-      .otherwise({
48 
-        redirectTo: '/'
49 
-      });
37 
+    // UI router
38 
+    $stateProvider
39 
+    .state('/', {
40 
+      url: "/",
41 
+      templateUrl: 'views/index.html',
42 
+      controller: 'IndexController'
43 
+    })
44 
+    .state('slideshow', {
45 
+      url: "/:slideshow",
46 
+      templateUrl: "views/slideshow.html",
47 
+      controller: 'SlideshowController'
48 
+    })
49 
+
50 
+
50 51 
   }])

+ 4 - 1
app/scripts/controllers/slideshow.js
View File 

@@ -10,6 +10,8 @@
10 10 
 angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data'])
11 11 
   .controller('SlideshowController',['$scope', '$rootScope', '$famous', '$timeline', '$location', '$route', '$timeout', 'Data', function ($scope,  $rootScope, $famous, $timeline, $location, $route, $timeout, Data) {
12 12
13 
+    console.log('> Loading Slideshow')
14 
+
13 15 
     // Get Page Data
14 16 
     var link = $location.url()
15 17 
     $scope.pageData = Data.getPageData(link);
 
@@ -30,8 +32,9 @@ angular.module('goApp.slideshow', ['ngFx', 'ngAnimate', 'goApp.data'])
30 32 
     $scope.fadeOut = function() {
31 33 
       $scope.showView = false;
32 34 
       $timeout(function(){
35 
+        $scope.showView = false;
33 36 
         $location.path("/");
34 
-      },2000);
37 
+      },800);
35 38 
     }
36 39
37 40 
     $scope.index = 0;

+ 17 - 0
app/scripts/services/getController.js
View File 

@@ -0,0 +1,17 @@
1 
+"use strict"
2 
+
3 
+angular.module('goApp.getController', ['goApp.data'])
4 
+  .provider('getController', function () {
5 
+    this.$get = function ($location, Data) {
6 
+      return function () {
7 
+        var data = Data.getPageData($location.path)
8 
+        if(data.controller == undefined){
9 
+          console.log('> Loading controller: SlideshowController')
10 
+          return 'SlideshowController';
11 
+        } else {
12 
+          console.log('> Loading controller: ' + data.controller)
13 
+          return data.controller;
14 
+        }
15 
+      }
16 
+    };
17 
+  });

+ 15 - 14
app/views/slideshow.html
View File 

@@ -1,16 +1,17 @@
1 
-<div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView">
2 
-  <a class="btn-menu fixed-top-right" ng-click="fadeOut()">X</a>
3 
-  <p class="fixed-bottom-center"><span class="slide-title">{{pageData.slides[index].title}}</span></p>
4 
-  <div id="slider" class="Aligner">
5 
-    <div  class="Aligner-item">
6 
-      <wallop-slider
7 
-          ng-show="slider"
8 
-          data-images="images"
9 
-          data-animation="fade"
10 
-          data-current-item-index="index"
11 
-          data-on-previous="updateTsPrevious()"
12 
-          data-on-next="updateTsNext()"
13 
-      ></wallop-slider>
1 
+
2 
+  <div class="layer-content fx-fade-normal fx-easing-quad fx-speed-500" ng-show="showView">
3 
+    <a class="btn-menu fixed-top-right" ng-click="fadeOut()">X</a>
4 
+    <p class="fixed-bottom-center"><span class="slide-title">{{pageData.slides[index].title}}</span></p>
5 
+    <div id="slider" class="Aligner">
6 
+      <div  class="Aligner-item">
7 
+        <wallop-slider
8 
+            ng-show="slider"
9 
+            data-images="images"
10 
+            data-animation="fade"
11 
+            data-current-item-index="index"
12 
+            data-on-previous="updateTsPrevious()"
13 
+            data-on-next="updateTsNext()"
14 
+        ></wallop-slider>
15 
+      </div>
14 16 
     </div>
15 17 
   </div>
16 
-</div>

+ 3 - 1
bower.json
View File 

@@ -29,7 +29,9 @@
29 29 
     "angular-touch": "^1.3.0",
30 30 
     "jQuery": "~2.1.4",
31 31 
     "ngFx": "~1.1.0",
32 
-    "famous-bkimagesurface": "~1.0.3"
32 
+    "famous-bkimagesurface": "~1.0.3",
33 
+    "angular-ui": "~0.4.0",
34 
+    "angular-ui-router": "~0.2.15"
33 35 
   },
34 36 
   "resolutions": {
35 37 
     "angular": "1.3.8"