How do I add pages to an existing AngularJS application? – Twitter bootstrap

I have a pre-built AngularJS application for user authentication using the MEAN Stack. I also have several standalone HTML pages that I would like to include with the app. The purpose of the inclusion would be to include the navigation bar to include user data.

https://www.sitepoint.com/user-authentication-mean-stack/ – This was the app I built off of.

I have tried simply adding a route inside of my app.js like so:

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)
}

The issue that I face here is that all of my styling is completely thrown out as well as some javascript that is used in the page is thrown out. Which this page is to use a video player and that isn’t displaying as well.

Here is some snippets from Video.HTML to show what I’m using:

    <!-- 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>

I’m not sure how to proceed from here. I’m not sure if what i’m trying to do can be done. I even tried building a separate app that uses the same backend to pull the information but I failed at that miserably. Skills aren’t up to par on something like that yet.

I have serveral ideas of how to make it work if anyone could find one and run with it or come up with a better one i’d appreciate it
– build two different AngularJS pages.
– Build a separate app that talks to the same MongoDB – seems very challenging
– When I try removing the styling from Index.HTML of the AngularJS application it still does not like mine