Question

我正在尝试使用angular，bootstrap制作单页网站。我试图在第一页中包含一个轮播，并且ngRouting不起作用。我在这里读过，我需要使用ui.bootstrap来使轮播与路由一起工作。

我是棱角分明的初学者。这是我的 index.html ：

    <!DOCTYPE html>
<html lang="en" ng-app="mainApp">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>My web page</title>

    <!-- load angular, ui-bootstrap and angular-route -->
    <script src="js/angular.min.1.5.8.js"></script>
    <script src="js/angular-animate.min.1.5.8.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/ui-bootstrap-tpls-2.3.0.min.js"></script>
    <script src="js/app.js"></script>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<!-- Navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
CODE
</nav>    

<!-- ngRoute -->
<div ng-view></div>

<!-- jQuery and Bootstrap -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>

</html>

我的 app.js ：

    var app = angular.module('mainApp', ['ngRoute','ui.bootstrap','ngAnimate']);
// angular routing
app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl : "pages/main.html"
        })
        .when("/prezentare", {
            templateUrl : "pages/AnotherPage.html"
        })
        .when("/green", {
            templateUrl : "pages/green.html"
        })
        .when("/blue", {
            templateUrl : "pages/blue.html"
        });
});
// angular ui.bootstrap
app.controller('CarouselCtrl', function($scope) {
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;

    var slides = $scope.slides = [];
    slides.push(
        { image_url: '#/img/header1.png' },
        { image_url: '#/img/header2.png' }
    );
});

当然还有 main.html

    <!-- New Carousel - UI-Bootstrap -->
<div ng-controller="CarouselCtrl">
    <div style="height: 350px">
        <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
            <div uib-slide ng-repeat="slide in slides">
                <img ng-src="{{slide.image_url}}" style="margin:auto;">
            <</div>
        </div>
    </div>
</div>

<!-- Page Content -->
<div class="container"> other code </div>

请告诉我我做错了什么???旋转木马没有显示（只有2个侧箭头）。使用ui.bootstrap，轮播将响应得太对了？

与ngRoute没有显示的uibootstrap旋转木马

0 个答案: