AngularJS简易应用网页停止渲染问题求助

Hey there, let's figure out why you're getting those blank pages! I’ve spotted a few key issues in your code that are causing AngularJS to fail rendering your content:

HTML Structure & Attribute Errors #

• Incorrect <html> tag placement: You added a second <html lang="en-US"> tag inside your <head> section, which breaks proper HTML document structure. Move the lang attribute to your root <html> tag instead, and remove the extra <html> tag from the head.
• Invalid stylesheet rel attribute: Your link tag uses rel="stylesheet/css" — this is wrong. The correct value for stylesheet links is rel="stylesheet".

Data Binding Mismatch (Core Issue) #

This is the main reason your page is blank:

• In your controller, you assigned the gems array to this.product (singular), but your HTML uses ng-repeat="product in store.products" (plural) to loop through items. Angular can’t find the products property on your controller, so it has nothing to render.
• Additionally, inside the ng-repeat block, you’re trying to access store.product.name, but once you’re in the repeat loop, you should use the local product variable (from product in store.products) to reference each item’s properties.

Fixed HTML Code #

<!DOCTYPE html>
<html ng-app='store' lang="en-US">
<head>
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
  <div ng-repeat="product in store.products">
    <h1> {{product.name}} </h1>
    <h2> {{product.price}} </h2>
    <p> {{product.description}} </p>
    <button>Add to Cart</button>
  </div>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

Fixed JavaScript Code #

(function (){
  const app = angular.module('store', []);
  
  app.controller("StoreController", function(){
    this.products = gems; // Updated to plural to match HTML binding
  });
  
  const gems = [
    {
      name: "Dodecahedron",
      price: 2.95,
      description: 'Many sided gem. Would look great in a ring.',
    },
    {
      name: "Pentagonal Gem",
      price: 5.95,
      description: 'A gem shaped like a pentagon. More expensive and more shiny',
    }
  ];
})();

Pro Tip for Future Debugging #

Whenever you hit a blank page with AngularJS, open your browser’s developer tools (press F12) and check the Console tab. Angular will almost always log an error message that points directly to the problem — this will save you tons of time troubleshooting!

内容的提问来源于stack exchange，提问作者breakthatbass