html5模式正在重新加載頁面角js

我如何更改路徑而不重新加載頁面？html5模式正在重新加載頁面角js

沒有html5模式它工作正常。我使用的是html5模式，使用「a」標籤可以正常工作，但是通過ng-click來重新加載頁面。在控制器中我使用$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'); 
     }); 
    });

來源

2017-10-12 noman kt

使用'$ location.path（ 'pathHere'）'來代替。 –

你解決了我的問題兄弟感謝的很多，我瘋了。 –

你不應該使用$窗口服務通過應用移動引起的通話將出角的範圍，而不是嘗試使用狀態從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>" 
    }); 
});

來源

2017-10-12 11:33:52 ramon22

html5模式正在重新加載頁面角js

回答

相關問題