Angular-ngRoute：强制ng-view内容，之后允许导航

While using ngRoute, I want to have Angular configured so that the current contents of ng-view are left as the contents for the current route, and allow the user to navigate away to different routes, rendering their respective templates afterwards:

使用ngRoute时,我希望配置Angular,以便将ng-view的当前内容保留为当前路由的内容,并允许用户导航到不同的路由,然后呈现各自的模板:

Plunker

HTML

<ul class="menu">
  <li><a href="#/view1">view1</a></li>
  <li><a href="#/view2">view2</a></li>
</ul>

<div ng-view>
  <ul>
    <li>Some</li>
    <li>Soon obliterated</li>
    <li>Content</li>
  </ul>
</div>

JavaScript

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
  $routeProvider
  .when('/view1', {
    templateUrl: 'view1.html',
    controller: 'View1Ctrl'
  })
  .when('/view2', {
    templateUrl: 'view2.html',
    controller: 'View2Ctrl'
  })
  .otherwise({
    redirectTo: '/view1'
  })
})
.controller('View1Ctrl', function() {

})
.controller('View2Ctrl', function() {

});

---

When the user first sees the page, I want him to see the following:

当用户第一次看到该页面时,我希望他看到以下内容:

Note: Angular needs to be bootstrapped at this point, with directives functioning in this area.

注意:此时需要引导Angular,指令在此区域中起作用。

Note 2: This content should be in the actual HTML of the page, not in a template or script tag.

注意2:此内容应位于页面的实际HTML中,而不是模板或脚本标记中。

---

Then, when the 'view2' link is clicked:

然后,当点击'view2'链接时:

---

And then, when the 'view1' link is clicked:

然后,当点击'view1'链接时:

---

My first thought was using $route.updateParams(newParams) but I think that's not really its purpose.

我的第一个想法是使用$ route.updateParams(newParams),但我认为这不是它的目的。

EDIT I ended up using

编辑我最终使用

//Server-side rendered code

myModule
.config(['$routeProvider', function($routeProvider){
    $routeProvider.when('<# my current route #>',
        {
            templateUrl: '/server-static',
        });

 angular.bootstrap(myModule);

In app.js:

 myModule
    .config('$routeProvider', function($routeProvider){
        $routeProvider.when('/my-client-routes',
            {
                templateUrl: '/my-template.html',
            }); // etc.

How can I trick Angular into thinking that the contents of ng-view are the appropiate contents for the current entry route? Can I just cancel route resolution/ngView directive (or make it transclude) rendering for first load? Or if not possible, what's the preferred method to do this?

如何让Angular认为ng-view的内容是当前入口路径的适当内容?我可以取消第一次加载的路由解析/ ngView指令(或使其转换)渲染吗?或者,如果不可能,那么首选方法是什么?

Thanks

EDIT: See this answer that proposes adding the contents of ng-view to $templateCache through a custom directive.

编辑:请参阅此答案,建议通过自定义指令将ng-view的内容添加到$ templateCache。

2 个解决方案

#1

It's possible for templateUrl to be a function. In which case you can actually change the view based on some kind of state:

templateUrl可以是一个函数。在这种情况下,您实际上可以根据某种状态更改视图:

var initialized = false;

$routeProvider
.when('/view1', {
 templateUrl: function(){
   if(initialized){ 
     return 'view1.html';
   }

   initialized = true;

   return 'view-initial.html';
 },
 controller: 'View1Ctrl'
})

Here is a working Plunker based on yours.

这是一款基于你的Plunker。

#2

The task you're asking help for can be achieved in a number of ways. @Josh offers a good one. Using $templateCache is another option. But, as you correctly said, these are tricks.

您要求帮助的任务可以通过多种方式实现。 @Josh提供了一个很好的。使用$ templateCache是​​另一种选择。但是,正如你所说的那样,这些都是诡计。

Correct and only recommended approach is to use dedicated template for a default route. You can specify it via external file, via template cache or even script tag, but it's much better, clear and easy to support.

正确且唯一推荐的方法是使用专用模板作为默认路由。您可以通过外部文件,模板缓存甚至脚本标记来指定它,但它更好,更清晰,更容易支持。

If it's your own code - just choose any preferred way you like. If you want it to be shared with community, used as open-source or enterprise solution - I'd suggest to use the only recommended approach.

如果这是您自己的代码 - 只需选择您喜欢的任何首选方式。如果您希望它与社区共享,用作开源或企业解决方案 - 我建议使用唯一推荐的方法。

Or... look into ui-router )) . May be it's nested views support is the option you need.

或者......查看ui-router))。可能是它的嵌套视图支持是您需要的选项。