用angularJS刷新（F5）ngview

我的Angular应用程序有问题。 应用程序第一次运行良好，可以在内部导航，但是当我尝试使用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'); } }); }; 

angular度应用

 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刷新时重新加载部分页面？ 我期望的angular度是，当试图刷新页面/profile/dashboard ，部分/views/profile/dashboard.jade被调用，但也views/profile.jade 。 那么$范围呢？

对不起，但我有一点信心…感谢您的帮助！

Answer 1

我认为这是一个常见的问题，用户不应该在你的应用程序中使用F5 。 我不这么认为，在F5被按下之后，可以停止默认的浏览器动作。

一个简单的解决scheme是将这个或类似的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. 客户端代码检测到缺lessangular和发送请求被redirect到current_url
4. 服务器发送index.html文件的修改版本[例如一些隐藏的input字段，存储current_url ]
5. 加载angular度后，应用程序将检查隐藏的字段并相应地更改位置

Answer 2

在刷新Angular应用程序时避免丢失东西的最简单和最优雅的方式是使用$ cookies服务将所需的任何值存储在cookie中。 这是一个例子。 希望这可以帮助。

 "use strict"; angular.module('myApp').factory('SessionSrv', [ '$cookies', function($cookies){ var _myString = $cookies.get('myString'); // eg "foo" var _myObject = $cookies.getObject('myObject'); // eg {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; }, }; }]); 

Answer 3

最后实施了artur提出的解决scheme：

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