如何將頁面添加到現有的AngularJS應用程序？
[英]How do I add pages to an existing AngularJS application?
問題描述
我有一個預構建的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 © 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中刪除樣式時，它仍然不喜歡我的樣式
2 個解決方案
解決方案1
3 2016-07-06 15:14:11
Angular video.html的video.html作為模板，因此它忽略除body標簽內容之外的所有內容。
您需要將video.html <head>內容和<script>標記video.html到主HTML文件（具有ng-app指令的文件）中。
解決方案2
0 2016-07-06 15:22:58
在不知道您的網絡應用程序的目的或任何其他細節的情況下，我可以嘗試提供最好的建議。
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上）。 或者轉到View-> Developer-> Developer Tools並單擊控制台選項卡。 您可以在那里看到任何錯誤或警告。
我如何使用JBoss API在架構上Kerberize AngularJS應用程序
[英]How do I architecturally Kerberize an AngularJS application with a JBoss API
如何獲得可與Karma一起使用的Browserfied AngularJS應用程序？
[英]How do I get a Browserfied AngularJS application working with Karma?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.