1
MEAN 스택을 사용하여 사용자 인증을 위해 사전 제작 된 AngularJS 응용 프로그램이 있습니다. 또한 앱에 포함하려는 독립형 HTML 페이지가 여러 개 있습니다. 포함의 목적은 사용자 데이터를 포함하는 탐색 모음을 포함하는 것입니다.기존 AngularJS 응용 프로그램에 페이지를 추가하려면 어떻게합니까?
https://www.sitepoint.com/user-authentication-mean-stack/ - 이것은 제가 구축 한 앱입니다.
나는 단순히 그렇게처럼 내 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)
}
문제를 APP.JS 내 스타일 모두 완벽하다는 것이다 여기에 마주 밖으로 던져진뿐만 아니라 페이지에서 사용되는 일부 자바 스크립트가 버려집니다. 이 페이지는 동영상 플레이어를 사용하지만 표시되지 않습니다. 여기
내가 사용하고 무엇을 보여 한 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 파일 스타일링을 제거하려고하면 여전히 좋아하지 않는 내
아마도 가장 먼저 할 일은 브라우저의 디버거를 사용하여 다양한 요청에 대한 응답으로 보내지는 HTML을 확인하는 것입니다. 다양한 변경이 이루어진 후에 브라우저에서 던져지는 오류 ("404"등)도 찾아보십시오. 또한'when 절은 발생 순서에 따라 평가됩니다 * * 'best fit'이 아닙니다. –