angularJS-当我添加ngRoute时，控制器停止工作

angularJS - controller stops working when I add ngRoute

本文关键字：控制器 停止工作 ngRoute 添加 angularJS-      更新时间：2023-09-26

因此，我正在尝试将路由添加到我的angularJS应用程序中，并且我正在运行一个问题，如果我尝试将"ngRoute"添加到应用程序，我的应用程序的主控制器将停止工作。此外，ngRoute不起作用。

我的代码：

app.js（角度逻辑）

(function() {
    angular.module('fccNight', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'results.html'
        })
        .otherwise({ redirectTo: '/' });
    }])


    //controllers
    .controller('mainController', ['$scope', '$http', function($scope, $http) {
        $scope.searchTerm = '';
        $scope.data = [];
        $scope.loading = false;
        $scope.goingNo = [];
        $scope.getResults = function() {
            if($scope.searchTerm !== '') {
                $scope.loading = true;
                $scope.data = [];
                $http.get('/api/search?term=' + $scope.searchTerm)
                    .success(function(results) {
                        $scope.loading = false;
                        $scope.data = results;
                        for(var i = 0; i < $scope.data.length; i++) {
                            $scope.goingNo.push($scope.data[i].going);
                        }
                    });
            }
        }
        $scope.addGoing = function(index) {
            // check if user is authenticated
            if($scope.data[index].going > $scope.goingNo[index]) {
                $scope.data[index].going -= 1;
            }
            else {
                $scope.data[index].going += 1;
            }
            // register in db
        }
    }])
})();

index.html的正文：

<body ng-controller="mainController" id="mainController">


    <!-- CONTENT -->
    <div class="container">
        <div class="row text-center">
            <div class="col-xs-12 main">
                <h1>Where are you going tonight?</h1>
                <p>Find nearby pubs and RSVP ahead of time.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2">
                <form>
                    <div class="input-group">
                        <input id="inputSearch" ng-model="searchTerm" type="text" class="form-control"  placeholder="Where are you?" autocomplete='off'>
                        <span id="goBtn" class="input-group-btn">
                            <a ng-click="getResults()" class="btn btn-default">Go</a>
                        </span>
                    </div>
                </form>
            </div>
        </div>
        <!-- LOADING -->
        <div class="row loading hidden" ng-show="loading">
            <div class="col-xs-12">
                <div class="loader"></div>
            </div>
        </div>
        <div class="text-center">Controller is working if search term is displayed: {{ searchTerm }}</div>

        <!-- TEMPLATE -->
        <div ng-view></div>

    </div>
    <!-- footer -->
    <footer class="row-footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 text-center">
                    <a href="https://github.com/otmeek/fcc-night">
                        <i class="fa fa-github"></i>
                    </a> | 
                    <a href="https://www.freecodecamp.com">
                        <i class="fa fa-fire"></i>
                    </a> | built using the Yelp API
                </div>
            </div>
        </div>
    </footer>


    <!-- =====================SCRIPTS===================== -->
    <!-- jQuery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
    <!-- custom scripts -->
    <script src="js/app.js"></script>
    <script src="js/scripts.js"></script>
</body>

results.html（我想在"/"路线上加载的模板）

<p>Results are loading</p>
<div class="row result" ng-repeat="result in data">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2 result">
        <div class="row">
            <!-- image -->
            <div class="col-xs-3 col-sm-2">
                <div class="image">
                    <img ng-src="{{ result.image || 'img/noimage.jpg' }}">
                </div>
                <div ng-click="addGoing($index)" class="going text-center">
                    {{ result.going || 0 }} going
                </div>
            </div>

            <!-- text -->
            <div class="col-xs-9 col-sm-10">
                <h4><a ng-href="{{ result.url || '#' }}">{{ result.name }}</a> 
                    <small>{{ 'Rating: ' + result.rating || 'No rating available' }}</small></h4>
                <p>{{ result.text || 'No reviews for this establishment.' }}</p>
            </div>
        </div>
    </div>
</div>

正如我所说，如果我从app.js中删除所有路由逻辑，从index.html中删除ng视图，只添加results.html，则应用程序运行良好，控制器加载正常，一切正常。但在将"ngRoute"添加到应用程序后，结果模板不会加载，我无法从index.html访问任何主控制器变量或逻辑。

如果有人知道我做错了什么，请告诉我。谢谢

编辑：我刚刚注意到angular-route.js的cdn不起作用。我在官方网站上找不到这个图书馆的下载链接，我也没有bower，所以我不知道从哪里可以得到这个文件。

angular-route.js存在错误https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

它的地址是错误的。它没有版本。请写下您的版本，而不是X.Y.Z例如https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js

对于角度路线，您需要在index.html页面中通过任何特定版本（如1.4.8）更改X.Y.Z。

所以你应该使用

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

而不是

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
相关文章：