Обновить (F5) ngview с angularJS

Question

У меня проблема с моим угловым приложением. Приложение работает хорошо в первый раз, его можно перемещаться внутри, но он не работает, когда я пытаюсь обновить страницу с помощью F5. Когда нажата клавиша F5, частичный вызов вызывается на сервер, и сервер, очевидно, отвечает частичным представлением, но не всем приложением.

узел маршрутизации:

app.get('/', node_routes.welcome); 
... 
app.get('/profile', pass.ensureAuthenticated, profile_routes.profile); 
app.get('/profile/:name', pass.ensureAuthenticated, profile_routes.partials); 
app.post('/profile/update', pass.ensureAuthenticated, profile_routes.update); 
... 

Контроллер:

exports.profile = function(req, res) { 
    var user = req.user; 
    Profile.findOne({ username: user.username }, function(err, profile) { 
     if (err) { 
      res.redirect('/'); 
     }  
     res.render("profile"); 
    }); 
}; 

exports.partials = function(req, res) { 
    var name = req.params.name; 
    var user = req.user; 
    Profile.findOne({ username: user.username }, function(err, profile) { 
     if (err) { 
      res.redirect('/'); 
     }  
     res.render(path.join(__dirname + '/../views/profile/' + name)); 
    }); 
}; 

exports.update = function(req, res){ 
    var profile = req.body; 
    delete profile._id; 
    Profile.update({'username':profile.username},profile,{safe:true}, function(err, result){ 
     if(err) { 
      console.log('Error updating profile. ' + err); 
      res.redirect('/profile'); 
     } 
     else{ 
      console.log('' + result + ' profile updated for user: ' + profile.username); 
      res.redirect('/profile'); 
     }   
    }); 
}; 

Угловая применение

myApp.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider){ 
    $routeProvider 
     .when('/profile/update', { 
      controller: 'myJobOfferListCtrl', 
      templateUrl: '/profile/update', 
      reloadOnSearch: false 
     }) 
     .when('/profile', { 
      controller: 'myJobOfferListCtrl', 
      templateUrl: '/profile/dashboard' 
     }) 
     .when('/profile/dashboard', { 
      controller: 'myJobOfferListCtrl', 
      templateUrl: '/profile/dashboard', 
      reloadOnSearch: false 
     }) 
     .when('/profile/offers', { 
      controller: 'myJobOfferListCtrl', 
      templateUrl: '/profile/offers', 
      reloadOnSearch: false 
     })  
     .otherwise({redirectTo: '/profile'}); 
    $locationProvider.html5Mode(true); 
}]); 

Моя страница профиля

extends layout 

block content 
    div.container-fluid(ng-app="appProfile", ng-controller="myJobOfferListCtrl", ng-init="initProfile()") 
     div.row-fluid 
     div.span3(ng-controller="navBarCtrl") 
      div.well.sidebar-nav 
      ul.nav.nav-list 
       li.well.nav-header. 
        My Profile ({{data.profile.username}}) 
       li(ng-class="{ active: isActive('dashboard')}") 
        a(href="/profile/dashboard") Dashboard 
       li(ng-class="{ active: isActive('update')}") 
        a(href="/profile/update") Update profile 
       li.divider 
       li.well.nav-header My Jobs 
       li(ng-class="{ active: isActive('offers')}") 
        a(href="/profile/offers") Offers 
       li(ng-class="{ active: isActive('application')}") 
        a(href="/profile/application") Applications 
     div.span9(ng-view, ng-cloak) 

И образец частичный вид страницы

div.row-fluid 
     div(ng-init="initMyOffers()") 
     accordion.span8.offset1(close-others="true") 
      accordion-group(ng-repeat="item in data.myJobs", heading="{{item.title}}") 
       accordion-heading 
        {{item.title}} 
        i.pull-right.icon-remove-circle.removeButton(ng:click="remove(item)") 
       p {{item.description}} 
       hr 
       div.footer 
        div.pull-left 
        i.icon-calendar.calendar 
        {{item.dueDate | date:'d MMMM yyyy'}} 
        div.pull-right 
        i.icon-user 
        {{item.author}} 

Как я могу перезагрузить частичную страницу при обновлении с F5 ?? То, что я ожидал с угловым, заключается в том, что при попытке обновления, например, на странице /profile/dashboard, вызывается частичное /views/profile/dashboard.jade, а также views/profile.jade. А как насчет масштабов $?

Извините, но я немного взволнован ... спасибо вам за помощь!

Answer 1

Наконец реализовано решение в соответствии с предложением Артуре:

<script> 
    if (typeof angular == 'undefined') 
    window.location.replace("/main_url"); 
</script> 

Answer 2

Я думаю, что это распространенная проблема, и пользователь не Предполагается использовать F5 в вашем приложении. Я не думаю, что можно остановить действие браузера по умолчанию после нажатия F5.

Одно простое решение, чтобы добавить этот или аналогичный script на каждый вид:

<script> 
    if (angular == undefined) 
     // alert("It is SPA (Single Page Application) -- do not press F5 anymore, please."); 
     window.location.replace("your/main/url"); 
</script> 

Немного сложнее будет реализация следующего сценария.

1. пользователь нажмет f5
2. сервер отправляет частичный вид на текущий URL current_url
3. клиентских кодов обнаруживает отсутствие angular и отправить запрос будет перенаправлен на current_url
4. сервер отправляет Модифицированная версия файла index.html [с помощью, например, некоторые скрытые поля ввода, который хранит current_url]
5. после углового был загружен, приложение проверяет скрытое поле и изменить расположение соответственно

Answer 3

Самый простой и изящный способ избежать потери материала при обновлении приложения с угловым выражением - хранить любые значения, которые вам нужны в cookie, используя службу $cookies. Вот пример. Надеюсь это поможет.

"use strict"; 
angular.module('myApp').factory('SessionSrv', [ '$cookies', function($cookies){ 

    var _myString = $cookies.get('myString'); // e.g. "foo" 
    var _myObject = $cookies.getObject('myObject'); // e.g. {foo: "bar"} 

    return { 

     setMyString: function(myString){ 
      _myString = myString; 
      $cookies.put('myString', _myString); 
     }, 

     getMyString: function(){ 
      return _myString; 
     }, 

     setMyObject: function(myObject){ 
      _myObject = myObject; 
      $cookies.putObject('myObject', _myObject); 
     }, 

     getMyObject: function(){ 
      return _myObject; 
     }, 

    }; 
}]);