Twitter Bootstrap Question posted in

Twitter bootstrap – Angular routing app working locally, not working on on plunker – ui-view not pulling in the views :(

So, I have an angular routing app working locally, but it’s not working on plunker, I’m trying to get it working there to demonstrate an issue, but anyway… It’s not working, and it doesn’t make sense why. The views are not being injected into <div ui-view></div> on the index page 🙁

Here’s my plunker

Here’s the 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
        })

        // ONE VIEW ========================================
        .state('one', {
            url: '/one',
            templateUrl: 'partial-one.html' 
        })

        // TWO VIEW ========================================
        .state('two', {
            url: '/two',
            templateUrl: 'partial-two.html'
        })

          // THREE VIEW ========================================
        .state('three', {
            url: '/three',
            templateUrl: 'partial-three.html'
        })
});

Here’s my index.html page (check the plunker above to see the view pages):

<!DOCTYPE html>
<html>
<head>

    <!-- // base path for 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 the 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>
Tags:

2

Answers


  1. 0

    The <base> tag is messing with plunker, remove it and it should work.

    Working example

    Login or Signup to reply.
  2. 0

    There is updated plunker

    In case of the plunker, we cannot use 

    <base href="/" />

    Because there is always some stuff like 'http://run.plnkr.co/s6tfzR2Tbd1v9qB9gPH8/script.js' instead of the http://run.plnkr.co/script.js

    also JQuery is needed for 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 for angular routing   -->
    <!--<base href="/" />--> 
  </head>

    Check the working version here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search