Angularjs - 单页应用程序不呈现页面模板答案

【问题标题】：Angularjs - Single Page Application Not Rendering Page TemplatesAngularjs - 单页应用程序不呈现页面模板
【发布时间】：2017-03-31 15:10:05
【问题描述】：

所以我尝试使用 Angular 制作 SPA，但是当我尝试在 localhost 上打开我的页面时，导航栏会显示，但我在单独的 HTML 文档中没有加载任何内容。我觉得好像我错过了什么，但我不确定是什么。

HTML

<html lang="en" ng-app="App"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--External Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <!-- Internal Styles -->
    <link rel="stylesheet" href="css/style.css">

    <!-- External Scripts -->
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/anime.min.js"></script>
    <script src="js/anime.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/a1dcc6967b.js"></script>

    <!-- Internal Scripts -->
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">

        var CSStransforms = anime({
            targets: '#CSStransforms .el',
            translateX: 250,
            scale: 2,
            rotate: '1turn'
        });

    </script>

    <title>Bootsrap Shell With Navabar</title>

</head><body ng-controller="mainController">        
      <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">

        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="/">Navbar</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item ">
                    <a class="nav-link active" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/Page-Name">Page</a>
                </li>
                <!-- Dropdown - Delete from this comment to the next if you don't want it -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separted</a>
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown user">

                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Signed in as </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Edit Profile</a>
                        <a class="dropdown-item" href="/logout.php"><i class="fa fa-sign-out" aria-hidden="true"></i> Log Out</a>
                    </div>

                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" data-toggle="modal" data-target="#register-modal" href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Register</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#login-modal" href="#"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</a>
                    </div>

                </li>
            </ul>
        </div>

    </nav>

    <div id="login-modal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="login-modal-container">
                <form id="login-form" role="form">
                    <div class="modal-body">
                        <h2 class="modal-text">Login To Your Account </h2>
                        <div id="err-msg"></div>
                        <div class="form-group">
                            <input type="text" id="username" name="username" placeholder="Your Username" class="form-control input-lg" />
                        </div>
                        <div class="form-group">
                            <input type="password" id="password" name="password" placeholder="Password" class="form-control input-lg" />
                        </div>
                        <div class="form-group">
                            <div id="captcha"></div>
                        </div>
                        <div class="form-group">
                            <input type="submit" id="login" name="login" value="Log In" class="btn btn-primary btn-block btn-lg" data-toggle="tooltip" data-placement="bottom" title="Press To Sign In" />
                        </div>
                    </div>
                    <div class="modal-footer modal-text">
                        Don't have an account? <a data-toggle="modal" data-target="#register-modal" href="#" data-dismiss="modal">Sign Up here</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="main">

        <div ng-view></div>

    </div>

</body>


</html>

JavaScript

var App = angular.module('App', ['ngRoute']);

// configure our routes
App.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        })

        .otherwise({redirectTo: '/'});
});

// create the controller and inject Angular's $scope
App.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

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

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

编辑

Bower 用于获取角度

{"name": "site","authors": ["Luculent"],"description": "","main":"index.php","license": "MIT","homepage": "/","ignore": ["**/.*","node_modules","bower_components","test","tests"]}

编辑 2

获得了 angular 1.6.3 但仍然无法正常工作

编辑 3

当我启动页面时，它会生成以下异常：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=App&p1=Error%3A%20%…%20%20%20at%20eb%20(http%3A%2F%2Flocalhost%2Fjs%2Fangular.min.js%3A46%3A44)
at angular.min.js:6
at angular.min.js:42
at p (angular.min.js:7)
at g (angular.min.js:41)
at eb (angular.min.js:46)
at c (angular.min.js:21)
at Pc (angular.min.js:22)
at ue (angular.min.js:20)
at angular.min.js:332
at HTMLDocument.b (angular.min.js:38)

但正如你在上面看到的，我有 angular.js 和 angular-route。

【问题讨论】：

打开开发者控制台有输出吗？或没有错误
如果这些控制器都在一个文件中，您可以链接我们的 App.controller('asdf').controller('asdf2').config().service.filter 等
您还可以添加完整的 html 文件以显示脚本引用吗？此外，您的控制台条目在此处不可见
顺便说一句，我运行了你的代码，它实际上对我有用
可能是我的网络服务器

标签： javascript php html angularjs single-page-application

【解决方案1】：

您是否包含了角度路线

它不再默认包含在 angularjs 中

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js" type="text/javascript"></script>

【讨论】：

是的，控制台中的注入器错误也表明！
我确实导入了角度路线，但它不起作用

【解决方案2】：

请尝试从下一行删除 ngRoute 标签

var App = angular.module('App', ['ngRoute']);

您已经在此处提供了 $routeProvider

【讨论】：

在我的控制台中仍然输出相同的内容，并且没有像往常一样的内容
尝试从 url 向服务器单独请求 html 页面。看起来 PHP 没有提供 html 静态文件
我可以在浏览器中从文件目录中获取它们，但不能在我的网站上获取它们。我什至将 index.php 文档更改为 HTML，但这不起作用。所以这不是PHP问题。即使使用 localhost/pages/filename 我也可以得到它们
是的，你是对的，你必须修复 apache 服务器才能正确提供静态内容
当我正在运行 wamp64 时，我将如何处理这个问题？我敢肯定这很简单。