Angularjs如何在没有哈希爆炸的情况下制作ngRoute

时间:2018-05-14 17:46:14

标签: angularjs ngroute angularjs-ng-route

在我的angularjs应用程序中,我在公共文件夹中有index.html,其代码如下,

<body ng-controller="TheController">
    <div id="startdiv">
        <label>Username</label><input type="text" tabindex="1" placeholder="Enter Your User Name" name="email" required>
        <label>Password</label><input type="password" tabindex="2"  placeholder="Enter Your Password" name="password" required>
        <br><br>
        <button ng-click="saveData()">Login</button><button ng-click="saveData()">SignUp</button><br>   
        <button ng-click="changeview()">ClickMe</button>
    </div>  
</body>

脚本部分如下,

var app = angular.module('plunker',['ngRoute']);

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

app.config(function($routeProvider) {
    $routeProvider
    .when("/test", {
        templateUrl : "index.html"
    })
    .when("/london", {
        templateUrl : "london.html",        
    });/*
    .otherwise({
            redirectTo: '/paris.html'
        }); */
});


app.controller('TheController', function ($scope,$location) {       
    console.log('hello')    
     $scope.changeview = function () {
        console.log('in functgion changeview')
        console.log($location)
        $location.path('/london');      
    }
});

此外,我在相同的公共文件夹中有london.html,我想在按钮点击时加载。

my london.html

<h1>London</h1>
<h3>London is the capital city of England.</h3>

问题是,点击按钮后,网址将从&#34; http://localhost:3000/&#34;更改到&#34; http://localhost:3000/#/london&#34;但是html页面没有加载。另外我想知道是否可以使用哈希字符进行路由。

请让我知道我在哪里弄错了。 感谢。

1 个答案:

答案 0 :(得分:0)

app.module.js

中使用此功能
  

$ locationProvider.html5Mode(真);

示例:

window.routes = {
  '/': {
    templateUrl: 'app/visitor/visitor.html',
    anonymous: true
  },
  '/index': {
    templateUrl: 'app/visitor/visitor.html',
    caseInsensitiveMatch: true,
    anonymous: true
  },
  '/lu/:mt?/:tab?/:id?': {
    templateUrl: 'app/user/user.html',
    caseInsensitiveMatch: true,
    anonymous: false
  }
};

app.config(function ($routeProvider, $locationProvider) {
  for (var path in window.routes) {
    $routeProvider.when(path, window.routes[path]);
  }
  $routeProvider.otherwise({redirectTo: '/'});

  $locationProvider.html5Mode(true);
});

同样作为示例中的templateUrl: 'app/visitor/visitor.html',,设置文件的完整路径。