Parts of page as subviews in Angular

问题

I have the following problem to solve:

From within local menu (menu on the left) I can choose sub pages. Typical scenario. And now I would like to relaod content associated with local menu item. In pure Angular I don't know a standard easy way to achieve it. I could get markup from the server manually and replace the content area manually. Is there a better way? I googled and came across

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

Yet before I start delving into details perhaps you could advice how to solve this problem. Or even advice if I can solve this issue with ui-router.

回答1:

You want to use nested states in with ui-router. Something like this

$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'
    })

So inside your "views/home.html" you can put an element with the ui-view directive. Then this element will contain the views of the sub-states (home.localmenu1, home.localmenu2).

回答2:

Somewhat similar to kseb's answer, if you prefer to use out-of-the-box Angular, you can use ng-include for this. By attaching a controller you can change what you want shown there as easily as you can for any other "real" view.

If you create a menu.html file in your /views:

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

You can include it in your index.html like this:

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

That does the trick and is fully valid, works in all browsers. The controller can be just like any other controller you might use.

回答3:

For local menus where URL bar is not important I often use ng-include without 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:

You can indeed and it's quite easy.

Check out ui-router's documentation, especially the code examples and plunker in the section about nested states and views.

回答5:

As long as your ng-view does not require sub view rendering with url route changes, you can use ng-view

Look at this answer AngularJS application multiple pages

If this is your 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>

Your routes can he defined like this

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

You ng-view is replace with each route change.

来源：https://stackoverflow.com/questions/19569581/parts-of-page-as-subviews-in-angular

标签

javascript

angularjs

angular-ui-router