Angularjs используя $ routeProvider без ng-view

Question

У меня есть одностраничное приложение, которое показывает изображения на нем.

При первой загрузке страница пуста, и люди добавляют свои собственные изображения, однако, если они вернутся на страницу с сохраненным идентификатором в URL-адресе, я хочу, чтобы страница захватила предыдущую модель.

Теперь все мои предыдущие попытки использовать routeProvider потерпели неудачу, если я не разместил ng-view где-то на странице. Но это влияет на области, которые находятся внутри области ng-view.

В основном мне нужно реагировать по-разному на странице в зависимости от того, есть ли идентификатор в URL-адресе или нет, но я не меняю вид, и мне нужно получить идентификатор из параметров маршрута.

Так что я просто задавался вопросом, как вы, ребята, собираетесь это делать, поскольку я, кажется, лаяю неправильные деревья! Любая помощь приветствуется.

Answer 1

Вот один способ справиться с URL и без идентификатора, используя стандартную установку routeProvider, с одним контроллером:

JS:

var app = angular.module('plunker', []); 

app.config(function($routeProvider){ 
    return $routeProvider 
    .when('/', { 
     controller: 'HomeController', 
     templateUrl: 'home.html' 
    }) 
    .when('/:id', { 
     controller: 'HomeController', 
     templateUrl: 'home.html' 
    }) 
    .otherwise({ redirectTo: '/' }); 
}); 

app.controller('HomeController', 
    [ 
     '$scope', 
     '$routeParams', 
     function($scope, $routeParams) { 
     if($routeParams.id){ 
      $scope.id = $routeParams.id; 
      // handle scenario when there is an id in URL 
      return; 
     } 

     // handle scenario when there is no id 
     $scope.id = 'no ID!!'; 
     } 
    ] 
); 

Plunker

А вот еще один способ, без используя ng-view и полагаясь на услугу определения местоположения:

var app = angular.module('plunker', []); 

app.config(
    ['$locationProvider', 
     function($locationProvider) { 
     $locationProvider.html5Mode(true); 
     } 
    ] 
); 

app.controller('HomeController', 
    [ 
     '$scope', 
     '$location', 
     function($scope, $location) { 

     $scope.$watch(function(){ 
      return $location.hash(); 
      }, 
      function(id){ 
      $scope.id = id; 
      } 
     ); 

     $scope.$watch('id', function(id){ 
      if(id){ 
      // handle scenario when there's id available 
      return; 
      } 
      // handle scenario when there is no id 
     }); 

     } 
    ] 
); 

Plunker

Answer 2

This plunker инициирует услугу маршрута $ путем добавления $route как зависимость в блоке приложения выполнения. Идея описана here.

angular.module('myApp', ['myApp.controllers']) 
    .config(function($routeProvider) { 
    return $routeProvider.when("/", { 
     controller: 'firstCtrl' 
    }).when("/numbers/:number", { 
     controller: 'secondCtrl' 
    }); 
    }).run(function($route) {}); 

angular.module("myApp.controllers", []) 
    .controller("firstCtrl", function($scope) { 
    $scope.numbers = [1, 2, 3]; 
    }) 
    .controller("secondCtrl", function($scope,$routeParams, $rootScope, $location) { 
    return $rootScope.$on("$routeChangeSuccess", function(event, current) { 
     $scope.current_path = $location.$$path; 
     $scope.number = $routeParams['number']; 
    }); 
    }); 

Answer 3

Вы можете сделать что-то похожее на то, что предлагает Бен Надель. Это использует ng-switch и имеет значение хэша для ключа при определении того, какой шаблон визуализировать в сочетании с ng-include. Таким образом, когда вы переходите на другой URL-адрес, вы слушаете это изменение, обновляете модель и запускаете новый include/partial.

Ben Nadel - Nested Views, Routing, And Deep Linking With AngularJS

Answer 4

Вы всегда можете определить свой собственный URL-адрес парсер. Создайте сервис, а затем используйте, когда и где хотите.

angular.module('app').service('urlParser', function(){ 
    this.parse = function(url){ 
     var query = url.split('?') 
     if (url.length == 1){ return {} } //it means it has no parameters 
     else{ 
      var paramsArray = query.split('&') 
      var params = {} //this is going to be your return object 
      var i; 
      for (i=0; i < paramsArray.length; i++){ 
       var arr = paramsArray[i].split('=') 
       var param = arr[0] 
       var value; 
       //check if is set with some value 
       if(arr.length == 1) 
        value = null 
       else 
        value = arr[1] 
       obj[param] = value 
      } 
      return obj; 
     } 
    } 
}) 

И вы будете называть это у вас контроллером как услугой. Имени службы: urlParser Название методы: синтаксический анализ (: строка)

Пример:
вара URL = "http://www.yourwebsite.com/yourroute?page=1&user=1000"
вар PARAMS = urlParser.parse (URL)
params.page // дает вам 1
params.user // дает 1000

Надеюсь, что это помогло