Question

如何在不重新加载页面的情况下更改路径？

没有html5模式，它的工作正常。我正在使用html5模式，使用＆＃34; a＆＃34;标记它工作正常，但通过点击它重新加载页面。在控制器中我使用$window.location.href进行更改路径，服务器端使用节点js。我在搜索解决方案几天但没有成功。请帮帮我。

的index.html

    <!DOCTYPE html>
     <html ng-app="myApp">
      <head>
      <base href="/" />

      <script 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
    </script>
      <script 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
      route.js"></script>
     </head>
     <body>
       <div ng-view></div>

       <script src="myapp.js"></script>
       <script src="myctrl.js"></script>
    </body>
    </html>

myapp.js

    var app = angular.module("myApp", ["ngRoute"]);

    app.config(function($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
        $routeProvider
        .when("/", {
            templateUrl : "pages/main.htm",
            controller: 'myCtrl'
        })
        .when("/items", {
            templateUrl : "pages/items.htm",
            controller: 'myCtrl'
        })
        .otherwise({
            template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
         });
     });

myctrl.js

     app.controller('myCtrl', ['$scope','$window',function($scope,$window) {

        $scope.myFunc = function() {
          $window.location.href="/items"

        };
        $scope.homePage = function() {
          $window.location.href="/"

        };
    }]);

server.js

 var express = require('express');
    var app = express();
    var bodyParser =  require("body-parser");
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());

    app.use(express.static(__dirname + "/"));
    app.listen(3000,()=>{
      console.log(`server is up on port ${3000}`);

      app.get('/items', function(req, res){
          res.sendFile(__dirname + '/index.html');
      });
    });

Answer 1

您不应该使用$ window服务来移动应用程序，因为调用将超出角度范围，而是尝试使用您需要的 IStateService 中的状态将 ui.router 模块添加到您的应用程序。

app.controller('myCtrl', ['$scope','$state',function($scope,$state) {

    $scope.myFunc = function() {
      $state.go('items');

    };
    $scope.homePage = function() {
       $state.go('home');

    };
}]);

然后配置你的路线

 var app = angular.module("myApp", ["ui.router"]);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

   $locationProvider.html5Mode({enabled: true, requireBase: false}).hashPrefix('!');

    // Redirect to 404 when route not found
    $urlRouterProvider.otherwise(function ($injector, $location) {
      $injector.get('$state').transitionTo('not-found', null, {
          location: false
      });
    });

    $stateProvider
    .state("home", {
        url: "/",
        templateUrl : "pages/main.htm",
        controller: 'myCtrl'
    })
    .state("/items", {
        url: "/items",
        templateUrl : "pages/items.htm",
        controller: 'myCtrl'
    })
    .state("not-found", {
        url: '/not-found',
        template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
     });
 });

Answer 2

很抱歉，您的回复较晚，问题已解决，答案是$ location.path（'pathHere'）。

html5模式正在重新加载页面角度js

2 个答案: