Question

我是角度js在页面js路径页面中遇到问题的新手。当页面加载时，它只显示页眉和页脚。

的index.html

<!DOCTYPE html>
<html lang="en">

<head>



    <title>My First AngularJs Blog</title>



    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/blog-home.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>

<body ng-app="blogapp">

    <!-- Navigation -->
  <div ng-include="'includes/header.html'">                    
</div>

  <ng-view></ng-view>


  <div ng-include="'includes/footer.html'">                    
</div>


    <!-- jQuery -->
    <script src="js/jquery.js"></script>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
<script src="controller.js"></script>
</body>

</html>

Controller.js：

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

  myApp.config(function($routeProvider){

    $routeProvider
      .when('/home',{
        templateUrl:'home.html',
        controller:'blogcontroller'
      })
      .when('/list',{
        templateUrl:'list.html',
        controller:'blogcontroller'

      })
      .when('/add',{

        templateUrl:'add.html',
        controller:'addcontroller'
      })
      .otherwise({
        redirectTo:'/home'
      });

  });




  myApp.controller('blogcontroller',function ($scope,$http){

    $http({method: 'GET' , url: 'getallblog.php'}).success(function(data){
        $scope.allblog = data;
    });
  });



  myApp.controller('addcontroller', function($scope,$http){
  $scope.new_post =function(){
    $http.post("addblog.php" ,{'title' : $scope.title ,'description' : $scope.description }).success(function(data,status,headers,config){

      console.log("inserted Successfully");
    });
  } ;


  });

home.html的

  <!-- Page Content -->
    <div class="container">

        <div class="row">

            <!-- Blog Entries Column -->
            <div class="col-md-8">

                <h1 class="page-header">
                   Angular Blog 

                </h1>

                <div >

                <div ng-repeat="blg in allblog | filter : yourName">
                <!-- First Blog Post -->
                <h2>
                    <a href="#">{{blg.title}}</a>
                </h2>

                <p><span class="glyphicon glyphicon-time"></span> Posted on {{blg.created_on }}</p>

                <hr>
                <p style="text-align:justify;">{{blg.description}}</p>


                <hr>
                </div>


                </div>



                <!-- Pager -->
                <ul class="pager">
                    <li class="previous">
                        <a href="#">&larr; Older</a>
                    </li>
                    <li class="next">
                        <a href="#">Newer &rarr;</a>
                    </li>
                </ul>

            </div>

            <!-- Blog Sidebar Widgets Column -->
             <div ng-include="'includes/sidebar.html'">                    
</div>

        </div>
        <!-- /.row -->

        <hr>

        <!-- Footer -->
       <div ng-include="'includes/footer.html'">                    
</div>

    </div>
    <!-- /.container -->

add.html

    <!-- Page Content -->
    <div class="container">

        <div class="row">

            <!-- Blog Entries Column -->
            <div class="col-md-6">

                <h1 class="page-header">
                   Angular Blog 

                </h1>


               <div >

        <form class="form-signin">


        <h2 class="form-signin-heading">New Post Here</h2>
        <div class="row">
        <div class="col-md-12">
        <label for="posttitle" class="sr-only">Email address</label>
        <input type="text" id="posttitle" class="form-control" ng-model="title"  required=""><br>
        <span>Title : {{title}}</span>
        </div>
        </div>
        <br>
        <div class="row">
        <div class="col-md-12">
        <label for="postdetails" class="sr-only">Password</label>
        <textarea id="postdetails" class="form-control" ng-model="description" required=""></textarea>
        <br>
        <span>Blog Description: {{description}}</span>
        </div>
       </div>
       <br>
       <div class="row">
       <div class="col-md-3"></div>
       <div class="col-md-6">
        <button class="btn btn-lg btn-primary btn-block" type="button" ng-click="new_post()" name="newpost">POST Now</button>
        </div>
              <div class="col-md-3"></div>
        </div>

      </form>

      </div>

            </div>
             <div class="col-md-2"></div>
            <!-- Blog Sidebar Widgets Column -->
             <div ng-include="'includes/sidebar.html'">                    
</div>

        </div>
        <!-- /.row -->



    </div>
    <!-- /.container -->

list.html

       <div class="container">
 <div >
  <h2>Blog List</h2>
  <p>Here is the awsome blog list</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Blog</th>
        <th>Posted On</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr  ng-repeat="blg in allblog">
        <td>{{blg.title}}</td>
        <td>{{blg.description}}</td>
        <td>{{blg.created_on }}</td>
        <td><a href="">Edit</a> || <a href="">Delete</a></td>
      </tr>

    </tbody>
  </table>

  </div>
</div>

这里当我打开默认页面时只有页眉和脚打开，它不会调用任何页面，如home，add或list.html。我在哪里做错了？我很感激，如果回应.. 感谢

Answer 1

你必须包括

<script data-require="angular-sanitize@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-sanitize.js"></script>

在index.html中，以便只有angular-route的依赖项才会完全填充。

我简化了你的plunker，

http://embed.plnkr.co/8u0In7rS7KfmmQindaT0/preview

仅在AngularJS 1.2.0及更高版本中，ngRoute已移至其自己的模块因此，在该版本之前，您不需要将angular-route.min.js包含在index.html中，将['ngRoute']包含在您的模块中作为DI

角度js中的路线不起作用

1 个答案: