Question

当我查看我的角度项目时，我想在我的主index.html中加载模板html，但我总是得到一个空屏幕。

<!DOCTYPE html>
<html lang="nl" ng-app="store">
<head>
    <meta charset="UTF-8">
    <title>NMDAD-II Web App</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-darkRed" ng-controller="StoreController as store">

<div ng-view></div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="vendor/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="app/app.js"></script>
<script type="text/javascript">

    angular.module("store", ["ngRoute"])
            .config(function($routeProvider){
                $routeProvider
                        .when('/', {
                            templateUrl: 'app/home/home.view.html'
                        })
                        .otherwise({
                            redirectTo: '/'
                        });
            });

</script>


<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.2.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
</body>
</html>

我也尝试用浏览器同步加载它，但它仍然是相同的。我想在index.html中加载home.view.html。我试着在app.js中编写javascript，但仍然无法正常工作。

编辑：这是我的app.js.我的main.js只包含一些jquery

function () {


    'use strict';

    // Module declarations
    angular.module('store', [
        // Angular Module Dependencies
        // ---------------------------
        'ngAnimate',
        'ngMaterial',
        'ngMessages',
        'ngResource',


        // Third-party Module Dependencies
        // -------------------------------
        'ui.router', // Angular UI Router: https://github.com/angular-ui/ui-router/wiki

        // Custom Module Dependencies
        // --------------------------
        'store.home',
        'store.services'
    ]);
    angular.module('store.home', []);
    angular.module('store.services', []);

    // Make wrapper services and remove globals for Third-party Libraries
    angular.module('store')
        .run(Run);


    function Run(
        $_,
        $faker
    ) {}



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

    app.controller('StoreController', function(){
        this.products = gems;
    });

  var gems = [
      {
          title: "Islay Blended Malt",
          description: "The Isle of Islay is known for its peaty whiskies. For there is a great abundance of peat on the island, and because electricity reached Islay so late, peated was relied upon as a staple source of fuel. But there is so much than just peat to be found.",
          price: "103.45",
          canPurchase: true

      },

      {
          title: "Springbank 10 Year old",
          description: "Blended from a mixture of bourbon and sherry casks, the light colour of this malt belies the richness of its character.",
          price: "36.25",
          canPurchase: true

      },

      {
          title: "Hazelburn 10 Year old",
          description: "First released in 2014, this is the first bottling of Hazelburn at 10 years of age. Hazelburn is Springbank's triple-distilled, unpeated single malt.",
          price: "37.75",
          canPurchase: true

      }
  ]

})();

Answer 1

我看到的问题是你在加载角度之前加载了角度路径。

尝试将这两行切换为：

<script src="vendor/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

当我加载脚本加载它们时，我收到此错误ReferenceError: angular is not defined。

角度模板路由不起作用

1 个答案: