2016-10-01 19 views
0

AngularJSアプリケーションを開発しています。私はAngularJSが初めてです。 AngularJSルートを使用してシングルページアプリケーションを開発しています。以下は私のルートを設定する方法です。AngularJSルートは再訪時に機能しません

app.config(function($routeProvider){ 
    $routeProvider 
    .when('/',{ templateUrl : "admin/template" }) 
    .when('/account',{ templateUrl : "admin/account/edit" }) 
}); 

私は私のルート設定が動作するかしないシンプルなページでテスト。シンプルページとは、以下のように各ページに1つのhtmlヘッダーを追加したことを意味します。

<h1>Page 1</h1> 
<h1>Page 2</h1> 

次に、リンクをクリックしてテストしました。すべて正常に動作します。訪問したリンクを再度クリックすると、ページが正しく表示されます。それから、私はページング機能の実装のようないくつかのデータとロジックでページ1を開発しました。すべて正常に動作します。

しかし、問題があります。 1ページ目から2ページ目のリンクをクリックすると2ページ目にリダイレクトされますが、1ページ目を再度クリックすると動作しません。それは何も表示されていません。しかし、私はブラウザをリフレッシュすると、それが表示されます。問題は再訪することです。

これは私がLaravelフレームワークを使用していますので、私はAngularJSのためのオープンとクローズタグを変更し、私のapp.js

var app = angular.module('memeApp',['ngRoute','ui.bootstrap','blockUI','ngFileUpload'],function($interpolateProvider) { 
     $interpolateProvider.startSymbol('<%'); 
     $interpolateProvider.endSymbol('%>'); 
    }); 

です。 Laravelはブレードテンプレートエンジンを使用します。

これは、問題は以下の通りであるコントローラ

app.controller('DefaultController', ['$scope', 'Upload', '$timeout', '$http', function ($scope, Upload, $timeout , $http) { 
    $scope.init = function() 
    { 
    $scope.getTemplates(1); 
    } 
    $scope.templates = new Array(); 
    $scope.totalItems = 0; 
    $scope.currentPage = 0; 

    $scope.createResult = false; 

    $scope.uploadPic = function(file,uploadUrl) { 
    file.upload = Upload.upload({ 
     url: uploadUrl, 
     data: { prioritized : $scope.prioritized , file: file}, 
    }); 

    file.upload.then(function (response) { 
      $timeout(function() { 
      $scope.createResult = response.data.status; 
      if(response.data.status) 
      { 
       $scope.clearForm(); 
       $scope.getTemplates(1); 
      } 
      else{ 
       $scope.createResult = false; 
      } 
     }); 
    }, function (response) { 
      if (response.status > 0) 
     $scope.errorMsg = response.status + ': ' + response.data; 
    }, function (evt) { 
     // Math.min is to fix IE which reports 200% sometimes 
     //file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
    }); 
    } 

    $scope.clearForm = function() 
    { 
    $scope.picFile = null; 
    $scope.prioritized = false; 
    } 

    $scope.pageChanged = function() 
    { 
    $scope.getTemplates($scope.currentPage); 
    } 

    $scope.getTemplates = function(page) 
    { 
    $http.get($scope.getTemplatesUrl+"?page="+page).then(function(response){ 
     var list_data = response.data.list_data; 

     $scope.templates = list_data.data; 
     $scope.totalItems = list_data.total; 
     $scope.currentPage = page; 
    }); 
    } 
}]); 

のための私のページ1 HTML

<div class="row" ng-controller="DefaultController" ng-init="getTemplatesUrl='{{ url('admin/templates') }}';init();"> 

<div class="col-md-12"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <form name="createTemplateForm"> 
      <fieldset> 
      <legend>Create new template</legend> 
      <div> 
       <label>Priortized </label> 
       <input type="checkbox" ng-model="prioritized"> 
      </div> 
      <input type="file" ngf-select ng-model="picFile" name="file"  
      accept="image/*" ngf-max-size="2MB" required 
      ngf-model-invalid="errorFile"> 
      <i ng-show="createTemplateForm.file.$error.required">*required</i><br> 
      <i ng-show="createTemplateForm.file.$error.maxSize">File too large 
       <span ng-bind="errorFile.size/1000000|number:1"></span>MB: max 2M</i> 
      <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> 
      <br> 
      <button ng-disabled="!createTemplateForm.$valid" 
       ng-click="uploadPic(picFile,'{{ url('admin/template/create') }}')">Submit</button> 
      <span ng-show="createResult">Upload Successful</span> 
      </fieldset> 
      <br> 
      </form> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div ng-repeat="x in templates" class="col-md-2"> 
        <div> 
         <img style="width:100px;" src="<% x.image_path %>"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 


    <div class="row"> 
     <div class="col-md-12"> 
      <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul> 
     </div> 
    </div> 
</div> 

</div> 

jsのコードです。

ステップ1

enter image description here

ステップ2

enter image description here

ステップ3

enter image description here

私はレヴィとき、それが動作しないのはなぜページ1(自宅)に位置しています。私はちょうどあなたのコードをjsfidlledいる

+0

あなたのナビゲーターのコンソールを確認しましたか?エラーが表示されますか? – Zakaria

+0

はい、私はしました。エロルは表示されません。 –

答えて

2

:私にとってhttp://jsfiddle.net/mtV62/871/

を、あなたはちょうどこのようなあなたのページのURL内のスラッシュが欠落しています

<a href="#/">Home</a> 
+0

あなたのサポートのためにsooooありがとうございました。私は私の問題を解決しました。 –

0

それとも、html5modeを使用するようにモジュールを設定できるの。アンカーのような要素であなたのルートの冒頭に "#"は必要ありません

関連する問題