Question

我正在尝试在angularJS中使用路由，并且我已经能够使用w3schools作为教程来设置大部分路由。问题是w3schools没有为他们的外部htm文件提供示例文件。这就是我所拥有的 JavaScript的：

var app = angular.module('myApp', ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "librarian.html"
    });
});

app.controller('myCtrl', function($scope)
{

});

主HTML：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="./library.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <p id = "loginScreen" >
            username: <input id = "userName" name = "userName" ng-model="name"><br>
            password: <input id= "password" name = "password" ng-model="password"><br>
            <input type = "button" value = "login" id = "loginButton" ng-click="login()">
            <a href="#librarian">librarian</a>
    </p>
<script type = "text/ng-template" id = "librarian.htm">
    <div>hello</div>
</script>
<div ng-view></div>
</body>

</html>

我需要在librarian.html中做什么才能让页面切换到它（目前URL已更改，但页面上的所有元素都保持不变）？

Answer 1

Angular 1.6中的

从＃/ myUrl改为＃！/ myUrl

您应该将您的参考更改为

<a href="#!/librarian">librarian</a>

Answer 2

进行此更改

 <a href="#!/librarian">librarian</a>

并更改此

.when("/librarian", {
        templateUrl : "librarian.html"
    });

并在项目文件夹中创建一个文件

librarian.html

angularJS路由模板.Url

2 个答案: