1.原因:AngularJS 版本更新至1.6后对地址做了特别处理。如:<a hret="#/someurl"> 在浏览器中被解析为“#!%2Fsomeurl”,导致路由无法跳转。
解决办法:如果您希望路由中没有哈希前缀,那么可以通过向应用程序添加配置块来恢复以前的行为如下:stackoverflow中的连接
appModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);
2.ngRoute使用实例(mvc web项目为例子)
一 新建ASP.NET Web应用程序(.NET Framework),进入后选择mvc
二 使用nuget包管理安装angular1.6包,并添加文件夹结构如下
在BundleConfig.cs中添加如下代码
bundles.Add(new ScriptBundle("~/bundles/angular").Include( "~/Scripts/angular.js", "~/Scripts/angular-route.js", "~/Scripts/angular-animate.js" )); bundles.Add(new ScriptBundle("~/bundles/app").Include( "~/App_Myapp/js/app.js" ));
在—layout.cshtml中添加如下内容
app.js文件中内容如下:
var app = angular.module('myapp', ['ngRoute', 'ngAnimate']); app.config(['$locationProvider', function ($locationProvider) { $locationProvider.hashPrefix(''); }]); app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/App_Myapp/Index', { controller: 'HomeController', templateUrl: '/App_Myapp/views/Index.html' }) .when('/App_Myapp/Table1', { controller: 'HomeController', templateUrl: '/App_Myapp/views/tables/Table1.html' }) .when('/App_Myapp/Table2', { controller: 'HomeController', templateUrl: '/App_Myapp/views/tables/Table2.html' }) .otherwise({ redirectTo: '/App_Myapp/Index' }); }]); app.controller('HomeController', ['$scope', function ($scope) { $scope.title = "这是一个AngularJS应用程序"; }]);
点击运行即可