Bisakah Anda mengubah jalur tanpa memuat ulang pengontrol di AngularJS?

Sudah ditanyakan sebelumnya, dan dari jawaban itu tidak terlihat bagus. Saya ingin bertanya dengan kode sampel ini sebagai pertimbangan ...

Aplikasi saya memuat item saat ini di layanan yang menyediakannya. Ada beberapa pengontrol yang memanipulasi data item tanpa item dimuat ulang.

Pengontrol saya akan memuat ulang item jika belum disetel, jika tidak, ia akan menggunakan item yang saat ini dimuat dari layanan, antara pengontrol.

Masalah : Saya ingin menggunakan jalur berbeda untuk setiap pengontrol tanpa memuat ulang Item.html.

1) Apakah itu mungkin?

2) Jika itu tidak mungkin, apakah ada pendekatan yang lebih baik untuk memiliki path per controller vs apa yang saya temukan di sini?

app.js

var app = angular.module('myModule', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/items', {templateUrl: 'partials/items.html',   controller: ItemsCtrl}).
      when('/items/:itemId/foo', {templateUrl: 'partials/item.html', controller: ItemFooCtrl}).
      when('/items/:itemId/bar', {templateUrl: 'partials/item.html', controller: ItemBarCtrl}).
      otherwise({redirectTo: '/items'});
    }]);

Item.html

<!-- Menu -->
<a id="fooTab" my-active-directive="view.name" href="#/item/{{item.id}}/foo">Foo</a>
<a id="barTab" my-active-directive="view.name" href="#/item/{{item.id}}/bar">Bar</a>
<!-- Content -->
<div class="content" ng-include="" src="view.template"></div>

controller.js

// Helper function to load $scope.item if refresh or directly linked
function itemCtrlInit($scope, $routeParams, MyService) {
  $scope.item = MyService.currentItem;
  if (!$scope.item) {
    MyService.currentItem = MyService.get({itemId: $routeParams.itemId});
    $scope.item = MyService.currentItem;
  }
}
function itemFooCtrl($scope, $routeParams, MyService) {
  $scope.view = {name: 'foo', template: 'partials/itemFoo.html'};
  itemCtrlInit($scope, $routeParams, MyService);
}
function itemBarCtrl($scope, $routeParams, MyService) {
  $scope.view = {name: 'bar', template: 'partials/itemBar.html'};
  itemCtrlInit($scope, $routeParams, MyService);
}

Resolusi.

Status : Menggunakan kueri penelusuran seperti yang disarankan dalam jawaban yang diterima memungkinkan saya memberikan url yang berbeda tanpa memuat ulang pengontrol utama.

app.js

var app = angular.module('myModule', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/items', {templateUrl: 'partials/items.html',   controller: ItemsCtrl}).
      when('/item/:itemId/', {templateUrl: 'partials/item.html', controller: ItemCtrl, reloadOnSearch: false}).
      otherwise({redirectTo: '/items'});
    }]);

Item.html

<!-- Menu -->
<dd id="fooTab" item-tab="view.name" ng-click="view = views.foo;"><a href="#/item/{{item.id}}/?view=foo">Foo</a></dd>
<dd id="barTab" item-tab="view.name" ng-click="view = views.bar;"><a href="#/item/{{item.id}}/?view=foo">Bar</a></dd>

<!-- Content -->
<div class="content" ng-include="" src="view.template"></div>

controller.js

function ItemCtrl($scope, $routeParams, Appts) {
  $scope.views = {
    foo: {name: 'foo', template: 'partials/itemFoo.html'},
    bar: {name: 'bar', template: 'partials/itemBar.html'},
  }
  $scope.view = $scope.views[$routeParams.view];
}

directives.js

app.directive('itemTab', function(){
  return function(scope, elem, attrs) {
    scope.$watch(attrs.itemTab, function(val) {
      if (val+'Tab' == attrs.id) {
        elem.addClass('active');
      } else {
        elem.removeClass('active');
      }
    });
  }
});

Konten di dalam parsial saya dibungkus dengan ng-controller=...

Jika Anda tidak harus menggunakan URL seperti #/item/{{item.id}}/foodan #/item/{{item.id}}/bartapi #/item/{{item.id}}/?foodan #/item/{{item.id}}/?barsebagai gantinya, Anda dapat mengatur rute Anda untuk /item/{{item.id}}/memiliki reloadOnSearchset ke false( https://docs.angularjs.org/api/ngRoute/provider/$routeProvider ). Itu memberitahu AngularJS untuk tidak memuat ulang tampilan jika bagian pencarian dari url berubah.

Jika Anda perlu mengubah path, tambahkan ini setelah .config Anda di file aplikasi Anda. Maka Anda bisa lakukan $location.path('/sampleurl', false);untuk mencegah reload

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}])

Kredit pergi ke https://www.consolelog.io/angularjs-change-path-without-reloading untuk solusi paling elegan yang saya temukan.

mengapa tidak hanya menempatkan ng-controller satu tingkat lebih tinggi,

<body ng-controller="ProjectController">
    <div ng-view><div>

Dan jangan mengatur pengontrol di rute,

.when('/', { templateUrl: "abc.html" })

ini bekerja untuk saya.

Bagi yang membutuhkan path () ubah tanpa reload controller - Berikut ini plugin: https://github.com/anglibs/angular-location-update

Pemakaian:

$location.update_path('/notes/1');

Berdasarkan https://stackoverflow.com/a/24102139/1751321

PS Solusi ini https://stackoverflow.com/a/24102139/1751321 berisi bug setelah path (, false) dipanggil - ia akan memecah navigasi browser maju / mundur hingga path (, true) dipanggil

Meskipun posting ini sudah tua dan sudah mendapat jawaban, menggunakan reloadOnSeach = false tidak menyelesaikan masalah bagi kita yang perlu mengubah jalur aktual dan bukan hanya params. Inilah solusi sederhana untuk dipertimbangkan:

Gunakan ng-include daripada ng-view dan tetapkan controller Anda di templat.

<!-- In your index.html - instead of using ng-view -->
<div ng-include="templateUrl"></div>

<!-- In your template specified by app.config -->
<div ng-controller="MyController">{{variableInMyController}}</div>

//in config
$routeProvider
  .when('/my/page/route/:id', { 
    templateUrl: 'myPage.html', 
  })

//in top level controller with $route injected
$scope.templateUrl = ''

$scope.$on('$routeChangeSuccess',function(){
  $scope.templateUrl = $route.current.templateUrl;
})

//in controller that doesn't reload
$scope.$on('$routeChangeSuccess',function(){
  //update your scope based on new $routeParams
})

Hanya sisi buruknya adalah Anda tidak dapat menggunakan atribut resolusinya, tapi itu cukup mudah untuk dilakukan. Anda juga harus mengelola keadaan controller, seperti logika berdasarkan $ routeParams ketika rute berubah dalam controller sebagai perubahan url yang sesuai.

Berikut ini contohnya: http://plnkr.co/edit/WtAOm59CFcjafMmxBVOP?p=preview

Saya menggunakan solusi ini

angular.module('reload-service.module', [])
.factory('reloadService', function($route,$timeout, $location) {
  return {
     preventReload: function($scope, navigateCallback) {
        var lastRoute = $route.current;

        $scope.$on('$locationChangeSuccess', function() {
           if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
              var routeParams = angular.copy($route.current.params);
              $route.current = lastRoute;
              navigateCallback(routeParams);
           }
        });
     }
  };
})

//usage
.controller('noReloadController', function($scope, $routeParams, reloadService) {
     $scope.routeParams = $routeParams;

     reloadService.preventReload($scope, function(newParams) {
        $scope.routeParams = newParams;
     });
});

Pendekatan ini mempertahankan fungsi tombol kembali, dan Anda selalu memiliki routeParams saat ini di templat, tidak seperti beberapa pendekatan lain yang pernah saya lihat.

Jawaban di atas, termasuk yang GitHub, memiliki beberapa masalah untuk skenario saya dan juga tombol kembali atau perubahan url langsung dari browser memuat ulang controller, yang saya tidak suka. Saya akhirnya pergi dengan pendekatan berikut:

1. Tetapkan properti dalam definisi rute, yang disebut 'noReload' untuk rute-rute di mana Anda tidak ingin controller memuat ulang pada perubahan rute.

.when('/:param1/:param2?/:param3?', {
    templateUrl: 'home.html',
    controller: 'HomeController',
    controllerAs: 'vm',
    noReload: true
})

2. Dalam menjalankan fungsi modul Anda, masukkan logika yang memeriksa rute-rute tersebut. Ini akan mencegah isi ulang hanya jika noReloadadalah truedan pengendali rute sebelumnya adalah sama.

fooRun.$inject = ['$rootScope', '$route', '$routeParams'];

function fooRun($rootScope, $route, $routeParams) {
    $rootScope.$on('$routeChangeStart', function (event, nextRoute, lastRoute) {
        if (lastRoute && nextRoute.noReload 
         && lastRoute.controller === nextRoute.controller) {
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                un();
                // Broadcast routeUpdate if params changed. Also update
                // $routeParams accordingly
                if (!angular.equals($route.current.params, lastRoute.params)) {
                    lastRoute.params = nextRoute.params;
                    angular.copy(lastRoute.params, $routeParams);
                    $rootScope.$broadcast('$routeUpdate', lastRoute);
                }
                // Prevent reload of controller by setting current
                // route to the previous one.
                $route.current = lastRoute;
            });
        }
    });
}

3. Terakhir, di controller, dengarkan acara $ routeUpdate sehingga Anda dapat melakukan apa pun yang perlu Anda lakukan ketika parameter rute berubah.

HomeController.$inject = ['$scope', '$routeParams'];

function HomeController($scope, $routeParams) {
    //(...)

    $scope.$on("$routeUpdate", function handler(route) {
        // Do whatever you need to do with new $routeParams
        // You can also access the route from the parameter passed
        // to the event
    });

    //(...)
}

Ingatlah bahwa dengan pendekatan ini, Anda tidak mengubah hal-hal di controller dan kemudian memperbarui jalur yang sesuai. Itu sebaliknya. Anda pertama-tama mengubah jalur, kemudian mendengarkan acara $ routeUpdate untuk mengubah hal-hal di controller ketika parameter rute berubah.

Ini menjaga hal-hal sederhana dan konsisten karena Anda dapat menggunakan logika yang sama baik ketika Anda hanya mengubah path (tetapi tanpa permintaan $ http mahal jika Anda suka) dan ketika Anda benar-benar memuat ulang browser.

Ada cara sederhana untuk mengubah jalur tanpa memuat ulang

URL is - http://localhost:9000/#/edit_draft_inbox/1457

Gunakan kode ini untuk mengubah URL, Halaman tidak akan dialihkan

Parameter kedua "false" sangat penting.

$location.path('/edit_draft_inbox/'+id, false);

Inilah solusi lengkap saya yang memecahkan beberapa hal yang dilewatkan @Vigrond dan @rahilwazir:

• Ketika params pencarian diubah, itu akan mencegah penyiaran a $routeUpdate.
• Ketika rute sebenarnya tidak berubah, $locationChangeSuccesstidak pernah dipicu yang menyebabkan pembaruan rute berikutnya dicegah.

• Jika dalam siklus intisari yang sama ada permintaan pembaruan lain, kali ini yang ingin memuat ulang, pengendali acara akan membatalkan memuat ulang itu.

  app.run(['$rootScope', '$route', '$location', '$timeout', function ($rootScope, $route, $location, $timeout) {
      ['url', 'path'].forEach(function (method) {
          var original = $location[method];
          var requestId = 0;
          $location[method] = function (param, reload) {
              // getter
              if (!param) return original.call($location);
  
              # only last call allowed to do things in one digest cycle
              var currentRequestId = ++requestId;
              if (reload === false) {
                  var lastRoute = $route.current;
                  // intercept ONLY the next $locateChangeSuccess
                  var un = $rootScope.$on('$locationChangeSuccess', function () {
                      un();
                      if (requestId !== currentRequestId) return;
  
                      if (!angular.equals($route.current.params, lastRoute.params)) {
                          // this should always be broadcast when params change
                          $rootScope.$broadcast('$routeUpdate');
                      }
                      var current = $route.current;
                      $route.current = lastRoute;
                      // make a route change to the previous route work
                      $timeout(function() {
                          if (requestId !== currentRequestId) return;
                          $route.current = current;
                      });
                  });
                  // if it didn't fire for some reason, don't intercept the next one
                  $timeout(un);
              }
              return original.call($location, param);
          };
      });
  }]);

Tambahkan tag kepala bagian dalam berikut

  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>

Ini akan mencegah memuat ulang.

Sejak sekitar versi 1.2, Anda dapat menggunakan $ location.replace () :

$location.path('/items');
$location.replace();