Question

我一直在关注CodeSchool的AngularJS教程。

所以我有views/index.html，其中包含我的每个页面相同的样板代码。然后我的每个页面的模板都在views/templates/中，我希望将其包含在index.html页面中。因此，当主页加载时，它会加载views/index.html并包含views/templates/index.html。

视图/
- 的index.html
- 模板/
  - 的index.html
  - contact.html
  - about.html

目前我有

    <div id="menu">
        <a id="menu_home" href="/#/index" ng-click="menu.set(0)" ng-class="{current:menu.isSet(0)}">Home</a>
        <a id="menu_hire" href="/#/hire" ng-click="menu.set(1)" ng-class="{current:menu.isSet(1)}">For Hire</a>
        <a id="menu_info" href="/#/info" ng-click="menu.set(2)" ng-class="{current:menu.isSet(2)}">Info</a>
    </div>
    <div id="main">
        <ng-view></ng-view>
    </div>

效果很好。因此，只请求所需的html并将其插入页面。

但我的问题是网址在浏览器中没有变化。因此，如果用户直接转到mysite.com/contact，则无效。如果直接访问mysite.com/contact或mysite.com/about页面，如何正确加载页面？

我也使用ngRoute模块工作，但当用户直接访问某个页面时，同样的问题仍然存在。

感谢。

Answer 1

您应该使用类似于以下内容的ngRoute和$ routeProvider。

var navigationRoutes = angular.module('navigationRoutes', ['ngRoute']);

/**
 * Load routes for navigation using ngRoute
 */
navigationRoutes.config(function ($routeProvider) {
    $routeProvider
        .when('/index', {
            templateUrl: 'app/components/index/index.view.html',
            controller: 'IndexCtrl'
        })
        .when('/contact', {
            templateUrl: 'app/components/contact/contact.view.html',
            controller: 'ContactCtrl'
        })
        .otherwise({
            redirectTo: '/dashboard'
        });
});

这样您还可以根据URL指定不同的控制器。

更新

如果添加 -

，则在索引页面中

<div class="view">
    <div ng-view></div>
</div>

在您的主index.html页面中，$ routeProvider所选文件的内容将显示在此div中。您只需确保在index.html页面中添加controller.js文件的标记。

Answer 2

您需要在网络服务器中进行这些设置，以便将所有网址重定向到您加载角度应用的索引页面，然后加载角度应用，然后处理路径

AngularJS - 如何根据URL加载ng-view？

2 个答案: