Angular Js布线工作不正常

Angular Js routing not working properly

本文关键字:不正常 工作 布线 Js Angular      更新时间:2023-09-26

我是angularjs的新手。我已经做了所有关于路由的事情,但它不起作用。我希望我的主页将成为默认页面。每当我打开index.php页面时,它都会显示黑屏。这是我的代码,

//index.php
<body ng-app="app">
        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/angularjs">Angular JS Practice</a>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
                        <li><a href="#students"><i class="fa fa-shield"></i> Student</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        <div class="container-fluid">
            <div ng-view></div>
            <script type = "text/ng-template" id = "home.htm">
                <h2> {{pagename}} </h2>
                {{message}}
            </script>
            <script type = "text/ng-template" id = "students.htm">
                <h2> {{pagename}} </h2>
                {{message}}
            </script>
        </div>
        <!--1.4.8-->
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.js"></script>  
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>
    </body>

App.js

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

app.config(['$routeProvider',function($routeProvider){
    $routeProvider.when("/",{
        templeteUrl:"home.htm",
        controller:'myctrl'
    }).when("/students",{
        templateUrl:"students.htm",
        controller:"studentCtrl"
    }).otherwise({
        templateUrl:"404.php",
        controller:"notfoundCtrl"
    })
}]);
app.controller("notfoundCtrl",function($scope){
    $scope.pagename='Not Found';
    $scope.message='The page you are request not found';
});
app.controller("studentCtrl",function($scope){
    $scope.pagename='Students';
    $scope.message="This is student page"; 
});
app.controller("myctrl",function($scope){
   $scope.pagename="Home Page";
   $scope.message="This is home page";
});

您编写了templeteUrl:"home.htm",可以尝试将其更改为templateUrl:"home.htm"吗?

您有语法错误:templateUrl instead of templeteUrl