Question

我正在处理我的第一个AngularJS项目，并且对于为什么我的模板没有显示感到困惑。我怀疑我的检查站未能涵盖某些内容。但是，我已经使用了复制和粘贴他们的说明，仍然无法显示我的模板。

Index.html （此处）

<!DOCTYPE html>
<html ng-app="blocJams"> <!-- ng-app activates angular blocJams module (found in scripts/app.js) -->
<head lang="en">
    <meta charset="UTF-8">
    <title>Bloc Jams Angular</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300"> <!-- CDN -->
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="/styles/normalize.css">
    <link rel="stylesheet" type="text/css" href="/styles/main.css">
    <link rel="stylesheet" type="text/css" href="/styles/landing.css">
    <link rel="stylesheet" type="text/css" href="/styles/collection.css">
    <link rel="stylesheet" type="text/css" href="/styles/album.css">
    <link rel="stylesheet" type="text/css" href="/styles/player_bar.css">
</head>
<body>
  <nav class="navbar"> <!-- navigation bar -->
      <a href="index.html" class="logo">
          <img src="assets/images/bloc_jams_logo.png" alt="bloc jams logo">
      </a>
      <div class="links-container">
          <a href="collection.html" class="navbar-link">collection</a>
      </div>
  </nav>

  <ui-view></ui-view>
//    also tried <div ui-view></div> too


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <!-- angulars source script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> <!-- UI Router Source -->
    <script src="/scripts/app.js"></script>
</body>
</html>

app.js （模块）

(function() {
    function config($stateProvider, $locationProvider) {
      $locationProvider
        .html5Mode({
            enabled: true,
            requireBase: false
        });

      $stateProvider
        .state('landing', {
            url: '/',
            templateUrl: '/templates/landing.html'
        });
        .state('album', {
            url: '/album',
            templateUrl: '/templates/album.html'
    }


    angular
        .module('blocJams', ['ui.router'])
        .config(config);
})();

landing.html （3个模板中的1个）

<section class="hero-content">
  <h1 class="hero-title">Turn the music up!</h1>
</section>

<section class="selling-points container clearfix">
  <div class="point column third">
    <span class="ion-music-note"></span>
    <h5 class="point-title">Choose Your Music</h5>
    <p class="point-description">The world is full of music; why should you have to listen to music that someone else chose?</p>
  </div>
  <div class="point column third">
    <span class="ion-radio-waves"></span>
    <h5 class="point-title">Unlimited, streaming, ad-free</h5>
    <p class="point-description">No arbitrary limits.  No distractions</p>
  </div>
  <div class="point column third">
    <span class="ion-iphone"></span>
    <h5 class="point-title">Mobile enables</h5>
    <p class="point-description">Listen to your music on the go.  This streaming service is available on all mobile platforms</p>
  </div>
</section>

好奇我做错了什么以及为什么我的<ui-view> directive没有使用localhost：3000显示内容。检查元素时，我没有显示任何错误。

进一步排查

当我从配置功能中注释掉$stateProvider时，$ locationProviders .html5Mode将以app.js:6 Uncaught TypeError: Cannot read property 'html5Mode' of undefined的形式返回。或者，如果我发表评论$locationProviders并离开$stateProvider，我会获得app.js:12 Uncaught TypeError: $stateProvider.state is not a function。感谢

Answer 1

不知怎的，我上面的所有代码都是正确的，我的问题是从main.css文件夹中的拼写错误中找到的：

body {
        background-image: url(..assets/images/blurred_backgrounds/blur_bg_3.jpg);
...
    }

并将assets/...更改为/assets/..

body {
        background-image: url(../assets/images/blurred_backgrounds/blur_bg_3.jpg);
...
    }

没有任何关于为何在检查时没有提示错误的线索，否则我会将其张贴在上面。

Answer 2

这是因为您已将着陆页网址设为 / 。要创建默认路由，您应该将 $ urlRouterProvider 注入配置函数并设置默认路由，如下所示

(function() {
    function config($stateProvider, $locationProvider,$urlRouterProvider) {
      $locationProvider
        .html5Mode({
            enabled: true,
            requireBase: false
        });
        $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('landing', {
            url: '/',
            templateUrl: '/templates/landing.html'
        });
        .state('album', {
            url: '/album',
            templateUrl: '/templates/album.html'
    }


    angular
        .module('blocJams', ['ui.router'])
        .config(config);
})();

<ui-view>未显示我的模板

2 个答案: