zoukankan      html  css  js  c++  java
  • ngRoute 配置路径不能跳转问题

    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应用程序";
    }]);

    点击运行即可 

  • 相关阅读:
    Codeforces Round #592 (Div. 2)
    2019 China Collegiate Programming Contest Qinhuangdao Onsite
    2019CCPC 秦皇岛 E.Escape
    2018 Multi-University Training Contest 3
    AtCoder Regular Contest 098
    Educational Codeforces Round 74 (Rated for Div. 2)
    Codeforces Round #590 (Div. 3) F
    AtCoder Regular Contest 99
    [AH2017/HNOI2017] 单旋
    [CF1304F] Animal Observation
  • 原文地址:https://www.cnblogs.com/JackeyLove/p/7692776.html
Copyright © 2011-2022 走看看