如何使用 angularjs 路由显示特定的 div？

Question

Header contents=>主菜单名称是service，其子菜单是abc,def,pqr。这是在index.html
和service.html分别有3个div的一个显示包含abc，两个显示包含def，三个显示包含pqr。
当我单击 header 菜单（i.e.service=>abc 或 def 或 pqr）时，有来自 index.html 的 angularjs 路由调用，然后它应该显示其特定的 div 其他的就不显示了。

Answer 1

将 ng-view 标签放入 index.html 下载 angular 路由并将此依赖项注入您的应用程序。将路由代码设置为

app.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        redirectTo : '/user'
    })
    .when('/register', {
        templateUrl: 'client_assets/views/register.html',
        controller: 'registerController'
    })
    .when('/login', {
        templateUrl: 'client_assets/views/log_in.html',
        controller: 'logInController'
    })
})

现在根据路由决定html你要添加的模板和控制器。

Answer 2

使用菜单项作为在url中传递的参数，然后使用ng-switch或ng-show显示选择的内容。

app.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        redirectTo : '/'
    })
...
    .when('/menu/:item', {
        templateUrl: 'index.html',
        controller: 'indexController'
    })

在控制器中，注入$routeParams:

app.controller('indexController', function($scope, $routeParams) {
  $scope.menuItem = $routeParams.item;
});

在索引中：

<div ng-show='menuItem == "abc">abc</div>
<div ng-show='menuItem == "def">def</div>
<div ng-show='menuItem == "pqr">pqr</div>

额外的好处，您不必创建新路线来创建包含 index.html

中内容的新菜单

缺点，变得拥挤 index.html

如何使用 angularjs 路由显示特定的 div？

How to show particular div using angularjs routing?

angularjs

angularjs-routing