Question

我无法实现我的单页。我想添加模板页面而不重定向到新页面。我的index.html文件：

    <!doctype html>
    <html lang="en" ng-app="MyApp">
    <head> 
      <script src="bower_components/angular/angular.js"></script>
      <script src="bower_components/angular-route/angular-route.js"></script>
      <script src="bower_components/angular-resource/angular-resource.js"></script> 
      <script src="scripts/app.js"></script>
    </head>

    <body>
        <a href="#about" class="btn btn-success btn-lg">About</a>
        <a href="#contact" class="btn btn-danger btn-lg">Contact</a>
         I want show contact and about information under this links but I see this at new page

        <ng-view> </ng-view>
    </body>
</html>

我的带路由配置的app.js文件

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

app.config([ '$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'dialogManager/page-home.html',
        controller: function ($scope) {}
    })
    // about page
    .when('/about', {
        templateUrl: 'dialogManager/page-about.html',
         controller: function ($scope) {}
    })
    // contact page
    .when('/contact', {
        templateUrl: 'dialogManager/page-contact.html',
         controller: function ($scope) {}
    });
} ]);

我的页面 - contact.html

<!-- page-contact.html -->

<h2>Contact</h2>

Answer 1

您可以考虑使用ng-include。

根据角度文档：https://docs.angularjs.org/api/ngRoute/directive/ngView

ngView是一个指令，通过将当前路由的呈现模板包含到主布局（index.html）文件中来补充$ route服务。每当当前路由发生变化时，包含的视图都会根据$ route服务的配置随之改变。

也许ng-view不是你需要的。

AngularJS添加模板（ng-view）而不重定向到新页面

1 个答案: