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

So I was trying to make a SPA using angular but when I try to open my page on a localhost the navbar displays but none of the content I have in separate HTML documents loads. I feel as if I'm missing something but I'm not sure what.

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.';
});

Edit

Bower was used to get angular

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

Edit 2

got angular 1.6.3 but still does not work

Edit 3

when I launch the page it generates the following exception:

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)

But as you can see above I have both angular.js and angular-route.

dongxiusuo9881
dongxiusuo9881 这里的问题是它没有通过URL提供HTML文件。他必须修复他的wamp64服务器以返回HTML
3 年多之前 回复
drno94939847
drno94939847 这对@Phil有帮助吗?
3 年多之前 回复
dqqfuth6736
dqqfuth6736 取决于你的bower.json的样子
3 年多之前 回复
duangu4980
duangu4980 我可能有。如果我用凉亭得到它,它会这样做吗?
3 年多之前 回复
doukuai3822
doukuai3822 此外,“angular.min.js中的意外令牌导入”表明你已经抓住了Angularv2而不是Angularv1。
3 年多之前 回复
dsv73806
dsv73806 anime.js不在了。意识到我在写这篇文章时仍然有它
3 年多之前 回复
doudilin1225
doudilin1225 没有ng-app?另外,为什么包括anime.min.js和anime.js?
3 年多之前 回复
dqkgxq0561
dqkgxq0561 是。这是一个我忘记拿出来的php片
3 年多之前 回复
duanlun4411
duanlun4411 该行应该在html<?php}?>中
3 年多之前 回复
dsb53973
dsb53973 将PHP与angular一起使用会导致某种错误吗?因为我也使用PHP作为一些后端的东西。
3 年多之前 回复
douzhao7445
douzhao7445 对造成的麻烦感到抱歉
3 年多之前 回复
du22399
du22399 你能加入开头的html和body标签吗?
3 年多之前 回复
douchen1924
douchen1924 [$injector:modulerr]错误是因为你没有包含该模块的js文件我假设它为ngRoute因为这是你在angular.app行中包含的唯一模块
3 年多之前 回复
dongshi949737
dongshi949737 你的`AngularJSRoute模块'是正确的吗?
3 年多之前 回复
dqwh26750
dqwh26750 可能是我的网络服务器
3 年多之前 回复
duanhan9479
duanhan9479 顺便说一句,我运行你的代码,它实际上为我工作
3 年多之前 回复
dpoh61610
dpoh61610 你还可以添加完整的html文件来显示脚本引用吗?此处也看不到您的控制台条目
3 年多之前 回复
dongting3135
dongting3135 如果thoes控制器都在一个文件中,你可以链接我们的App.controller('asdf')。controller('asdf2')。config()。service.filter等
3 年多之前 回复
dongyi1015
dongyi1015 打开开发者控制台输出什么?或没有错误
3 年多之前 回复

2个回答

did you include angular route

Its no longer included into angularjs by default

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js" type="text/javascript"></script>
dqybjj3497
dqybjj3497 我确实导入了angular route但它不起作用
3 年多之前 回复
dongmu5246
dongmu5246 是的,控制台中的喷油器错误也表明了!
3 年多之前 回复



请尝试从下面的行中删除ngRoute标记</ p>

  var App = angular.module  ('App',['ngRoute']); 
</ code> </ pre>

您已在此处提供$ routeProvider </ p>
</ div>

展开原文

原文

Please try removing ngRoute tag from below line

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

You are already providing $routeProvider here

douli2876
douli2876 当我正在运行wamp64时,我该怎么办呢? 我确信这很简单。
3 年多之前 回复
duandu8892
duandu8892 是的,你是对的,你必须修复apache服务器以正确地提供静态内容
3 年多之前 回复
dongziya9863
dongziya9863 我可以从文件目录中获取它们但不在我的网站上。 我甚至将index.php文档更改为HTML,但这不起作用。 所以它不是PHP问题。 即使使用localhost / pages / filename我也可以得到它们
3 年多之前 回复
dongye6377
dongye6377 尝试从url中单独从服务器请求html页面。 看起来PHP不提供html静态文件
3 年多之前 回复
douqing5981
douqing5981 仍然在我的控制台中输出相同的内容并且没有像往常一样的内
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐