具有ng-view故障的Angular $ routeProvider

时间:2017-07-31 22:08:55

标签: angularjs routing ng-view

我已经尝试了许多不同的方法让我的Angular路由工作,但是,我无法获得正确路由的链接。任何帮助将不胜感激。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SIE Special Projects</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="script.js"></script>


</head>
<body  ng-app="sp_app">

<div ng-controller="mainController">

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">{{ message }}</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#projects"><i class="fa fa-shield"></i> Projects</a></li>
            </ul>
        </div>
    </nav>

    <div id="main">
        <div ng-view></div>
    </div>
</div>

</body>
</html>

这是我的路由代码的一部分 http://embed.plnkr.co/FVVdbuKddGNFQgjkuSxv/

路由代码:

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

// configure our routes
app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'mainController'
        })
        .when('/projects', {
            templateUrl: 'allprojects.html',
            controller: 'projectsController'
        });
});


app.controller('mainController', function ($scope) {
    $scope.message = 'Welcome to the Special Projects web page';
});

app.controller('projectsController', function ($scope) {
    $scope.message = 'Here are the projects';
});

0 个答案:

没有答案