Question

我是角色的初学者，现在正在处理单页应用程序。我想在index.html中注入四页。

它的工作正常，但css不支持这四页。我的页眉和页脚部分也没有显示相同的页面。

注入页面我只创建部分，没有页眉和页脚。

请告诉我，如果有可下载选项的任何演示链接，请告诉我。

'var app = angular.module（“app”，[]）;

app.config(function($routeProvider) {
    $routeProvider

        .when('/main', {
            templateUrl : 'index.html',
            controller  : 'mainController'
        })
        .when('/products', {
            templateUrl : 'fareproducts.html',                              
            controller  : 'fareproductsController'
        })
        .when('/activation', {
            templateUrl : 'keycardactivation.html',
            controller  : 'keycardactivationController'
        })
        .when('/learnmore', {
            templateUrl : 'learnmore.html',
            controller  : 'learnmoreController'
        });
});

app.controller('fareproductsController', function($scope) {

    //$scope.message = 'Everyone come and see how good I look!';
});

app.controller('keycardactivationController', function($scope) {
    //$scope.message = 'Look! I am an about page.';
});

app.controller('learnmoreController', function($scope) {
    //$scope.message = 'Contact us! JK. This is just a demo.';
});'


<!DOCTYPE HTML>
<html ng-app="app">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Smartphone Compatible web design" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>

<body>
    <!-- banner -->
    <div class="wrapper">
        <div class="container-fluid">
            <div class="header">
                <div class="logo">
                    <h1 class="text-center">Welcome</h1>
                    <!-- <h1>{{message}}</h1> -->
                </div>
                <div class="navigation">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="hvr-bounce-to-bottom button"><a href="index.html" class="scroll"><div class="menuImg"><img src="images/1.png" class="iv"/></div><span>Home</span></a>
                                </li>
                                <li class="hvr-bounce-to-bottom button"><a href="fareproducts.html" class="scroll"><div class="menuImg"><img src="images/2.png" class="iv"/></div><span>Fare Products</span></a>
                                </li>
                                <li class="hvr-bounce-to-bottom button"><a href="parking.html" class="scroll"><div class="menuImg"><img src="images/3.png" class="iv"/></div><span>Parking</span></a>
                                </li>
                                <li class="hvr-bounce-to-bottom button"><a href="keycardactivation.html" class="scroll"><div class="menuImg"><img src="images/4.png" class="iv"/></div><span>Master Card® Debit</span></a>
                                </li>
                                <li class="hvr-bounce-to-bottom button"><a href="#contact" class="scroll"><div class="menuImg"><img src="images/5.png" class="iv"/></div><span>FAQs</span></a></li>
                                <li class="hvr-bounce-to-bottom button"><a href="#contact" class="scroll"><div class="menuImg"><img src="images/6.png" class="iv"/></div><span>Search</span></a></li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </nav>
                </div>
                </div>

                <div class="content">
                    <div ng-view="">
                        <div class="logbtn">
                            <button class="btn btn-default btn-lg btn-block btn1" name="" value="Learn More"><a href="#learnmore">Learn More</a></button>
                            <button class="btn btn-default btn-lg btn-block btn2" name="" value="Login To Travel">Login To Travel</button>
                            <button class="btn btn-default btn-lg btn-block btn3" name="" value="Go to Master Card® Debit">Go to Master Card® Debit</button>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="js/spa.js"></script>
    <!--- footer ---->
</body>

</html>

Answer 1

解决方案＃1（更好）：为您的零件创建单独的指令

头-directive.js：

angular.module('myApp')
     .directive('header',function(){
         return {
             restrict: 'A',
             template: 'path/to/header.html'
         }
     }
}

主模板中的

：

....
<div header></div>
....

<强>溶液＃2

主模板中的某个地方

<script type="text/ng-template" id="header.html">
    This is header
</script>

在应放置标题的主模板中：

<div ng-include src="'header.html'"></div>

Answer 2

 Hi please have look on [this](http://embed.plnkr.co/uq4gjR5kbiN5Y7HQWJKk/)

Follow code structure like below:
    app/
    ----- controllers/
    ---------- mainController.js
    ---------- otherController.js
    ----- directives/
    ---------- mainDirective.js
    ---------- otherDirective.js
    ----- services/
    ---------- userService.js
    ---------- itemService.js
    ------Router
    ----------mainRouting.js
    ----- js/
    ---------- bootstrap.js
    ---------- jquery.js
    ----- app.js
    views/
    ----- mainView.html
    ----- otherView.html
    ----- index.html

如何在Angular中创建单页面应用程序？

2 个答案: