Angularjs 为什么从未调用角度控制器？
inspector中的一切都很好，我没有看到控制台错误。但我希望info.html部分加载。此时未使用范围中的任何数据。但是infoController的代码永远不会执行。你看，我在那里放了一行调试器，但它永远不会到达那里 我的问题是为什么没有呼叫InfoController 外壳主页面Angularjs 为什么从未调用角度控制器？,angularjs,angularjs-routing,Angularjs,Angularjs Routing,inspector中的一切都很好，我没有看到控制台错误。但我希望info.html部分加载。此时未使用范围中的任何数据。但是infoController的代码永远不会执行。你看，我在那里放了一行调试器，但它永远不会到达那里 我的问题是为什么没有呼叫InfoController 外壳主页面 <!DOCTYPE html> <html lang="en" ng-app="adminUI"> <head>
<!DOCTYPE html>
<html lang="en" ng-app="adminUI">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/bootstrap/core/bootstrap.min.css">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/attivio-global.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#/"><img class="atv-image atv-margin-top-10 atv-navbar-logo" src="/img/attivio-navbar-logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" data-ng-controller="NavbarController">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">System <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">System Management</li>
<li><a href="#">Connectors</a></li>
<li><a href="#">Indexes</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Workflows</li>
<li><a href="#">Ingest</a></li>
<li><a href="#">Query</a></li>
<li><a href="#">Response</a></li>
<li><a href="#">Palette</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">System Information</li>
<li data-ng-class="{'active':getClass('/info')}"><a href="#/info">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li data-ng-class="{'active':getClass('/properties')}"><a href="#/properties">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm">Go</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<script type="application/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
<script type="application/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="application/javascript" src="/admin/js/bootstrap/bootstrap.min.js"></script>
<script type="application/javascript" src="resources/js/angular.min.js"></script>
<script type="application/javascript" src="resources/js/angular-route.js"></script>
<script src="app.js"></script>
<script src="info/controllers/controllers.js"></script>
<script src="info/services/infoService.js"></script>
<script src="properties/controllers/controllers.js"></script>
<script src="properties/services/propertiesService.js"></script>
</body>
</html>
<div class="info view">
<p> info test </p>
</div>
<div class="properties view">
<p> properties test </p>
</div>
app.controller('InfoController', function ($scope, infoService) {
$scope.sysInfo = [];
init();
function init() {
debugger;
$scope.sysInfo = infoService.getInfo();
}
});
app.controller('PropertiesController', function($scope, propertiesService) {
$scope.properties = [];
init();
function init() {
$scope.properties = propertiesService.getProperties();
}
});
app.controller('InfoController', function ($scope, infoService) {
$scope.sysInfo = [];
init();
function init() {
debugger;
$scope.sysInfo = infoService.getInfo();
}
});
app.controller('PropertiesController', function($scope, propertiesService) {
$scope.properties = [];
init();
function init() {
$scope.properties = propertiesService.getProperties();
}
});
var app = angular.module('adminUI', ['ngRoute']);
//This configures the routes and associates each route with a view and a controller
app.config(function ($routeProvider) {
$routeProvider
.when('/info',
{
controller: 'InfoController',
templateUrl: '/info/partials/info.html'
})
.when('/properties',
{
controller: 'PropertiesController',
templateUrl: '/properties/partials/properties.html'
})
.otherwise({ redirectTo: '/info' });
});
app.controller('NavbarController', function ($scope, $location) {
$scope.getClass = function (path) {
if ($location.path().substr(0, path.length) == path) {
return true
} else {
return false;
}
}
});
app.service('propertiesService', function () {
this.getProperties = function () {
return properties; //ajax call
};
var properties = ["a","b"];
});
app.service('infoService', function () {
this.getInfo = function () {
return info; //ajax call
};
var info = ["a","b"];
});
<!DOCTYPE html>
<html lang="en" ng-app="adminUI">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/bootstrap/core/bootstrap.min.css">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/attivio-global.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#/"><img class="atv-image atv-margin-top-10 atv-navbar-logo" src="/img/attivio-navbar-logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" data-ng-controller="NavbarController">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">System <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">System Management</li>
<li><a href="#">Connectors</a></li>
<li><a href="#">Indexes</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Workflows</li>
<li><a href="#">Ingest</a></li>
<li><a href="#">Query</a></li>
<li><a href="#">Response</a></li>
<li><a href="#">Palette</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">System Information</li>
<li data-ng-class="{'active':getClass('/info')}"><a href="#/info">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li data-ng-class="{'active':getClass('/properties')}"><a href="#/properties">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm">Go</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<script type="application/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
<script type="application/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="application/javascript" src="/admin/js/bootstrap/bootstrap.min.js"></script>
<script type="application/javascript" src="resources/js/angular.min.js"></script>
<script type="application/javascript" src="resources/js/angular-route.js"></script>
<script src="app.js"></script>
<script src="info/controllers/controllers.js"></script>
<script src="info/services/infoService.js"></script>
<script src="properties/controllers/controllers.js"></script>
<script src="properties/services/propertiesService.js"></script>
</body>
</html>
<div class="info view">
<p> info test </p>
</div>
<div class="properties view">
<p> properties test </p>
</div>
信息测试
<!DOCTYPE html>
<html lang="en" ng-app="adminUI">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/bootstrap/core/bootstrap.min.css">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/attivio-global.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#/"><img class="atv-image atv-margin-top-10 atv-navbar-logo" src="/img/attivio-navbar-logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" data-ng-controller="NavbarController">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">System <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">System Management</li>
<li><a href="#">Connectors</a></li>
<li><a href="#">Indexes</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Workflows</li>
<li><a href="#">Ingest</a></li>
<li><a href="#">Query</a></li>
<li><a href="#">Response</a></li>
<li><a href="#">Palette</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">System Information</li>
<li data-ng-class="{'active':getClass('/info')}"><a href="#/info">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li data-ng-class="{'active':getClass('/properties')}"><a href="#/properties">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm">Go</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<script type="application/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
<script type="application/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="application/javascript" src="/admin/js/bootstrap/bootstrap.min.js"></script>
<script type="application/javascript" src="resources/js/angular.min.js"></script>
<script type="application/javascript" src="resources/js/angular-route.js"></script>
<script src="app.js"></script>
<script src="info/controllers/controllers.js"></script>
<script src="info/services/infoService.js"></script>
<script src="properties/controllers/controllers.js"></script>
<script src="properties/services/propertiesService.js"></script>
</body>
</html>
<div class="info view">
<p> info test </p>
</div>
<div class="properties view">
<p> properties test </p>
</div>
性能测试
<!DOCTYPE html>
<html lang="en" ng-app="adminUI">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/bootstrap/core/bootstrap.min.css">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/attivio-global.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#/"><img class="atv-image atv-margin-top-10 atv-navbar-logo" src="/img/attivio-navbar-logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" data-ng-controller="NavbarController">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">System <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">System Management</li>
<li><a href="#">Connectors</a></li>
<li><a href="#">Indexes</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Workflows</li>
<li><a href="#">Ingest</a></li>
<li><a href="#">Query</a></li>
<li><a href="#">Response</a></li>
<li><a href="#">Palette</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">System Information</li>
<li data-ng-class="{'active':getClass('/info')}"><a href="#/info">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li data-ng-class="{'active':getClass('/properties')}"><a href="#/properties">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">General(System)</a></li>
<li><a href="#">Configuration</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Environment</a></li>
</ul></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm">Go</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<script type="application/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
<script type="application/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="application/javascript" src="/admin/js/bootstrap/bootstrap.min.js"></script>
<script type="application/javascript" src="resources/js/angular.min.js"></script>
<script type="application/javascript" src="resources/js/angular-route.js"></script>
<script src="app.js"></script>
<script src="info/controllers/controllers.js"></script>
<script src="info/services/infoService.js"></script>
<script src="properties/controllers/controllers.js"></script>
<script src="properties/services/propertiesService.js"></script>
</body>
</html>
<div class="info view">
<p> info test </p>
</div>
<div class="properties view">
<p> properties test </p>
</div>
您是否在控制台中看到任何错误？您将
ng view