Question

我有一个简单的单页应用程序，可以在其上显示图像。

第一次加载时，页面是空白的，人们会添加自己的图片，但是如果他们返回到页面中，并且在网址中保存了他们的ID，那么我希望页面能够抓住以前的模型。

现在我以前使用routeProvider的所有尝试都失败了，除非我在页面的某处放置了ng-view。但这会影响ng-view范围内的范围。

基本上我需要在页面上做出不同的反应，具体取决于网址中是否有ID但是我没有更改视图，我需要从路由参数中获取id。

所以我只是想知道你们是怎么做的，因为我似乎在咆哮着错误的树木！任何帮助将不胜感激。

Answer 1

使用标准的routeProvider设置，使用一个控制器，这是使用和不使用id处理url的一种方法：

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并依赖$ location服务：

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作为依赖项来启动$ 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

你可以做类似Ben Nadel建议的事情。这是使用ng-switch并且在确定要与ng-include耦合的渲染模板时具有键的哈希值。这样，当您更改为不同的URL路径时，您将侦听该更改，更新模型，并触发新的包含/部分。

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

Answer 4

您始终可以定义自己的网址解析器。创建服务，然后随时随地使用。

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 方法名称：parse（：string）

例：
var url =“http://www.yourwebsite.com/yourroute?page=1&user=1000”
var params = urlParser.parse（url）
params.page //给你1个 params.user //给你1000个
希望这有帮助

Angularjs使用$ routeProvider而不使用ng-view

4 个答案: