无法将动态路由从 AngularJS 1.2 转换为 1.6
Can't convert dynamic routes from AngularJS 1.2 to 1.6
在 AngularJS 1.2 中,我有一些代码可以动态加载路由和控制器,效果很好。我想升级到 AngularJS 1.6,现在我的动态不再工作了。
这是我加载 JS 文件并重新计算路由的旧代码(有点简化,因为我有一些有效性验证,但这是基础):
moduleApp.config(function ($routeProvider, $controllerProvider) {
moduleApp.controllerProvider = $controllerProvider.register;
moduleApp.routeProvider = $routeProvider;
$routeProvider.when('/', {
templateUrl: 'startpage.html',
controller: 'startpageController'
})
.otherwise({
resolve: {
deps: function($q, $rootScope, $location) {
var deferred = $q.defer();
var modulename = $location.path().split("/")[1];
if (modulename !== null) {
// Load the JS using https://github.com/ded/script.js (Old but it works :)
$script(modulename + ".js", function() {
$rootScope.$apply(function() {
$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
});
});
}
return deferred.promise;
}
}
});
});
加载的 JS 文件如下所示:
moduleApp.routeProvider.
when('/FirstModule', {
templateUrl: 'FirstModule.html',
caseInsensitiveMatch: true
});
moduleApp.controllerProvider('firstModuleController', function ($scope) {
});
同样,这在 1.2 中工作正常,但我相信在 1.6 中应用路由不再以这种方式工作。那么我需要在使用 $rootScope
的函数内部更改什么才能使其再次运行?还是我还需要改变更多?万一呢?
我用这段代码做了一个 Plunker。
在 index.html
中将 AngularJS 版本更改为 1.2.16 以查看它在 1.2 中是否有效(请记住还要将链接中的 hashbang 更改为仅 #
而不是 #!
).改回 1.6 就不行了
这条线有点奇怪。它会让你陷入无限循环。
$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
与其试图欺骗 Angular 重新加载,不如调用 $route.reload()
.otherwise({
resolve: {
deps: function($q, $rootScope, $location, $http, $route) {
var deferred = $q.defer();
var modulename = $location.path().split("/")[1];
if (modulename !== null) {
$script(modulename + ".js", function() {
$rootScope.$apply(function() {
//$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
$route.reload();
});
});
}
return deferred.promise;
}
}
});
此外,还有一个小错误。 ng-click="FirstButton"
中缺少括号
编辑回复评论:
像您一样广播系统事件($locationChangeSuccess)听起来很冒险。在某种程度上你很幸运它能在 1.2 中运行,因为它从未得到真正的支持。正如您的代码所声称的那样,位置更改当然没有成功。
reload
的文档只是说:
Causes $route service to reload the current route even if $location hasn't changed.
As a result of that, ngView creates new scope and reinstantiates the controller.
所以这应该适用于每个受支持的版本。我预计不会有任何负面影响。这只是您尝试自制软件的标准方式。
在 AngularJS 1.2 中,我有一些代码可以动态加载路由和控制器,效果很好。我想升级到 AngularJS 1.6,现在我的动态不再工作了。
这是我加载 JS 文件并重新计算路由的旧代码(有点简化,因为我有一些有效性验证,但这是基础):
moduleApp.config(function ($routeProvider, $controllerProvider) {
moduleApp.controllerProvider = $controllerProvider.register;
moduleApp.routeProvider = $routeProvider;
$routeProvider.when('/', {
templateUrl: 'startpage.html',
controller: 'startpageController'
})
.otherwise({
resolve: {
deps: function($q, $rootScope, $location) {
var deferred = $q.defer();
var modulename = $location.path().split("/")[1];
if (modulename !== null) {
// Load the JS using https://github.com/ded/script.js (Old but it works :)
$script(modulename + ".js", function() {
$rootScope.$apply(function() {
$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
});
});
}
return deferred.promise;
}
}
});
});
加载的 JS 文件如下所示:
moduleApp.routeProvider.
when('/FirstModule', {
templateUrl: 'FirstModule.html',
caseInsensitiveMatch: true
});
moduleApp.controllerProvider('firstModuleController', function ($scope) {
});
同样,这在 1.2 中工作正常,但我相信在 1.6 中应用路由不再以这种方式工作。那么我需要在使用 $rootScope
的函数内部更改什么才能使其再次运行?还是我还需要改变更多?万一呢?
我用这段代码做了一个 Plunker。
在 index.html
中将 AngularJS 版本更改为 1.2.16 以查看它在 1.2 中是否有效(请记住还要将链接中的 hashbang 更改为仅 #
而不是 #!
).改回 1.6 就不行了
这条线有点奇怪。它会让你陷入无限循环。
$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
与其试图欺骗 Angular 重新加载,不如调用 $route.reload()
.otherwise({
resolve: {
deps: function($q, $rootScope, $location, $http, $route) {
var deferred = $q.defer();
var modulename = $location.path().split("/")[1];
if (modulename !== null) {
$script(modulename + ".js", function() {
$rootScope.$apply(function() {
//$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
$route.reload();
});
});
}
return deferred.promise;
}
}
});
此外,还有一个小错误。 ng-click="FirstButton"
编辑回复评论:
像您一样广播系统事件($locationChangeSuccess)听起来很冒险。在某种程度上你很幸运它能在 1.2 中运行,因为它从未得到真正的支持。正如您的代码所声称的那样,位置更改当然没有成功。
reload
的文档只是说:
Causes $route service to reload the current route even if $location hasn't changed. As a result of that, ngView creates new scope and reinstantiates the controller.
所以这应该适用于每个受支持的版本。我预计不会有任何负面影响。这只是您尝试自制软件的标准方式。