0

目前正在做AngularJs项目

我有 2 个文件夹

一个是 index 文件夹和 page 这个文件夹有一个 index page 和 4 个菜单，

索引页面代码：

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

4 个菜单分别是 home 、project 等

如果我单击一个主菜单，则会显示如下图所示的一些内容：

在此处输入图像描述

如果我单击项目菜单，如下图所示

在此处输入图像描述

这两种方式都有助于仅显示内容（文本），但我想显示另一页（不是文本）

我有项目页面（html），如果我选择项目菜单，那么我想显示项目页面。

就像索引页面一样，就像母版页一样，其他页面是内容页面方式？可以在 angularjs 中使用吗？

4

2 回答 2

2

你可能想看看这个文档 - http://docs.angularjs.org/api/ngRoute.directive:ngView

这应该可以帮助你实现你想做的事情。

此外，您可能希望遵循有关您的 ng-app 的角度指南，例如

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

希望有帮助。

于 2013-10-08T06:30:15.263 回答
1

您可能想查看angular-ui-router。与内置 '$route' 和 'ngView' 相比，它是一个更复杂的模块，但是当你将来必须创建更复杂的导航结构（如二级导航等）时，你会很感激。您可以从本教程开始或直接跳到文档。

于 2013-10-08T06:38:58.843 回答