Angular路由应用在本地工作，而不是在plunker上工作——ui-view没有拉入视图:()

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

本文关键字：工作 ui-view 视图 plunker 应用 路由 Angular      更新时间：2023-09-26

所以，我有一个angular路由应用程序在本地工作，但它不工作在plunker上，我试图让它在那里工作，以证明一个问题，但无论如何…不管用，也不知道为什么。视图没有被注入到索引页的<div ui-view></div>中:(

这是我的活塞

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'
        })
});

这是我的index.html页面(点击上面的柱塞查看查看页面):

<!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>

和正文:

<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>

有更新的柱塞

对于柱塞，我们不能使用

<base href="/" />

因为总有一些东西像'http://run.plnkr.co/s6tfzR2Tbd1v9qB9gPH8/script.js'而不是 http://run.plnkr.co/script.js

也需要JQuery用于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>

查看工作版本

<base>标签与柱塞混淆，删除它，它应该工作。

工作示例

相关文章：