0
요즘 AngularJS를 배우고 있으며 .NET 백엔드와 연결된 첫 번째 응용 프로그램을 만들고 있습니다. 한 가지를 제외하고는 모두 잘 진행되고 있습니다.AngularJS ngRoute이 작동하지 않습니다.
ngRoute를 올바르게 작동시키지 못했습니다.
내 app.js 내 경로를 정의는 다음과 같이 파일 :
지금 내가 http://localhost/netshield/index 모두를 방문 할 때마다 나는 우리가있어 가정 때문에 존재하지 않는 아니라 (부분 제외입니다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/programs을 방문하면 을 찾을 수 없음 오류가 발생합니다. 내가 무슨 일을하고있는 중이 야
<!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>
어떤 생각들 :
내 index.html을이인가? 나는 제대로 작동하지 않는 것 같습니다. 어떤 도움이라도 대단히 감사하겠습니다. "파셜/대시 보드 :
'http : // localhost/netshield/programs'로 이동하면 어떤 로그입니까? –
예제에서 관련 코드를 제거하지 마십시오. –
'ngRoute' js 파일을 앱에 포함시켜야합니다. 당신은'ngRoute'을 주입했고'ui-router' js 파일을 포함했습니다. –