0
我正在學習AngularJS這些天，我正在研究我的第一個應用程序，它也與.NET後端連接。一切進展順利，除了一件事：AngularJS ngRoute不適用於我
我似乎無法讓ngRoute正常工作。
我在app.js定義我的路線文件中像這樣：
var App = angular.module('netshield', ['ngRoute']).config(function
($httpProvider, $rootScopeProvider) {
});
App.config(['$routeProvider', function ($routes) {
$routes.when("/login", { templateUrl: "login.html", controller:
"AuthController"})
.when("/index", { templateUrl: "/partials/dashboard.html", controller:
"DashboardController"})
.when("/programs", { templateUrl: "/partials/programs.html", controller:
"ProgramController"})
.otherwise({
redirectTo: 'login'
});
}]);
現在每個我訪問http://localhost/netshield/index所有的時間很好（除了部分不存在的，所以我想我們好）。
當我訪問http://localhost/netshield/programs我得到一個找不到錯誤。
我的index.html是這樣的：
<!DOCTYPE html>
<html class="fixed" ng-app="netshield">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>NetShield - Control Panel</title>
<meta name="keywords" content="netshield,licensing,system,net,dotnet,license,authentication,serial,code" />
<meta name="description" content="NetShield - Licensing System">
<meta name="author" content="Nikolas Andreou">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bootstrap/vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
<link rel="stylesheet" href="bootstrap/vendor/morris.js/morris.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/skins/default.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme-custom.css">
<script src="bootstrap/vendor/modernizr/modernizr.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.js"></script>
<script src="js/Session.js"></script>
<script src="js/app.js"></script>
<script src="js/services/AuthService.js"></script>
<script src="js/controllers/AuthController.js"></script>
<script src="js/controllers/DashboardController.js"></script>
</head>
<body ng-app="netshield" <!--ng-controller="DashboardController" ng-init="onLoad()"-->>
<section class="body">
<header class="header">
<div class="logo-container">
<a href="../" class="logo">
<!--<img src="bootstrap/images/logo.png" height="35" alt="Porto Admin" />-->
</a>
<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search & user box -->
<div class="header-right">
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="bootstrap/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="bootstrap/images/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="[email protected]">
<span class="name" ng-model="User">{{User.Username}}</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="fa fa-user"></i> My Account</a>
</li>
<li>
<a role="menuitem" tabindex="-1" ng-click="logout($event)"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search & user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="index">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-active">
<a href="programs">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
<ul class="nav nav-children">
<li>
<a href="programlist">
View Program List
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Sizes
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-sidebar-sizes-xs.html">
Left Sidebar XS
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-sm.html">
Left Sidebar SM
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-md.html">
Left Sidebar MD
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<section role="main" class="content-body">
<header class="page-header">
<h2>Dashboard</h2>
<div class="right-wrapper pull-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="fa fa-home"></i>
</a>
</li>
<li><span>Dashboard</span></li>
</ol>
<a class="sidebar-right-toggle"><i class="fa fa-chevron-left"></i></a>
</div>
</header>
<div ng-view></div>
</div>
</section>
<!-- Vendor -->
<script src="bootstrap/vendor/jquery/jquery.js"></script>
<script src="bootstrap/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="bootstrap/vendor/bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/vendor/nanoscroller/nanoscroller.js"></script>
<script src="bootstrap/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="bootstrap/vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="bootstrap/vendor/jquery-placeholder/jquery-placeholder.js"></script>
<script src="bootstrap/vendor/jquery-ui/jquery-ui.js"></script>
<script src="bootstrap/vendor/jqueryui-touch-punch/jqueryui-touch-punch.js"></script>
<script src="bootstrap/vendor/jquery-appear/jquery-appear.js"></script>
<script src="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="bootstrap/vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.js"></script>
<script src="bootstrap/vendor/flot.tooltip/flot.tooltip.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.pie.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.categories.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.resize.js"></script>
<script src="bootstrap/vendor/jquery-sparkline/jquery-sparkline.js"></script>
<script src="bootstrap/vendor/raphael/raphael.js"></script>
<script src="bootstrap/vendor/morris.js/morris.js"></script>
<script src="bootstrap/vendor/gauge/gauge.js"></script>
<script src="bootstrap/vendor/snap.svg/snap.svg.js"></script>
<script src="bootstrap/vendor/liquid-meter/liquid.meter.js"></script>
<script src="bootstrap/vendor/jqvmap/jquery.vmap.js"></script>
<script src="bootstrap/vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<script src="bootstrap/javascripts/theme.js"></script>
<script src="bootstrap/javascripts/theme.custom.js"></script>
<script src="bootstrap/javascripts/theme.init.js"></script>
<script src="bootstrap/javascripts/dashboard/examples.dashboard.js"></script>
</body>
</html>
任何想法傢伙我究竟做錯了什麼？我似乎沒有得到它正常工作。任何幫助將不勝感激。
任何日誌，當你去'http：// localhost/netshield/programs'？ –
也從示例中刪除不相關的代碼。 –
你應該在應用中包含'ngRoute' js文件。你注入了'ngRoute'幷包含'ui-router' js文件 –