1
私は、バックエンドのRuby on RailsとフロントエンドのAngularJSを使用する単純なアプリケーションを持っています。 application.html.erbファイルでは、ng-includeとそのコントローラを含むdiv要素を置いています。これはnav.htmlファイルに固定されたトップナビゲーションバーを含んでいます。それはそうのような降伏関数です後：ブラウザで戻るボタンを押した後にng-includeとng-controllerを含むdiv要素が消える
<!DOCTYPE html>
<html>
<head>
<title>RailsAngularAuthenticationProject</title>
<base href="/">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body ng-app="angular-auth-app">
<div ng-include="'settingAngular/nav/nav.html'" ng-controller="NavCtrl"></div>
<div class="" ng-controller="MainCtrl">
<ui-view><%= yield %></ui-view>
</div>
</body>
</html>
ホームページには次のものが含まれます。
<div class="panel panel-default">
<div class="panel-heading">Sign in via email</div>
<div class="panel-body">
<label>user signed in?</label>
<p>{{ user.signedIn ? "true" : "false" }}</p>
<label>user email</label>
<p>{{ user.email || "n/a" }}</p>
<!-- sign out button -->
<button class="btn btn-default" ng-click="signOut()" ng-if="user.signedIn">Sign out</button>
<a ui-sref="posts.show">posts</a>
</div>
</div>
私はアンカータグ「投稿」をクリックすると、これはlocalhostを、別のページに私を取るだろう：3000 /ポスト。その時点まではすべて問題ありませんが、戻るボタンを押してホームページに戻ると、修正のトップナビゲーションバーが消え、アンカータグが応答しなくなり、プレースホルダが機能しなくなります。
私はAngularJSの新機能ですから、何が起こっているのか分かりません。角型app.jsで、多分レールではないと思っています。ここに私のapp.jsです
angular.module('angular-auth-app', [
'ui.router',
'ui.bootstrap',
'ngRoute',
'ngResource',
'templates',
'ng-token-auth',
'ngAnimate',
'ngCookies',])
.constant('baseUrl', 'http://localhost:3000')
.config([
'baseUrl',
'$stateProvider',
'$routeProvider',
'$authProvider',
'$locationProvider',
'$urlRouterProvider',
function(baseUrl, $stateProvider, $routeProvider, $authProvider, $locationProvider, $urlRouterProvider){
$locationProvider.html5Mode(true); //this removes the # on the url, add the base to application
$authProvider.configure({
apiUrl: baseUrl + '/api',
handleLoginResponse: function(response) {
return response;
},
// handleAccountUpdateResponse: function(response) {
// return response;
// },
handleTokenValidationResponse: function(response) {
return response;
}
});
$stateProvider
.state('home', {
url: '/',
controller: 'MainCtrl',
})
.state('posts',{
templateUrl: 'settingAngular/posts/postLayout.html',
})
.state('posts.show',{
url: '/posts',
views: {
postView: {
templateUrl: 'settingAngular/posts/post.html',
controller: 'PostCtrl'
}
}
});
$urlRouterProvider.otherwise('/');
}]);
レールとAngularJsを使用してアプリケーションを構築する方法を学ぼうとしています。おかげさまで、ありがとうございます。