Le mode html5 est la page de rechargement angulaire js

comment puis-je changer le chemin sans recharger la page?Le mode html5 est la page de rechargement angulaire js

Sans le mode html5, cela fonctionne très bien. J'utilise le mode html5, avec une balise "a" ça marche bien mais par ng-clic ça recharge la page. dans le contrôleur j'utilise $window.location.href pour changer le chemin, côté serveur j'utilise le noeud js. Je suis à la recherche de solution pour quelques jours mais pas eu de succès. aidez-moi s'il vous plaît.

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'); 
     }); 
    });

Source

2017-10-12 noman kt

Utiliser 'location.path de $ ('pathHere')' à la place. –

vous avez résolu mon problème bro merci beaucoup, je devais fou. –

Vous ne devriez pas utiliser le service de fenêtre $ pour se déplacer à travers l'application causent les appels seront hors de portée angulaire, au lieu d'essayer d'utiliser état du IStateService vous devez ajouter ui.router Module app pour vous.

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

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

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

    }; 
}]);

puis config vos itinéraires

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>" 
    }); 
});

Source

2017-10-12 11:33:52 ramon22

Le mode html5 est la page de rechargement angulaire js

Répondre

Questions connexes