CODEWITHSUNDEEP
jqueryangularjsmenumaster-pagessingle-page-application
Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

Angularjs Menus like a master page questions

Currently am doing on AngularJs project

I have 2 folder

one is index folder and page this folder have one index page with 4 menus ,

Index page code :

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Learn AngularJS - Inline Editor</title>

        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />

        <!-- The main CSS file -->
        <link href="style.css" rel="stylesheet" />

        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <!-- Notice the controller directive -->
    <body ng-app ng-controller="InlineEditorController">

        <!-- When this element is clicked, hide the tooltip -->
        <div id="main" ng-click="hideTooltip()">

            <!-- This is the tooltip. It is shown only when the showtooltip variable is truthful -->
            <div class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">

                <!-- ng-model binds the contents of the text field with the "value" model.
                     Any changes to the text field will automatically update the value, and
                     all other bindings on the page that depend on it.  -->

                <input type="text" ng-model="value" />
            </div>

            <!-- Call a method defined in the InlineEditorController that toggles
             the showtooltip varaible -->
            <p ng-click="toggleTooltip($event)">{{value}}</p>

        </div>

        <!-- Include AngularJS from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

The 4 menus are home ,project, etc

If i click one home menu show the some content like this image:

enter image description here

If i click project menu , Like see this below image

enter image description here

The both of way's helps to showing the content(text) only , But i want to shown one other page (not text)

I have project page (html) , if i choose the project menu then i want to shown project page .

Like same as the index page is like a master page and other page's are content pages way ? Is possible in angularjs ?

Upvotes: 0

Views: 2349

Answers (2)

T W
T W

Reputation: 6317

You might want to check out angular-ui-router. It's a bit more complex module in comparison to build in '$route' and 'ngView', but you'll be thankful when you'll have to create more complex navigation structures in future (like second level nav etc). You can start with this tutorial or jump straight to docs.

Upvotes: 1

Given
Given

Reputation: 166

You might want to have a look through this documentation - http://docs.angularjs.org/api/ngRoute.directive:ngView

That should help you achieve what you want to do.

Also you may want to follow the angular guidelines with regards to your ng-app, for example

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <!-- controller logic -->
    </div>
</div>

Hope that helps.

Upvotes: 2

Related Questions