簡體   English   中英

路由在角度Spa中不起作用

[英]Routing not working in angular spa

我正在嘗試角度路由,但是它不起作用,控制台也沒有任何錯誤。有人可以指導我做錯了什么嗎?

**** app.js ****

var routingApp = angular.module('routingApp', ['ngRoute']);
routingApp.config(function ($routeProvider)
{
    $routeProvider.when('/', {
        templateUrl: '/views/home.html',
        controller: 'mainController'
    })
    .when('/about', {
        templateUrl: '/views/about.html',
        controller: 'aboutController'
    })
    .when('/contact', {
        templateUrl: '/views/contact.html',
        controller: 'contactController'
    });
});

mainController

routingApp.controller('mainController', function ($scope)
{
    $scope.message = 'Hey its home page';
}
)

;

aboutController

routingApp.controller('aboutController', function ($scope)
{
    $scope.message = 'this app is about routing';
});

index.html

**

 <body ng-controller="mainController">
        <nav class="nav navbar-default">
            <div class="container">
                <div class="navbar-header">
                    Angular JS Routing
                </div>
                <ul class="nav navbar-nav navbar-right">
                <li><a href="/">Home</a></li>
                <li><a href="#/about">About</a></li>
                <li><a href="#/Contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <div id="main">
            <div ng-view></div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="app.js"></script>
        <script src="controller/mainController.js"></script>
        <script src="controller/contactController.js"></script>
        <script src="controller/aboutController.js"></script>

**

請檢查您的href

<li><a href="/">Home</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/Contact">Contact</a></li>

缺少指令ng-app ,而不是向body添加ng-controller,請添加ng-app="routingApp"

請改善鏈接的合作聯系頁面 ,而不是#/Contact ,請使用#/contact

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM