无法通过ng-Route加载视图而没有错误

时间:2017-07-28 07:44:52

标签: javascript angularjs

虽然没有错误,但仍未呈现视图。

我已经在head中添加了angular-route.js文件。下面提到的ang jed码存在于angroute.js文件中.html代码是用index.html文件编写的。我已经创建了两个html文件查看名为1> course.html和2> student.html的文件夹 我不知道为什么,但网址链接似乎是这样的 - http://127.0.0.1:57420/index.html#!/index.html

    <!DOCTYPE html>
     <html lang="en" ng-app="module">
     <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="angular-1.6.5/angular.js" type="text/javascript">
    </script>
    <script src="angular-1.6.5/angular-route.js" type="text/javascript">
    </script>
    <script src="angroute.js" type="text/javascript"></script>
    <style type="text/css">
        body{
            margin: 0px;
            padding: 0px;

        }
        .menu{
            background-color: #26292c;
             color: aqua;
            float: left;
            width: 20%;
            height: 650px;

        }
        .details{
            background-color: bisque;
            float: right;
            width: 80%;
            height: 650px
        }
        .main{
            display:block;
        }
    </style>
    </head>

    <body>
    <div class="main">
    <div class="menu" ng-controller="hey">
    <ol>
            <li><a href="#/course">Course</a></li>
            <li> <a href="#/student">Student</a></li>


        </ol>
    </div>
    <div class="details">
    <ng-view></ng-view>

    </div>
   </div>
     </body>
   </html>



  var myap=angular.module("module",['ngRoute']);
  myap.config(function($routeProvider){
  $routeProvider.when("/course",{
       templateUrl:"view/course.html",
       controller:"coursecontroller"
   })
    .when("/student",{
       templateUrl:"view/student.html",
       controller:"studentcontroller"
   }) .otherwise({
            redirectTo: '/index.html'
        }) 

   }).controller("coursecontroller",function($scope){
    $scope.heading="Course page";
   })
   .controller("studentcontroller",function($scope){
    $scope.heading="student Page";
   })

   myap.controller("hey",function($scope){
    $scope.heading="hi";
   })

0 个答案:

没有答案