Question

angularjs相当新，尝试制作单页应用程序。要加载的默认页面应该是主页，我还需要一个主页按钮来路由到此页面。

HTML中的导航栏：

<html ng-app="app">

...

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

...

<div ng-view></div>

app.module.js中的

：

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

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'main',
            controllerAs: 'vm'
        })
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'about',
            controllerAs: 'vm'
        })
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contact',
            controllerAs: 'vm'
        });
});

app.controller('main', main);
app.controller('about', about);
app.controller('contact', contact);

function main() {
    var vm = this;
    vm.message = "Home page";
}

function about() { //stuff }

function contact() { //stuff }

加载页面后，所有内容都会正确显示，并且网址为http://localhost:8007/#/

我的问题是，当我点击主页时，网址会变为http://localhost:8007/#并且不会显示任何内容。关于和联系两者按预期工作。

我知道我可以将主页按钮更改为href="#/"，但感觉就像是针对症状，而不是问题。我觉得我真的不应该这样做。

我尝试将.when('', {添加到app.module.js，但这没有做任何事情。

Answer 1

您的家庭href将为<a href="#/">Home</a>，然后转换为您在"/"中定义的路径$routeProvider。

请勿在应用中的任何位置使用href="#"

Angularjs路由到＃导致问题

1 个答案: