Angular Js路由无法正常工作

Maha Dev 发表于 Dev

Maha Dev

我是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";
});