Question

我刚刚接触angularjs。我试图在我的index.html中测试简单的控制器。但是当我在我的localhost上运行它时，我收到一个错误：

无法加载资源：服务器响应状态为404（未找到）。

这是我的文件夹结构：

angulartesting
-bower_components
-index.html
-script.js

这是我的index.html文件：

<!-- index.html -->
<!DOCTYPE html>
<html  ng-app="store">
<head>
  <!-- SCROLLS -->
  <!-- load bootstrap and fontawesome via CDN -->
 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />

  <!-- SPELLS -->
  <!-- load angular and angular route via CDN -->
  <script src="/bower_components/angular/angular.min.js"></script>
      <script src="/bower_components/angular-route/angular-route.js"></script>
  <script src="script.js"></script>
</head>
<body >
  <div ng-controller="StoreController as store">
    <h1>{{store.product.name}}</h1>
    <h2>${{store.product.price}}</h2>
  </div>
     <script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

这是我的script.js：

// create the module and name it scotchApp
    // also include ngRoute for all our routing needs
(function(){
     var app = angular.module('store', []);
     app.controller('StoreController',function(){
        this.product=gem;
     });
     var gem = {
        name:'Gaurav',
        price:'220'
     }
})();

有谁能告诉我我做错了什么？我在我的本地服务器上运行它。

Answer 1

试试这个。我刚刚在脚本来源之前删除了正斜杠，并添加了ng-app属性。

    <!-- index.html -->
    <!DOCTYPE html>
    <html  ng-app="myApp">
    <head>
      <!-- SCROLLS -->
      <!-- load bootstrap and fontawesome via CDN -->
     <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />

      <!-- SPELLS -->
      <!-- **Removed forward slashes before script sources** -->
      <script src="bower_components/angular/angular.min.js"></script>
      <script src="bower_components/angular-route/angular-route.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
      <div ng-controller="StoreController as store">
        <h1>{{store.product.name}}</h1>
        <h2>${{store.product.price}}</h2>
      </div>
         <script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

希望有所帮助

无法加载资源

1 个答案: