6
tôi có cấu hình ứng dụng sau đó sẽ tải một trang đầy đủ, tuy nhiên thay vì thể hiện gì của nó và khi tôi kiểm tra giao diện điều khiển của nó hoàn toàn trống rỗng với zero lỗi:Angular JS App cho thấy màn hình trống
My mã như sau:
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>
Dashboard 1. html là một tập tin lớn mà không liên quan đến đặt ở đây: http://screencast.com/t/nDGUlMGn
và controllers.js có 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"]
}
};
};
đây là 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-->
Tôi biết tôi đang thiếu bao gồm tệp content.html, nhưng tôi không biết cách đưa vào tuyến đường các nhà cung cấp.
Trong quá khứ tôi đã có nhà cung cấp Nhà nước như đã giải thích ở đây: converting routing from state provider to route provider
Và nó làm việc hoàn toàn tốt đẹp.
chỉ thay thế '
' thành '' –