Angular -ngRoute: format the contents of ng-view, enable navigation afterwards

When using ngRoute, I want Angular to be configured so that the current ng-view content remains as the content for the current route and allows the user to navigate to different routes, after which they display their respective templates

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:

First load

Note: Angular must be loaded at this point with directives in force in this area.

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


Then, when the "view2" link is clicked:

Clicks on 'view2'


And then when the link "view1" is clicked:

Clicks on 'view1'


$route.updateParams(newParams), , .

,

//Server-side rendered code

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

 angular.bootstrap(myModule);

app.js:

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

Angular, , ng-view ? / ngView ( ) ? , , ?

EDIT: . , ng-view $templateCache .

+3
2

, templateUrl . , - :

var initialized = false;

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

   initialized = true;

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

Plunker, .

+1

, , . @Josh . $templateCache - . , , .

- . , script, , .

- , . , , , .

... ui-router)). , - .

0

All Articles