Question

我是angularjs的新手，我尝试进行路由的演示测试，下面是我的代码

app.js

 var app=angular.module("tutorialApp",["ngRoute","tutorialCtrlModule"]);

 app.config(function($routeProvider){
 $routeProvider
        .when("/",{
            templateUrl:"views/tutorial.html",
    controller:"TutorialCtrl"
})
.when("/tutorialsecond",{
            templateUrl:"views/tutorialSecond.html",
    controller:"TutorialCtrl2"
});
});

tutorialCtrl.js

     angular.module("tutorialCtrlModule",[])

    .controller("TutorialCtrl",["$scope",function($scope){
            $scope.name = 'dipti';
            $scope.bindvalue = 2;
            $scope.timesTwo = function(){
                $scope.bindvalue *=2;
            }                            
    }])

    .controller("TutorialCtrl2",["$scope",function($scope){
            $scope.name = 'Dipti';
    }]);

index.html

<html ng-app="tutorialApp">
<head>
    <meta charset="utf-8">
    <title>Tutorial App</title>
    <script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script>
    <script src="lib/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body>

    <div ng-view></div>
</body>
</html>

这是我的路由页面

tutorial.html

    <u><h3>Route Page</h3></u>
        <u>Expression</u>
        <br>
    {{ name }}
    <br>
    <u>Data Binding</u>
    <br>
    <label>Name</label>
    <br>
    <input ng-model="name">
    <br>
    <p>My first expression: {{ 5 + 1 }}</p>

    <br>   
    <a href="#/tutorialsecond">Tutorial Second Page</a>

当我加载项目时，将显示默认页面tutorial.html，但是！符号会像http://localhost/Angular_demo/#!/一样出现在我的网址中当我单击tutorial.html页面中的链接以进行路由时，该链接无法正常工作，并且该网址将显示http://localhost/Angular_demo/#!/#%2Ftutorialsecond.How，我将对其进行处理。

Answer 1

正确配置您的哈希前缀

angular.module('myApp').config([  
    '$locationProvider',
    function($locationProvider) {
        $locationProvider.hashPrefix(''); // or whatever you want
    }
]);

额外：

确保html5mode处于活动状态

$locationProvider.html5Mode(true);

并且您的基地已经设置

<base href"/"/>

节目！当我在angularjs中路由时，请在网址中的＃后签名

1 个答案:

节目 ！当我在angularjs中路由时，请在网址中的＃后签名

1 个答案:

节目！当我在angularjs中路由时，请在网址中的＃后签名