javascript - Angular JS App shows blank screen -
i have following app configuration should load 1 full page, instead showing nothing , when check console totally empty 0 errors:
my code 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"> <!-- 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 serveral data used in inspinia theme on diferent view --> <body ng-controller="mainctrl main"> <!-- main view --> <div ui-view></div> <!-- jquery , 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 , 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 , 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 huge file not relevant put here: http://screencast.com/t/ndgulmgn
and controllers.js has mainctrl
function mainctrl() { /** * slideinterval - interval bootstrap carousel, in milliseconds: */ this.slideinterval = 5000; /** * states - data used in advanced form view 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 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 checkbox input used in icheck plugin. demo purpose */ this.checkone = true; this.checktwo = true; this.checkthree = true; this.checkfour = true; /** * knobs - few variables knob plugin used in advanced plugins view */ this.knobone = 75; this.knobtwo = 25; this.knobthree = 50; /** * variables used 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 collapse panels in tabs , 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 dynamic alerts in notifications , tooltips view */ this.alerts = [ { type: 'danger', msg: 'oh snap! change few things , try submitting again.' }, { type: 'success', msg: 'well done! read important alert message.' }, { type: 'info', msg: 'ok, done great job man.' } ]; /** * addalert, closealert - used manage alerts in notifications , tooltips view */ this.addalert = function() { this.alerts.push({msg: 'another alert!'}); }; this.closealert = function(index) { this.alerts.splice(index, 1); }; /** * randomstacked - used progress bar (stacked type) in badges adn labels view */ this.randomstacked = function() { this.stacked = []; var types = ['success', 'info', 'warning', 'danger']; (var = 0, n = math.floor((math.random() * 4) + 1); < n; i++) { var index = math.floor((math.random() * 4)); this.stacked.push({ value: math.floor((math.random() * 30) + 1), type: types[index] }); } }; /** * initial run random stacked value */ this.randomstacked(); /** * summernotetext - used summernote plugin */ this.summernotetext = ['<h3>hello jonathan! </h3>', '<p>dummy text of printing , typesetting industry. <strong>lorem ipsum has been dustrys</strong> standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more', 'recently with</p>'].join(''); /** * general variables peity charts * used in many view 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"] } }; }; this content.html
<!-- wrapper--> <div id="wrapper"> <!-- navigation --> <div ng-include="'views/common/navigation.html'"></div> <!-- page wraper --> <!-- ng-class current state name give ability extended customization 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--> i know missing include content.html file, have no idea how include route provider.
in past had state provider explained here: converting routing state provider route provider
and worked fine.
i think using ui-view instead of ng-view.
try use ng-view instead of ui-view.
if you're going use ui-view inject ui-router not ngroute.
ng-view , $routeprovider used when injected ngroute.
,
ui-view , $stateprovider used when injected ui.router
hope makes sense.
Comments
Post a Comment