javascript - Angular routing app working locally, not working on on plunker - ui-view not pulling in the views :( -
so, have angular routing app working locally, it's not working on plunker, i'm trying working there demonstrate issue, anyway... it's not working, , doesn't make sense why. views not being injected <div ui-view></div> on index page :(
here's js:
var routerapp = angular.module('routerapp', ['ui.router','ui.bootstrap']); routerapp.config(function($stateprovider, $urlrouterprovider, $locationprovider) { $urlrouterprovider.otherwise('/home'); $locationprovider.html5mode(false).hashprefix(""); $stateprovider // home view ======================================== .state('home', { url: '/home', templateurl: 'partial-home.html' // onenter: scrollcontent }) // 1 view ======================================== .state('one', { url: '/one', templateurl: 'partial-one.html' }) // 2 view ======================================== .state('two', { url: '/two', templateurl: 'partial-two.html' }) // 3 view ======================================== .state('three', { url: '/three', templateurl: 'partial-three.html' }) }); here's index.html page (check plunker above see view pages):
<!doctype html> <html> <head> <!-- // base path angular routing --> <base href="/"> <!-- css --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <!-- js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://code.angularjs.org/1.2.13/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script> <script src="script.js"></script> </head> and body:
<body ng-app="routerapp"> <!-- navigation --> <!-- fixed navbar --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" ui-sref="home">some web page somewhere</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a ui-sref="one">link one</a></li> <li><a ui-sref="two">link two</a></li> <li><a ui-sref="three">link three</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <!-- end fixed navbar --> <!-- main content --> <!-- inject content here --> <div class="container" style="padding-top:68px;"> <div ui-view></div> </div> </body>
there updated plunker
in case of plunker, cannot use
<base href="/" /> because there stuff 'http://run.plnkr.co/s6tfzr2tbd1v9qb9gph8/script.js' instead of http://run.plnkr.co/script.js
also jquery needed bootstrap, new head:
<head> <!-- css --> <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css" /> <!-- js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://code.angularjs.org/1.2.13/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script> <script src="script.js"></script> <!-- // base path angular routing --> <!--<base href="/" />--> </head> check working version here
Comments
Post a Comment