Question

我想转换我的角度页面，我使用ng-includes但我的网页有.html扩展名，我想只有 / mypage

样品：

www.mypage.com/projects.html

我想要存档：

www.mypage.com/projects

HTML

<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <a class="navbar-brand" href="index.html">logo</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>
<!-- header -->

<div>
<div ng-include="'app/pages/projects.html'"></div>
</div>


<footer class="footer">
  <div class="container text-center">
footer
  </div>
</footer>

JS：

var App = angular.module('App', []);

App.controller('ProjectCtrl', function($scope, $http) {
  $http.get('app/projects.json')
       .then(function(res){
          $scope.projects = res.data;
        });
});



 .config(function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/projects', {
                templateUrl : 'projects.html',
                controller : mainController
            });

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    });

js fiddle：https://jsfiddle.net/3ww49zq7/

怎么能成功呢？

感谢。

Answer 1

在第一个，您将需要使用ngRoute并将其声明为模块中的依赖项

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

然后你可以使用routeProvider

第二名： 您应该使用ng-view指令来告知角度，该div将用于加载视图。

<div ng-view></div>

第三：

您应该在routeprovieder中将链接更改为相同的链接

 <li class="active"><a href="index.html">Home</a></li>
 <li><a href="projects.html">Projects</a></li>

应该是

 <li class="active"><a href="/index">Home</a></li>
 <li><a href="/projects">Projects</a></li>

并且您应该确保这些链接与routeProvider对象中的大小写匹配。

您应该在routeProvider中声明您正在使用的控制器这是一个用来证明：。http://plnkr.co/edit/DrPG9WtLg8abpLQpVj0W?p=preview

的傻瓜

Angular.js将我的.html网址转换为/删除.html

1 个答案: