查看未顯示 - AngularJS

我剛開始學習AngularJS，並試圖用Bootstrap和AngularJS創建一個頁面。查看未顯示 - AngularJS

問題： 我沒能看到index.html這是最主要的頁面register.html和login.html頁面的內容。

代碼：

的index.html

<!doctype html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <link rel="stylesheet" href="bower_components/bootstrap-theme/bootstrap.css"> 
 
    <link rel="stylesheet" href="bower_components/bootstrap-theme/bootstrap.min.css"> 
 
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script> 
 
    <script src="bower_components/angular/angular.min.js"></script> 
 
    <script src="bower_components/angular-route/angular-route.js"></script> 
 

 
</head> 
 
<body> 
 

 
    <script type="text/ng-template" id="index.html"> 
 
     <h1>Home</h1> 
 
     <h3>{{message}}</h3> 
 
    </script> 
 
    <script type="text/ng-template" id="pages/register.html"> 
 
     <h1>Register</h1> 
 

 
    </script> 
 
    <script type="text/ng-template" id="pages/login.html"> 
 
     <h1>Login</h1> 
 
    </script> 
 

 
    <!-- Navbar --> 
 

 
     <nav class="navbar navbar-inverse"> 
 
      <div class="container-fluid"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 
 
         <span class="sr-only">Toggle navigation</span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
       </div> 
 

 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> 
 
        <ul class="nav navbar-nav"> 
 
         <li class="active"><a href="#/">Home <span class="sr-only">(current)</span></a></li> 
 
         <li><a href="#/register">Register</a></li> 
 
         <li><a href="#/login">Login</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 

 

 

 
    <!-- END Navbar --> 
 

 
    <div class="container"> 
 
     <div ng-view></div> 
 
    </div> 
 

 
    <script type="text/javascript" src="app.js"></script> 
 

 
</body> 
 
</html>

register.html

<div class="col-lg-6 col-md-6 col-xs-12" id="reg-form"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-md-12 col-xs-12"> 
 
      <h3>Registration form</h3> 
 
      <hr> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-md-12 col-xs-12"> 
 
      <form> 
 
       <div class="form-group"> 
 
        <label for="email">Email</label> 
 
        <input type="email" class="form-control" id="email" placeholder="Email"> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label for="fName">First name</label> 
 
        <input type="text" class="form-control" id="fName" placeholder="First name"> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label for="lName">Last name</label> 
 
        <input type="text" class="form-control" id="lName" placeholder="Last name"> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label for="password">Password</label> 
 
        <input type="password" class="form-control" id="password" placeholder="Password"> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        <label for="confPassword">Confirm password</label> 
 
        <input type="password" class="form-control" id="confPassword" placeholder="Confirm password"> 
 
       </div> 
 

 
       <button type="submit" class="btn btn-primary">Register</button> 
 

 
      </form> 
 
     </div> 
 
    </div> 
 
</div>

app.js

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

 
app.config(function($routeProvider) { 
 
    $routeProvider 
 

 
     .when('/', { 
 
      templateUrl : 'index.html', 
 
      controller : 'HomeController' 
 
     }) 
 

 
     .when('/register', { 
 
      templateUrl : 'pages/register.html', 
 
      controller : 'RegisterController' 
 
     }) 
 

 
     .when('/login', { 
 
      templateUrl : 'pages/login.html', 
 
      controller : 'LoginController' 
 
     }) 
 

 
     .otherwise({redirectTo: '/'}); 
 
}); 
 

 
app.controller('HomeController', function($scope) { 
 
    $scope.message = 'Hello from HomeController'; 
 
}); 
 

 
app.controller('RegisterController', function($scope) { 
 
    $scope.message = 'Hello from RegisterController'; 
 
}); 
 

 
app.controller('LoginController', function($scope) { 
 
    $scope.message = 'Hello from LoginController'; 
 
});

的文件register.html和login.html的是文件夾稱爲頁。文件index.html和app.js位於文件夾頁面之外。

來源

2016-03-20 user3263971

上一目瞭然的代碼看起來不錯..有控制檯任何錯誤？ –

在控制檯 – user3263971

中沒有錯誤，您同時擁有ng-template和html。它是否爲錯字？ –

你忘了「進口」的routeProvider功能：

app.config(['$routeProvider', //<-- include '$routeProvider', (followed by a comma) and then your function 
 
    function($routeProvider) { 
 
     $routeProvider. 
 
     when(... 
 
     }). 
 
     otherwise({... 
 
     }); 
 
    }]);

來源

2016-03-20 18:07:55

查看未顯示 - AngularJS

回答

相關問題