Angular JS App显示空白屏幕
我有以下应用程序配置应该加载一整页，但是它没有显示任何内容，当我检查控制台时它完全为空而没有错误：
我的代码如下：
App.js
'use strict';
angular.module('inspinia', ['ngRoute', 'AdalAngular'])
.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalAuthenticationServiceProvider) {
$routeProvider.when("/dashboard_1", {
controller: "MainCtrl",
templateUrl: "/views/dashboard_1.html",
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true,
name: 'angular-flot',
files: ['js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
},
{
name: 'angles',
files: ['js/plugins/chartJs/angles.js', 'js/plugins/chartJs/Chart.min.js']
},
{
name: 'angular-peity',
files: ['js/plugins/peity/jquery.peity.min.js', 'js/plugins/peity/angular-peity.js']
}
]);
}
}
}).otherwise({ redirectTo: "/dashboard_1" });
}]);
的index.html
<!DOCTYPE html>
<html ng-app="inspinia">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title set in pageTitle directive -->
<title page-title></title>
<!-- Font awesome -->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Main Inspinia CSS files -->
<link href="css/animate.css" rel="stylesheet">
<link id="loadBefore" href="css/style.css" rel="stylesheet">
</head>
<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used in Inspinia theme on diferent view -->
<body ng-controller="MainCtrl as main">
<!-- Main view -->
<div ui-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- MetsiMenu -->
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!-- SlimScroll -->
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Peace JS -->
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<!-- Main Angular scripts-->
<script src="js/angular/angular.min.js"></script>
<script src="js/plugins/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="js/angular-translate/angular-translate.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
<script src="https://code.angularjs.org/1.2.25/angular-route.js"></script>
<script src="js/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="js/plugins/angular-idle/angular-idle.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal-angular.min.js"></script>
<!-- Anglar App Script -->
<script src="js/app.js"></script>
<!--<script src="js/config.js"></script>-->
<!--<script srjs/translations.js"></script>
<script src="js/directives.js"></script>-->
<script src="js/controllers.js"></script>
</body>
</html>
仪表板1. html是一个巨大的文件，与此处无关： http://screencast.com/t/nDGUlMGn
和controllers.js有一个MainCtrl
function MainCtrl() {
/**
* slideInterval - Interval for bootstrap Carousel, in milliseconds:
*/
this.slideInterval = 5000;
/**
* states - Data used in Advanced Form view for Chosen plugin
*/
this.states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Carolina',
'North Dakota',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
];
/**
* persons - Data used in Tables view for Data Tables plugin
*/
this.persons = [
{
id: '1',
firstName: 'Monica',
lastName: 'Smith'
},
{
id: '2',
firstName: 'Sandra',
lastName: 'Jackson'
},
{
id: '3',
firstName: 'John',
lastName: 'Underwood'
},
{
id: '4',
firstName: 'Chris',
lastName: 'Johnatan'
},
{
id: '5',
firstName: 'Kim',
lastName: 'Rosowski'
}
];
/**
* check's - Few variables for checkbox input used in iCheck plugin. Only for demo purpose
*/
this.checkOne = true;
this.checkTwo = true;
this.checkThree = true;
this.checkFour = true;
/**
* knobs - Few variables for knob plugin used in Advanced Plugins view
*/
this.knobOne = 75;
this.knobTwo = 25;
this.knobThree = 50;
/**
* Variables used for Ui Elements view
*/
this.bigTotalItems = 175;
this.bigCurrentPage = 1;
this.maxSize = 5;
this.singleModel = 1;
this.radioModel = 'Middle';
this.checkModel = {
left: false,
middle: true,
right: false
};
/**
* groups - used for Collapse panels in Tabs and Panels view
*/
this.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
/**
* alerts - used for dynamic alerts in Notifications and Tooltips view
*/
this.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' },
{ type: 'info', msg: 'OK, You are done a great job man.' }
];
/**
* addAlert, closeAlert - used to manage alerts in Notifications and Tooltips view
*/
this.addAlert = function() {
this.alerts.push({msg: 'Another alert!'});
};
this.closeAlert = function(index) {
this.alerts.splice(index, 1);
};
/**
* randomStacked - used for progress bar (stacked type) in Badges adn Labels view
*/
this.randomStacked = function() {
this.stacked = [];
var types = ['success', 'info', 'warning', 'danger'];
for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) {
var index = Math.floor((Math.random() * 4));
this.stacked.push({
value: Math.floor((Math.random() * 30) + 1),
type: types[index]
});
}
};
/**
* initial run for random stacked value
*/
this.randomStacked();
/**
* summernoteText - used for Summernote plugin
*/
this.summernoteText = ['<h3>Hello Jonathan! </h3>',
'<p>dummy text of the printing and typesetting industry. <strong>Lorem Ipsum has been the dustrys</strong> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more',
'recently with</p>'].join('');
/**
* General variables for Peity Charts
* used in many view so this is in Main controller
*/
this.BarChart = {
data: [5, 3, 9, 6, 5, 9, 7, 3, 5, 2, 4, 7, 3, 2, 7, 9, 6, 4, 5, 7, 3, 2, 1, 0, 9, 5, 6, 8, 3, 2, 1],
options: {
fill: ["#1ab394", "#d7d7d7"],
width: 100
}
};
this.BarChart2 = {
data: [5, 3, 9, 6, 5, 9, 7, 3, 5, 2],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
this.BarChart3 = {
data: [5, 3, 2, -1, -3, -2, 2, 3, 5, 2],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
this.LineChart = {
data: [5, 9, 7, 3, 5, 2, 5, 3, 9, 6, 5, 9, 4, 7, 3, 2, 9, 8, 7, 4, 5, 1, 2, 9, 5, 4, 7],
options: {
fill: '#1ab394',
stroke: '#169c81',
width: 64
}
};
this.LineChart2 = {
data: [3, 2, 9, 8, 47, 4, 5, 1, 2, 9, 5, 4, 7],
options: {
fill: '#1ab394',
stroke: '#169c81',
width: 64
}
};
this.LineChart3 = {
data: [5, 3, 2, -1, -3, -2, 2, 3, 5, 2],
options: {
fill: '#1ab394',
stroke: '#169c81',
width: 64
}
};
this.LineChart4 = {
data: [5, 3, 9, 6, 5, 9, 7, 3, 5, 2],
options: {
fill: '#1ab394',
stroke: '#169c81',
width: 64
}
};
this.PieChart = {
data: [1, 5],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
this.PieChart2 = {
data: [226, 360],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
this.PieChart3 = {
data: [0.52, 1.561],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
this.PieChart4 = {
data: [1, 4],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
this.PieChart5 = {
data: [226, 134],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
this.PieChart6 = {
data: [0.52, 1.041],
options: {
fill: ["#1ab394", "#d7d7d7"]
}
};
};
这是content.html
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>
<!-- Page wraper -->
<!-- ng-class with current state name give you the ability to extended customization your view -->
<div id="page-wrapper" class="gray-bg {{$state.current.name}}">
<!-- Page wrapper -->
<div ng-include="'views/common/topnavbar.html'"></div>
<!-- Main view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>
</div>
<!-- End page wrapper-->
<!-- Right Sidebar -->
<div ng-include="'views/common/right_sidebar.html'"></div>
</div>
<!-- End wrapper-->
我知道我缺少包含content.html文件，但我不知道如何包含路由提供程序。
过去我有国家提供者，如下所述： converting routing from state provider to route provider
它完美无缺。
1 个答案:
答案 0 :(得分：5)
我认为您使用 ui-view 而不是 ng-view 。
尝试使用 ng-view 而不是 ui-view 。
如果您要使用 ui-view 注入 ui-router 而不是 ngRoute 。
注入 ngRoute 时会使用 ng-view 和 $ routeProvider 。
和
注入 ui.router 时使用 ui-view 和 $ stateProvider
我希望这是有道理的。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？