I'm needing some very basic advice please. I am currently completing a diploma in full stack developing and have to do a project for the end of front end development. However I am a little stuck, I had written my page mostly out in html5 and css, but then realised that I have to use angular for the framework of my site and try and include some bootstrap in.

So my problem at the minute is, I am trying to swap the html over to angular as much as I can, I have an index page that is including all the stuff that I want on every single page, such as nav bar, header, footer and side bar. But how do I rewrite it into my angular js?

This is html

    `<!DOCTYPE html>
    <html>
    <head>
        <title>The Monkees</title>
    </head>
    <body>
    <div id="main">
     <div class="container">
         <div id="header">
     <div id="logo">
     <h1></h1>
     </div>
     <div id="tagline">
        <h3>Back to the 1960's</h3>
     </div>
     <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Our Music</a></li>
        <li><a href="#">Book Us Now</a></li>
     </ul>
     </div>
         <div id="content">
            <p> Welcome to our website. <br> The Monkees are a band of four members, singing top rock music from the 1960's. The Monkees have been performing live for our fans for over 50 years and hope to continue for years ahead, with the help of you. We are available to play at events covering the whole of the UK, to find out more please check our events page. <br> Please have a look around and explore more of who we are and what we do. <br> We upload our new material here so that you (our no.1 fans) can keep up to date with us, after all you are our 5th and most important group member. <br> If you require to book our band for a future event please use the form provided to check availability and prices. 
            </p>
         </div>

         <div id="sidebar">
            <div id="subscribe">
                    <h3>Subscribe!</h3>
                    <ul>
                        <li><a href="#">Subscribe</a></li>
                        <li><a href="#">Get Email Updates</a></li>
                        <li><a href="#">Follow us on Twitter</a></li>
                    </ul>
                </div>
                <div id="popular">
                    <h3>Popular Items</h3>
                    <ul>
                        <li><a href="#">Our last event</a></li>
                        <li><a href="#">Our next event</a></li>
                        <li><a href="#">Join our facebook page</a></li>
                        <li><a href="#">Book us for your event</a></li>
                    </ul>
                </div>
            </div>
         </div>

    </div>
</div>
      <div id="footer">
    <div class="container">
    <h4>Thank you! Our fans are our main priority</h4>
    <p>Many thanks for taking the time to view our website, we value your support, please keep up to date with our latest news via Facebbok, Twitter and our email subscription service. </p>
    </div>
</div>

</body>
    </body>
    </html

This is my angular where I need sidebar, header with image for logo and pref background image, along with navbar and footer

<!DOCTYPE html>
<head>
    <title>Angular Testing</title>

    <base href="/">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>

    <link rel="stylesheet.css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style type="text/css">
        body {
            padding-top: 70px;
        }
    </style>
</head>

<body ng-app="sampleApp">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Angular Test</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/">Home</a></li>
                <li><a href="/about">About Us</a></li>
                <li><a href="/events">Events</a></li>
                <li><a href="/ourmusic">Our Music</a></li>
                <li><a href="/book">Book Us Now</a></li>
            </ul>
        </div>
        </nav>
        <div ng-view>
        <!-- This is our ng-view. The contents of the files in the templates directory are loaded here by Angular
        when we click on the appropriate link. app.js decides which file is loaded. -->
        </div>

    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
</body>

</html>

what tags and where? Also to put the images in for the sidebar icons and header.

sorry if I sound thick, I seemed to have it all sorted and started out great with the navbar then my head has just gone blank.

Thank you in advance for any help or advice.

share
    
I would say check the Angular website docs – LiverpoolCoder 4 mins ago
    
is this Angular.js (1.x) or Angular (2.x)? The code looks like Angular.js but you have the [angular2] tag. Also, it's not really clear what your question is; you don't generally put a full HTML document into an angular partial, you put your static HTML in the index and the content that will change in the partials. – Claies 2 mins ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.