在 Angular 中,我无法正确获取渲染路径

In Angular, I Can't get my render paths correct

本文关键字:获取 路径 Angular      更新时间:2023-09-26

我对 Angular 真的很陌生(并计划花整整一周的时间),我正在 youtube 上学习教程,我认为创建它的人一定去过另一个星系,所以不再有支持(但一个很棒的嘟嘟)。我似乎无法回家。html页面呈现到浏览器,我完全迷失了。当我手动输入此 URL 时:https://chore-master-j-s-thomas-1.c9users.io/home我得到的错误是:无法获取/主页所以我认为这必须是我的路线。

这是我的应用.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});          }])

这是我的索引.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

导入角度文件时有一些小的拼写错误:

<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 标记是脚本,而不是脚本。您放置它们的文件夹是库而不是

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

更新:您的 Bootstrap css 在 "lib" 下,从 js libs 脚本标签中删除"s"。另请注意,您在那些还添加了 s 的标签中有一个拼写错误。