首页 文章

Angular JS 1.6 ngRoute ERROR

提问于
浏览
0

我用yoeman安装angularjs . 但ngRoute无法正常工作 .

我使用angular,angular-route 1.6.6链接有'!#'

当我写index.module时...在index.html路由工作 .

app.js如何运作?

我的代码

脚本/ app.js

angular.module('myPageApp', ['ngRoute'])
  .config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl',
      controllerAs: 'main'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl',
      controllerAs: 'about'
    })
    .otherwise({
      redirectTo: '/'
    });
});

的index.html

<ul class="nav navbar-nav">
  <li class="active"><a href="#!/">Home</a></li>
  <li><a ng-href="#!/about">About</a></li>
  <li><a ng-href="#/">Contact</a></li>
</ul>

<div class="container">
  <ng-view></ng-view>
  <div ng-view></div>
</div>

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>

<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->

1 回答

  • 0

    试试这个脚本/ app.js:

    angular.module('myPageApp', ['ngRoute'])
      .config(function ($routeProvider, $locationProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl',
          controllerAs: 'main'
        })
        .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutCtrl',
          controllerAs: 'about'
        })
        .otherwise({
          redirectTo: '/'
        });
        $locationProvider.hashPrefix('');
    });
    

    的index.html

    <ul class="nav navbar-nav">
      <li class="active"><a href="#/">Home</a></li>
      <li><a ng-href="#/about">About</a></li>
      <li><a ng-href="#/">Contact</a></li>
    </ul>
    

    希望能帮助到你..

相关问题