Question

我是使用Angular和Rails的新手，当我将Angular项目导入Rails项目并将模板拆分为单个文件时，我遇到了困难。现在导航和页脚部分显示，但模板不会加载到页面上。我在浏览器控制台中收到此错误：

＆＃34;未捕捉错误：[$ injector：nomod]模块＆＃39; galleryApp＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数＆＃34;

当我检查页面时，模板就在那里。如果我能提供更多信息来帮助我，请告诉我。在此先感谢您的帮助！

application.html.erb

 <!DOCTYPE html>
  <html>
  <head>
  <title>Gallery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://use.fontawesome.com/6e04e9b3c4.js"></script>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
  </head>

  <body ng-app="galleryApp">

    <div ng-include="'nav/_nav.html'"></div>
    <ui-view></ui-view>
    <div ng-include="'footer/_footer.html'"></div>

  </body>
  </html>

app.js

var app = angular.module('galleryApp', ['ui.router', 'templates']);

app.config([
  '$stateProvider',
  '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('teleport', {
        url: '/teleport',
        templateUrl: 'teleport/_teleport.html',
        controller: 'CoverImageCtrl'
      });
   $urlRouterProvider.otherwise('teleport');
}]);

teleport.html

<script type="text/ng-template" id="/teleport.html">

  <div id="teleport-gallery" class="container-fluid bg-3 text-center">
    <div class="row">
      <div class="teleport-images" ng-repeat="myCoverImage in myCoverImages" ng-mouseover="style={'height':'410px','width':'410px'}" ng-mouseleave="style={'height':'400px','width':'400px'}">
        <a href="#/galleries/{{$index}}"><img class ="teleport-images" ng-style="style"  ng-hide="changeImage" ng-src="{{getCoverImagePath(myCoverImage.image)}}" alt="super awesome picture" /></a>
        <h2 class="teleport-titles">{{myCoverImage.title}}</h2>
      </div>
    </div>
  </div>
</script>

coverImageCtrl.js

var app = angular.module('galleryApp');

app.controller('CoverImageCtrl', [
  '$scope',
  function($scope){
    $scope.myCoverImages = [
      {image: "san_francisco/Corgi.png", title: "San Diego"},
      {image: "baja/secret-hideaway.png", title: "Chicago"},
      {image: "new_orleans/llama.jpg", title: "New Orleans"},
      {image: "chicago/mex.jpg", title: "San Francisco"},
      {image: "los_angeles/surfing-1400X600.jpg", title: "Los Angeles"},
      {image: "san_diego/rainbow_shave_ice_800.jpg", title: "Baja Nor"}
    ];

    $scope.getCoverImagePath = function(coverImageName) {
      return  "../../images/galleries/" + coverImageName;
    };

}]);

的application.js

// = require angular
// = require angular-rails-templates
// = require angular-ui-router
//= require_tree .

Answer 1

你错过了你的角度文件和你的app.js，不是吗？

<script src="angular/angular.min.js"></script>
<script src="app.js"></script>

AngularJS模板未在页面上显示，但在检查页面时存在

1 个答案: