如何将页面添加到现有的AngularJS应用程序？
我有一个预建的AngularJS应用程序，用于使用MEAN堆栈进行用户认证。我也有几个独立的HTML页面，我想包含在应用程序中。包含的目的是包括导航栏以包含用户数据。如何将页面添加到现有的AngularJS应用程序？
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 © 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中的造型仍然不喜欢我
角治疗的video.html作为模板所以它忽略除了身体标记的内容之外的所有内容。
您需要将<head>内容和<script>标签从video.html添加到您的主HTML文件（您在其中有ng-app指令的文件中）。
我以前尝试过，但它不工作。这一次你说过“一切”，所以包括内联JavaScript以及一切似乎工作。仍在播放以确认其正在工作。但如果这个解决方案导致问题，我一定会张贴给其他人看。 –
但是，我必须为独立HTML内的每个页面添加路由吗？这只是试图添加一个这个时间 –
如果你想在整个网站的角度导航然后是的。你必须为你想要的每个角度视图添加路线。这不完全是一个页面。 –
不知道你的web应用程序的目的或任何其他细节，我可以尝试给我最好的建议。
Angular JS路由仅用于内部导航。这意味着您无法设置在角度应用生态系统之外导航的路线（即您的video.html页面）。我没有看到你的导航源代码，但你可以做这样的事情来导航到video.html页面并绕过ngRouter。
<a target="_self" href='/video.html'>Videos</a>
（更多的信息在这里：https://docs.angularjs.org/guide/ $位置＃HTML链接重写）
至于CSS问题，我相信这是不是一个里面的风格标签所致块。有一件事要做的是检查Web开发者控制台。打开Chrome（或您选择的浏览器）并点击Cmd + alt + i（在Mac上）。或者转至查看 - >开发人员 - >开发人员工具并单击控制台选项卡。您可以在那里看到任何错误或警告。
我可能会做的第一件事就是使用浏览器的调试器查看为响应各种请求而发送的HTML。还要查看在进行了各种更改后由浏览器抛出的错误（“404”，等等）。另外，请记住，“when”条款按发生顺序进行评估，*不是“最合适的”。 –