使用$ routeProvider Angularjs没有NG-视图 [英] Angularjs using $routeProvider without ng-view

问题描述

我有一个简单的单页的应用程序，显示了它的图像。

I have a simple single page app that shows images on it.

在第一次加载页面是空白，人们添加自己的照片然而，如果他们再在URL与他们保存的ID返回页面，然后我希望页面抢previous模式。

On first load the page is blank and people add their own images however if they then return to the page with their saved id in the url then I want the page to grab the previous model.

现在我所有的previous尝试使用routeProvider都失败了，除非我把NG-视图某处页。但是，这进而影响属于NG-视图域内的作用域。

Now all my previous attempts to use routeProvider have failed unless I put ng-view somewhere in the page. But this then affects the scopes that are inside the ng-view scope.

基本上，我需要根据是否有在URL或不是一个ID，但我不会改变的观点在页面上会有不同的反应，我需要从路由参数获取的ID。

Basically I need to respond differently on the page depending if there is an id in the url or not but I'm not changing the view and I need to get the id from the route parameters.

所以，我只是想知道你们将如何去这样做，因为我似乎找错了树！任何帮助将是非常美联社preciated。

So I was just wondering how you guys would go about doing this as I seem to be barking up the wrong trees! Any help would be much appreciated.

推荐答案

下面是处理与无标识URL的一种方式，使用标准routeProvider设置，用一个控制器：

Here's one way to handle url with and without id, using standard routeProvider setup, with one controller:

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-视图，并依托$位置服务：

And here's another way, without using ng-view and relying on $location service:

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

这篇关于使用$ routeProvider Angularjs没有NG-视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！