gpt4 book ai didi

javascript - Angular 路由应用程序在本地工作,不在 plunker 上工作 - ui-view 不拉入 View :(

转载 作者:行者123 更新时间:2023-11-29 16:57:08 25 4
gpt4 key购买 nike

所以,我有一个在本地工作的 Angular 路由应用程序,但它不能在 plunker 上工作,我试图让它在那里工作以证明一个问题,但无论如何......它没有工作,而且它没有感觉为什么。 View 未注入(inject) <div ui-view></div>在索引页上:(

Here's my plunker

这是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 页面(检查上面的 plunker 以查看 View 页面):

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

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

最佳答案

updated plunker

如果是 plunker,我们不能使用

<base href="/" />

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

bootstrap 也需要 JQuery,新头:

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

检查工作version here

关于javascript - Angular 路由应用程序在本地工作,不在 plunker 上工作 - ui-view 不拉入 View :(,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31422320/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com