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

Question

I am beginner in angular, now working on single page application. 我是angular的初学者，现在在单页应用程序上工作。 i want to inject four pages into index.html. 我想将四个页面注入index.html。

Its working fine here, but css not supporting that four pages. 它在这里工作正常，但CSS不支持该四个页面。 Also my header and footer part not showing same pages. 另外我的页眉和页脚部分没有显示相同的页面。

injecting pages i am creating only section part there is no header and footer. 注入页面我仅创建部分，没有页眉和页脚。

Please advice me, if have any demo links with downloadable options please let me know. 请告知我，如果有任何带有可下载选项的演示链接，请告诉我。

'var app = angular.module("app", []); '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

Solution#1 (better): create separate directives for your parts 解决方案1（更好）：为零件创建单独的指令

header-directive.js: header-directive.js：

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

in main template: 在主模板中：

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

Solution#2 解决方案＃2

Somewhere in main template 主模板中的某处

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

In main template where header should be placed: 在主模板中应放置标题的位置：

<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 个解决方案

解决方案1
-1 2016-03-02 07:33:22

解决方案2
-1 2016-03-02 07:37:12

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

问题描述

2 个解决方案

解决方案1 -1 2016-03-02 07:33:22

解决方案2 -1 2016-03-02 07:37:12

解决方案1
-1 2016-03-02 07:33:22

解决方案2
-1 2016-03-02 07:37:12