I have the following application configuration, which should load one full page, but instead it shows nothing, and when I check the console for its empty zero error:
My code is as follows:
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"> <title page-title></title> <link href="font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/animate.css" rel="stylesheet"> <link id="loadBefore" href="css/style.css" rel="stylesheet"> </head> <body ng-controller="MainCtrl as main"> <div ui-view></div> <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> <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script> <script src="js/plugins/pace/pace.min.js"></script> <script src="js/inspinia.js"></script> <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> <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> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </body> </html>
Toolbar 1. html is a huge file that does not apply to this: http://screencast.com/t/nDGUlMGn
and controllers.js has MainCtrl
function MainCtrl() { this.slideInterval = 5000; 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' ]; 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' } ]; this.checkOne = true; this.checkTwo = true; this.checkThree = true; this.checkFour = true; this.knobOne = 75; this.knobTwo = 25; this.knobThree = 50; this.bigTotalItems = 175; this.bigCurrentPage = 1; this.maxSize = 5; this.singleModel = 1; this.radioModel = 'Middle'; this.checkModel = { left: false, middle: true, right: false }; this.groups = [ { title: 'Dynamic Group Header - 1', content: 'Dynamic Group Body - 1' }, { title: 'Dynamic Group Header - 2', content: 'Dynamic Group Body - 2' } ]; 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.' } ]; this.addAlert = function() { this.alerts.push({msg: 'Another alert!'}); }; this.closeAlert = function(index) { this.alerts.splice(index, 1); }; 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] }); } }; this.randomStacked(); 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(''); 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"] } }; };
this is content.html
<div id="wrapper"> <div ng-include="'views/common/navigation.html'"></div> <div id="page-wrapper" class="gray-bg {{$state.current.name}}"> <div ng-include="'views/common/topnavbar.html'"></div> <div ui-view></div> <div ng-include="'views/common/footer.html'"></div> </div> <div ng-include="'views/common/right_sidebar.html'"></div> </div>
I know that I am missing the content.html file, but I have no idea how to enable it with the route provider.
In the past, I had a government provider, as described here: converting routing from a state provider to a route provider
And it worked perfectly.