Question

我有一个预构建的AngularJS应用程序，用于使用MEAN Stack进行用户身份验证。我还有几个独立的HTML页面，我想在应用程序中包含这些页面。包含的目的是包括导航栏以包括用户数据。

https://www.sitepoint.com/user-authentication-mean-stack/ - 这是我构建的应用程序。

我试过在我的app.js里面添加一条路线就像这样：

APP.JS

! function() {
function n(n, e) {
    n.when("/", {
        templateUrl: "home/home.view.html",
        controller: "homeCtrl",
        controllerAs: "vm"
    }).when("/register", {
        templateUrl: "/auth/register/register.view.html",
        controller: "registerCtrl",
        controllerAs: "vm"
    }).when('/video', {
    templateUrl: 'video/video.html',
    }).when("/login", {
        templateUrl: "/auth/login/login.view.html",
        controller: "loginCtrl",
        controllerAs: "vm"
    }).when("/profile", {
        templateUrl: "/profile/profile.view.html",
        controller: "profileCtrl",
        controllerAs: "vm"
    }).otherwise({
        redirectTo: "/"
    }), e.html5Mode(!0)
}

我在这里遇到的问题是我的所有样式都被完全抛弃了，并且页面中使用的一些javascript被抛弃了。这个页面是使用视频播放器，也不是显示。

以下是来自 Video.HTML 的一些片段，以显示我正在使用的内容：

    <!-- Custom CSS -->
<link href="css/clean-blog.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery-comments.css">

<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' 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]-->

<!-- jQuery Comments -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-comments.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="data/comments-data.js"></script>

<!-- Init jquery-comments -->
    <script type="text/javascript">
        $(function() {
            $('#comments-container').comments({
                profilePictureURL: 'https://viima-app.s3.amazonaws.com/media/user_profiles/user-icon.png',
                roundProfilePictures: true,
                textareaRows: 1,
                enableAttachments: true,
                getComments: function(success, error) {
                    setTimeout(function() {
                        success(commentsArray);
                    }, 500);
                },
                postComment: function(data, success, error) {
                    setTimeout(function() {
                        success(data);
                    }, 500);
                },
                putComment: function(data, success, error) {
                    setTimeout(function() {
                        success(data);
                    }, 500);
                },
                deleteComment: function(data, success, error) {
                    setTimeout(function() {
                        success();
                    }, 500);
                },
                upvoteComment: function(data, success, error) {
                    setTimeout(function() {
                        success(data);
                    }, 500);
                },
                uploadAttachments: function(dataArray, success, error) {
                    setTimeout(function() {
                        success(dataArray);
                    }, 500);
                },
            });
        });
    </script>
<navigation></navigation>
<body ng-view>
<header class="intro-header" style="background-image:  v     url('img/johnnycash.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <h1>Heading</h1>
                    <hr class="small">
                    <span class="subheading">Span text</span>
                </div>
            </div>
        </div>
    </div>
</header>
<video width="1080" height="500" poster="media/cars.png">
    <source src="media/cars.mp4" type="video/mp4">
</video>

<script>
$(document).ready(function() {
    $('video').mediaelementplayer({
        alwaysShowControls: false,
        videoVolume: 'horizontal',
        features: ['playpause','progress','volume','fullscreen']
    });
});
</script>
<hr>
<!-- Main Content -->
<div id="comments-container"></div>
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    <li>
                        <a href="http://www.twitter.com">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="http://www.facebook.com">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="http://www.instagram.com">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                </ul>
                <p class="copyright text-muted">Copyright &copy; Copyright 2016</p>
            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<!--script src="js/jquery.js"></script-->

<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>

我不确定如何从这里开始。我不确定我想做的事情是否可以完成。我甚至尝试构建一个单独的应用程序，使用相同的后端来提取信息，但我失败了。对于类似的事情来说，技能并没有达到标准。

如果有人能找到并运行它或者想出一个更好的一个我会很感激，我有几个想法如何让它工作 - 构建两个不同的AngularJS页面。
- 构建一个与同一个MongoDB对话的独立应用程序 - 似乎非常具有挑战性 - 当我尝试从AngularJS应用程序的Index.HTML中删除样式时，它仍然不喜欢我的

Answer 1

Angular视图video.html作为模板，因此忽略除body标签内容之外的所有内容。

您需要将<head>内容和<script>标记从video.html添加到您的主HTML文件（您拥有ng-app指令的文件中）。

Answer 2

在不知道您的网络应用程序的目的或任何其他细节的情况下，我可以尝试提供最好的建议。

Angular JS路由仅用于内部导航。这意味着您无法设置在角度应用生态系统之外导航的路线（即您的video.html页面）。我没有看到导航的源代码，但您可以执行类似这样的操作来导航到video.html页面并绕过ngRouter。

<a target="_self" href='/video.html'>Videos</a>

（有关此处的更多信息：https://docs.angularjs.org/guide/ $ location＃html-link-rewriting）

就CSS问题而言，我认为这是由于Style标签不在块内。要做的一件事是检查Web开发人员控制台。打开Chrome（或您选择的浏览器）并点击Cmd + alt + i（在Mac上）。或者转到查看 - >开发人员 - >开发人员工具，然后点击控制台标签。你可以在那里看到任何错误或警告。

如何将页面添加到现有的AngularJS应用程序？

2 个答案: