Javascript 路由在Angularjs上不起作用_Javascript_Angularjs

Javascript 路由在Angularjs上不起作用

javascript angularjs

Javascript 路由在Angularjs上不起作用,javascript,angularjs,Javascript,Angularjs,尝试为角度布线设计一个简单的示例，但它不起作用。家庭、课程和学生链接不起作用 Index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo"> <head> <title>Angular Demo</title> <meta content="text/html;charset=utf-8" http-equiv

尝试为角度布线设计一个简单的示例，但它不起作用。家庭、课程和学生链接不起作用

Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>Angular Demo</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body >

    <table style="font-family: Arial"> 
        <tr> 
            <td colspan="2" class="header"> <h1> WebSite Header </h1> </td> 
        </tr> 
        <tr> 
            <td class="leftMenu"> 
                    <a href="#/home">Home</a> 
                    <a href="#/courses">Courses</a> 
                    <a href="#/students">Students</a> </td> 
            <td class="mainContent"> 
                <ng-view></ng-view> 
            </td> 
        </tr> 
        <tr> 
            <td colspan="2" class="footer"> <b>Website Footer</b> </td> 
        </tr>
    </table>
</body>
</html>

<h1>{{ message }}</h1> 
<h3>What is Lorem Ipsum?</h3>
<p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

home.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>Angular Demo</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body >

    <table style="font-family: Arial"> 
        <tr> 
            <td colspan="2" class="header"> <h1> WebSite Header </h1> </td> 
        </tr> 
        <tr> 
            <td class="leftMenu"> 
                    <a href="#/home">Home</a> 
                    <a href="#/courses">Courses</a> 
                    <a href="#/students">Students</a> </td> 
            <td class="mainContent"> 
                <ng-view></ng-view> 
            </td> 
        </tr> 
        <tr> 
            <td colspan="2" class="footer"> <b>Website Footer</b> </td> 
        </tr>
    </table>
</body>
</html>

<h1>{{ message }}</h1> 
<h3>What is Lorem Ipsum?</h3>
<p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

{{message}
什么是Lorem Ipsum？

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

如果您在这方面有任何帮助，我们将不胜感激

请尝试更改您的路线：

<a href="#!/home">Home</a> 
<a href="#!/courses">Courses</a> 
<a href="#!/students">Students</a>

尝试更改您的路由：

<a href="#!/home">Home</a> 
<a href="#!/courses">Courses</a> 
<a href="#!/students">Students</a>

尝试以下方法：首先从href中删除

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>Angular Demo</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body >

    <table style="font-family: Arial"> 
        <tr> 
            <td colspan="2" class="header"> <h1> WebSite Header </h1> </td> 
        </tr> 
        <tr> 
            <td class="leftMenu"> 
                    <a href ng-click="redirectToHome()">Home</a> 
                    <a href ng-click="redirectToCourse()">Courses</a> 
                    <a href ng-click="redirectToStudent()">Students</a> </td> 
            <td class="mainContent"> 
                <ng-view></ng-view> 
            </td> 
        </tr> 
        <tr> 
            <td colspan="2" class="footer"> <b>Website Footer</b> </td> 
        </tr>
    </table>
</body>
</html>

尝试以下方法：首先从href中删除

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>Angular Demo</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body >

    <table style="font-family: Arial"> 
        <tr> 
            <td colspan="2" class="header"> <h1> WebSite Header </h1> </td> 
        </tr> 
        <tr> 
            <td class="leftMenu"> 
                    <a href ng-click="redirectToHome()">Home</a> 
                    <a href ng-click="redirectToCourse()">Courses</a> 
                    <a href ng-click="redirectToStudent()">Students</a> </td> 
            <td class="mainContent"> 
                <ng-view></ng-view> 
            </td> 
        </tr> 
        <tr> 
            <td colspan="2" class="footer"> <b>Website Footer</b> </td> 
        </tr>
    </table>
</body>
</html>

“你应该试试”@bhoomikhanapara有问题吗？你能告诉我有什么问题吗？不用“#/home”try“#home”谢谢@bhoomikhanapara我按照你的建议更改了代码，但不起作用。它有问题。”“你应该试试”@bhoomikhanapara你能告诉我有什么问题吗？不要用“#/home”try“#home”谢谢@bhoomikhanapara我按照你的建议更改了代码，但没用。我不懂这个符号！”在Anchor的href=“”属性中。查看此url：它超过了itI，我不理解符号“！”在Anchor的href=“”属性中。看看这个url：它在上面