Question

我正在通过fullstack.io上的教程制作一个带Rails和Angular.js的电影预告片网站，我在Angular.js代码中遇到了添加配置或控制器的问题。

我最初有

angular.module('poppopApp', ['ngRoute'])
.controller('MoviesController', ["$scope",
function($scope) {
    $scope.movies = [
        {
            youtubeId: "8Eg6yIwP2vs",
            title: "The Royal Tenenbaums",
            released: "2001",
            rated: "R",
            runningTime: 92,
            isFavorite: true,
            posterUrl: ""
        },
        {
            youtubeId: "lgo3Hb5vWLE",
            title: "Requiem for a Dream",
            released: "2000",
            rated: "R",
            runningTime: 102,
            isFavorite: false,
            posterUrl: ""
        }
    ];
}]);

.controller('MovieController', function($scope) {
    console.log('MovieController is working');
});

使用以下html工作正常

<!DOCTYPE html> 
<html lang="en" ng-app="poppopApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "Poppop" %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => "all" %>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <h1><a href="/"> Poppop! </a></h1>
            </a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right user-panel-container">
                <li class="active">

                </li>
            </ul>

        </div>
    </div>
</div>

<div ng-view></div>

<div ng-controller="MoviesController">
    <div class="container">
        <div class="row">
            <div ng-repeat="movie in movies" class="col-md-4 col-sm-5 col-xs-12">
                <div class="movie-container">
                    <a href="/movie/{{movie.youtubeId}}">
                        <div class="thumbnail">
                            <div class="poster img-rounded">
                                <img ng-src="{{movie.posterUrl}}" alt="{{movie.title}}" />
                            </div>
                        </div>
                        <div class="title">
                            {{movie.title}} ({{movie.released}})
                        </div>
                    </a>
                    <a class="favorite" ng-click="addFavorite(movie)" ng-if="!movie.isFavorite">
                     <span class="unfavorited-heart"> &#x2661;</span> Add Favorite 
                    </a>
                    <a class="favorite" ng-click="removeFavorite(movie)" ng-if="movie.isFavorite">
                     <span class="favorited-heart"> &#x2665;</span>  Favorite 
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="f">
    <div class="container">
        <div class="row">
            <p>Created by NikSeth</p>
        </div>
    </div>
</div>

<%= javascript_include_tag "application" %>
</body>
</html>

但是，当我将以下配置添加到角度文件或添加下面的控制器时，角度表达式将停止在页面上呈现。

config(function($routeProvider, $locationProvider) {
 $routeProvider
  .when('/',
   {
    controller: 'MoviesController',
    templateUrl: '/templates/movies.html'
   })
    .otherwise({redirectTo: '/'});
 $locationProvider.html5Mode(true);
});

这是我添加的控制器。

.controller('MovieController', function($scope) {
    console.log('MovieController is working');
});

提前致谢！

Answer 1

我认为一个问题是配置中的MoviesController应为MovieController：

.when('/',
   {
    controller: 'MoviesController',   <------------
    templateUrl: '/templates/movies.html'
   })

...


.controller('MovieController', function($scope) {  <-----------
    console.log('MovieController is working'); 
});

当我添加新控制器或配置时，Angular.js表达式停止评估

1 个答案: