AngularJS 路线在重新访问时不起作用
AngularJS route not working when revisited
我正在开发一个 AngularJS 应用程序。我是 AngularJS 的新手。我正在使用 AngularJS 路由来开发单页应用程序。下面是我如何配置我的路线。
app.config(function($routeProvider){
$routeProvider
.when('/',{ templateUrl : "admin/template" })
.when('/account',{ templateUrl : "admin/account/edit" })
});
我用简单的页面测试了我的路由配置是否有效。简单页面意味着我只是为每个页面添加了一个 html header,如下所示。
<h1>Page 1</h1>
<h1>Page 2</h1>
然后我测试路由点击links。一切正常。当我re-clicked访问link时,页面正确显示。然后我开始用一些数据和逻辑开发第 1 页,比如实现分页功能。一切正常。
但是有个问题。当我从第1页点击第2页link时,它被重定向到第2页。但是当我再次点击第1页时,它不起作用。它没有显示任何内容。但是当我刷新浏览器时,它显示了。然后问题是重新访问。
这是我的app.js
var app = angular.module('memeApp',['ngRoute','ui.bootstrap','blockUI','ngFileUpload'],function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
我更改了 AngularJS 的打开和关闭标记,因为我使用的是 Laravel 框架。 Laravel 使用 Blade 模板引擎。
这是我的第 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代码
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 步
第 2 步
第 3 步
为什么当我重新访问第 1 页(主页)时它不起作用。
我刚刚修改了你的代码:http://jsfiddle.net/mtV62/871/
对我来说,你的页面中缺少一个斜杠 URL 就像这样:
<a href="#/">Home</a>
或者您可以将您的模块配置为使用 html5 模式。在锚点等元素中,您的路线开头不需要“#”
我正在开发一个 AngularJS 应用程序。我是 AngularJS 的新手。我正在使用 AngularJS 路由来开发单页应用程序。下面是我如何配置我的路线。
app.config(function($routeProvider){
$routeProvider
.when('/',{ templateUrl : "admin/template" })
.when('/account',{ templateUrl : "admin/account/edit" })
});
我用简单的页面测试了我的路由配置是否有效。简单页面意味着我只是为每个页面添加了一个 html header,如下所示。
<h1>Page 1</h1>
<h1>Page 2</h1>
然后我测试路由点击links。一切正常。当我re-clicked访问link时,页面正确显示。然后我开始用一些数据和逻辑开发第 1 页,比如实现分页功能。一切正常。
但是有个问题。当我从第1页点击第2页link时,它被重定向到第2页。但是当我再次点击第1页时,它不起作用。它没有显示任何内容。但是当我刷新浏览器时,它显示了。然后问题是重新访问。
这是我的app.js
var app = angular.module('memeApp',['ngRoute','ui.bootstrap','blockUI','ngFileUpload'],function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
我更改了 AngularJS 的打开和关闭标记,因为我使用的是 Laravel 框架。 Laravel 使用 Blade 模板引擎。
这是我的第 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代码
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 步
第 2 步
第 3 步
为什么当我重新访问第 1 页(主页)时它不起作用。
我刚刚修改了你的代码:http://jsfiddle.net/mtV62/871/
对我来说,你的页面中缺少一个斜杠 URL 就像这样:
<a href="#/">Home</a>
或者您可以将您的模块配置为使用 html5 模式。在锚点等元素中,您的路线开头不需要“#”