在Angular中,我无法使我的渲染路径正确

时间:2016-04-25 11:47:30

标签: javascript angularjs

我是Angular的新手(计划花一整周的时间),我正在关注youtube上的教程,我认为创建它的人必须去过另一个星系,所以没有支持了(但是一个很棒的啧啧)。我似乎无法将我的home ..html页面呈现给浏览器而且我完全迷失了。 当我手动输入此URL时: https://chore-master-j-s-thomas-1.c9users.io/home 我得到的错误是:不能GET / home 所以我认为它必须是我的路线。

这是我的app.js页面

var myApp = angular.module('myApp', [
'ngRoute']).
config(['$routeProvider', '$locationProvider',                                            function($routeProvider, $locationProvider){
    $routeProvider.when('/home', {templateUrl: '/partials/home.html',       controller: 'homeController.js'});
    $routeProvider.otherwise({redirectTo: '/home'});
    $locationProvider.html5Mode({enabled: true, requireBase: false});          }])

这是我的index.ejs:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other     head content must come *after* these tags -->
 <meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
 <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <link href="lib/bootstrap/bootstrap.css" rel="stylesheet">              <!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
</head>
  <body>
     <div class="container">
  <div class="header clearfix">
    <nav>
      <ul class="nav nav-pills pull-right">
        <li role="presentation" class="active"><a href="#">Home</a>   </li>
        <li role="presentation"><a href="#">About</a></li>
        <li role="presentation"><a href="#">Contact</a></li>
      </ul>
    </nav>
    <h3 class="text-muted">Chore Master</h3>
  </div>
 <p class='container' style="margin-left: 50" align="left" >text</p >
 <!-- Main Container -->
  <div class="container">
  <div ng-view></div>
 </div>  

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

 <!-- scripts to import for angularjs goes here -->
<scripts type="text/javascript" src="libs/angular/angular.js">        </scripts>
<scripts type="text/javascript" src="libs/angular-route/angular-      route.js"></scripts>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js">         </script>
</body>
</html>

然后是我的家庭控制员:

  myApp.controller('homeController', ['$scope', function($scope){

  }]);

我真的不确定除了我的github之外还有什么可以帮助但是有人能告诉我我错了什么以及我需要研究哪些角度部分?

这是我的github回购:       https://github.com/J-S-Thomas/Chore_Master.git

2 个答案:

答案 0 :(得分:1)

导入角度文件时有一些小错字:

<scripts type="text/javascript" src="libs/angular/angular.js"></scripts>
<scripts type="text/javascript" src="libs/angular-route/angular-route.js"</scripts>

应该是:

<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.js"></script>

请注意,html标记是脚本,而不是脚本。您放置它们的文件夹是 lib 而不是 libs

答案 1 :(得分:0)

您的托管可能有问题。当我浏览到https://chore-master-j-s-thomas-1.c9users.io/时,您的索引页面工作正常。但是,当我尝试访问https://chore-master-j-s-thomas-1.c9users.io/libs/angular/angular.js时,我得到了#34;无法获取&#34;错误。您的网站没有加载任何js库,因此Angular甚至无法启动。

更新:您的Bootstrap css位于&#34; lib&#34;,删除&#34; s&#34;来自js libs脚本标签。另请注意,您在这些标签中也添加了一个拼写错误。