Части страницы как подпункты в Angular

У меня проблема:

В локальном меню (меню слева) я могу выбрать вспомогательные страницы. Типичный сценарий. И теперь я хотел бы переназначить контент, связанный с местным пунктом меню. В чистом Angular я не знаю стандартный простой способ его достижения. Я мог бы получить разметку с сервера вручную и вручную заменить область содержимого. Есть ли способ лучше? Я googled и наткнулся

https://github.com/angular-ui/ui-router

Но прежде, чем я начну разбираться в деталях, возможно, вы могли бы советовать, как решить эту проблему. Или даже совет, если я могу решить эту проблему с помощью ui-router.

Ответ 1

Вы хотите использовать вложенные состояния с помощью ui-router. Что-то вроде этого

$stateProvider
    .state('home', {
            templateUrl: 'views/home.html',
            url: '/home',
            controller: 'homeCtrl'
        })
    .state('home.localmenu1', {
        templateUrl: 'views/localmenu1.html',
        url: '/home/local1',
        controller: 'local1Ctrl'
    })
    .state('home.localmenu2', {
        templateUrl: "views/localmenu2.html",
        url: '/home/local2',
        controller: 'local2Ctrl'
    })
    .state('products', {
        templateUrl: 'views/products.html',
        url: '/products',
        controller: 'productsCtrl'
    })

Итак, внутри вашего "views/home.html" вы можете поместить элемент с директивой ui-view. Затем этот элемент будет содержать представления под-состояний (home.localmenu1, home.localmenu2).

Ответ 2

В некоторой степени похожий на kseb ответ, если вы предпочитаете использовать готовые Angular, вы можете использовать ng-include для этого. Присоединив контроллер, вы можете изменить то, что вы хотите показать там, как легко, как можете, для любого другого "реального" вида.

Если вы создаете файл menu.html в своих /views:

<li ng-repeat="menu in menus">
    <a href="{{menu.link}}">{{menu.name}}</a>
</li>

Вы можете включить его в свой index.html следующим образом:

<body>
    <ul ng-include="views/menu.html" ng-controller="MenuCtrl"></ul>
    <div class="container" ng-view></div>
</body>

Это делает трюк и полностью действует, работает во всех браузерах. Контроллер может быть как любой другой контроллер, который вы можете использовать.

Ответ 3

Для локальных меню, где строка URL не важна, я часто использую ng-include без ng-view:

<script id="view1" type="text/ng-template">
    <div ng-controller="View1Ctrl">
      Hello view1.
    </div>
</script>
<script id="view2" type="text/ng-template">
    <div ng-controller="View2Ctrl">
      Hello view2.
    </div>
</script>

<ul class="menu" ng-init="template='view1'">
   <li><button ng-click="template='view1'">view1</button></li>
   <li><button ng-click="template='view2'">view2</button></li>
</ul>

<div ng-include src="template"></div>

Ответ 4

Вы действительно можете и это довольно легко.

Проверьте документацию ui-router, особенно примеры кода и plunker в разделе о вложенных состояниях и представлениях.

Ответ 5

Пока ваш ng-view не требует рендеринга суб-представления с изменениями маршрута URL-адреса, вы можете использовать ng-view

Посмотрите на этот ответ несколько страниц приложения AngularJS

Если это ваш html

<body ng-app>
    <div id='topNav' ng-include='templateUrl' ng-controller='topNavController'></div>
    <div id='left' ng-include='templateUrl' ng-controller='leftNavController'></div>
    <div ng-view>
</body>

Ваши маршруты можно определить следующим образом

#/home   //home `ng-view`
#/products   //product list `ng-view`
#/products/1  // product details `ng-view`
#/products/1/feedback   //product 1 feedback `ngview`

При каждом изменении маршрута вы заменяете ng-view.