ng-view似乎没有用。什么都没有出现

时间:2016-12-14 17:11:55

标签: javascript angularjs ng-view angularjs-ng-route

出于某种原因,我的ng-view决定不起作用。自从我使用角度以来,它已经有点了,所以也许我错过了一些东西。在视图 home.html 上,它在h1标记中只有文本 hello ,但它没有显示。



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

mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
 

 //routes
mistApp.config(function($routeProvider,$locationProvider){
	$routeProvider.when('/',{
		templateUrl:'views/home.html',
		controller:'homeCtrl'
	})
	$routeProvider.when('/calendar',{
		templateUrl:'views/calendar.html',
		controller:'calendarCtrl'
	})
	.otherwise({
		redirectTo:'/'
	});


}) //end routes

}) //end of mainCtrl

<!DOCTYPE html>
<html ng-app="mistApp">
<head>
	<title></title>

	<!-- boostrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- angular -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>


	<!-- controllers -->
	<script type="text/javascript" src="js/mainCtrl.js"></script>
	<script type="text/javascript" src="js/calendarCtrl.js"></script>






</head>

<body ng-controller="mainCtrl">
<!-- NAVBAR -->
<nav class="nav navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false" class="navbar-toggle collapsed">
				<span class="sr-only"> Toggle Navigation</span>
				<span class="icon-bar""></span>
				<span class="icon-bar""></span>
				<span class="icon-bar""></span>
			</button>

			<a href="#/" class="navbar-brand"></a>
			<h3>GameTown</h3>
		</div>
			<div id="navbar-collapse-1" class="collapse navbar-collapse">
				  <ul class="nav navbar-nav navbar-right">
						<li>
							<a ng-href="#/">Home</a>
						</li>
						<li ng-hide="loggedIn">
							<a ng-href="#/calendar">Calendar</a>
						</li>
		                <li ng-hide="loggedIn">
		                    <a ng-href="#/updates">Updates</a>
		                </li>  
		                 
		                <li ng-hide="loggedIn">
		                    <a ng-href="#/chat">Chat</a>
		                </li>
		                <li ng-hide="loggedIn">
		                    <a ng-href="#/ideas">Ideas</a>
		                </li>                 
					</ul>
			</div>	
	</div>
</nav>

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

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

问题

路由器的模块调用(即 config())位于控制器回调内。

解决方案

将模块调用移到控制器回调之外。有关详细信息,请查看ngRoutethe example的文档。

所以这个:

data _null_;
dt = date();
last_mth_beg = intnx('month',dt,-1,'beginning');
call symput('startdt',put(last_mth_beg,YYMMDDS10.));
date_num=compress(&startdt,"'");
call symputx('date_num',date_num);
%put &startdt;
%put &date_num;
run;

成为:

mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
    //routes
    mistApp.config(function($routeProvider,$locationProvider){
    ...
    }) //end routes
}) //end of mainCtrl

this updated plunker中查看它。

我注意到的另一个问题是无效的HTML。汉堡菜单中有三行在 class 属性后有一个额外的双引号。所以这些界限:

mistApp.controller('mainCtrl',function($scope,$http,$route, $routeParams, $location){
}); //end of mainCtrl

//routes
mistApp.config(function($routeProvider,$locationProvider){
   ...
}) //end routes

应该像这样更新:

<span class="icon-bar""></span>

您可以考虑使用 glyphicon-menu-hamburger 类名来使用Bootstrap菜单图标(有关这些的更多信息,请参阅Components section),而不是这三个跨度。 / p>

<span class="icon-bar"></span>