angularjs - $stateprovider doesn't work or show any kind of errors -
i can't figure out why angular state provider doesn't work , doesn't show no errors. when used ngroute working when included ui.router
nothing seems work. once opened application, /#/ link generated (routed), hangs on myapp.com/
my html index.html
<html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>myapp</title> <style type="text/css"> [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; } </style> </head> <body class="hold-transition skin-blue sidebar-mini" ng-app="app"> <div class="wrapper"> <div class="content-wrapper"> <div ng-view></div> </div><!-- /.content-wrapper --> </div> <script src="plugins/angularjs/angular.js"></script> <script src="plugins/angularjs/angular-ui-router.js"></script> <script src="plugins/angularjs/angular-resource.js"></script> <script src="plugins/angularjs/ui-bootstrap-tpls-1.3.2.js"></script> <script src="app/app.js"></script> <!-- controllers --> <script src="app/controllers/locations/locationsctrl.js"></script> <script src="app/controllers/dashboard/dashboardctrl.js"></script> <!-- factories --> <script src="app/factories/locationfactory.js"></script> <script src="app/factories/countriesfactory.js"></script> <script src="app/factories/provincesfactory.js"></script> <!-- filters --> <script src="app/filters/selectionfilters.js"></script> </body> </html>
my dashboard.html
<!-- content header (page header) --> <section class="content-header"> <h1>dashboard</h1> <ol class="breadcrumb"> <li><a href="/"><i class="fa fa-dashboard"></i>home</a></li> <li class="active">dashboard</li> </ol> </section> <!-- main content --> <section class="content"> {{data}} </section>
my app.js
var app = angular.module('app', ['ui.router', 'ui.bootstrap']); app.config(function($stateprovider, $urlrouterprovider){ $urlrouterprovider.otherwise("/dashboard"); $stateprovider .state('dashboard', { url: "/dashboard", templateurl: "app/templates/dashboard/dashboard.html", controller: 'dashboardctrl' }) .state('locations', { url: "/locations", templateurl: "app/templates/locations/locations.html", controller: 'locationsctrl' }) .state('/locations/add_location', { url: "/locations/add_location", templateurl: "app/templates/locations/add_location.html", controller: 'addlocationctrl' }); });
interface , console output loaded files hope guys know going on or missing. if need additional information's please let me know , provide.
try add
<base href="/">
in html head ,
$locationprovider.html5mode(true);
in route config.
by way, use dot syntax .
not /
in state declaration:
.state('locations.add_location')
finnally, replace <div ng-view></div>
<div ui-view></div>
solve problem.
Comments
Post a Comment