Question

所以我试图将路线添加到我的angularJS应用程序中，并且我正在介绍一个问题，如果我尝试添加＆＃39; ngRoute＆＃39;我的应用程序的主控制器将停止工作。到应用程序。此外，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（我要加载的模板＆＃39; /＆＃39;路线）

<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>

正如我所说的，如果我从index.html中删除app.js和ng-view中的所有路由逻辑，只需添加到results.html，该应用程序运行正常，控制器正常加载，一切正常。但是在添加＆＃39; ngRoute＆＃39;到应用程序，结果模板没有加载，我无法从index.html访问任何mainController变量或逻辑。

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

编辑：我刚注意到angular-route.js的cdn无效。我无法在官方网站上找到此库的下载链接，而且我没有凉亭，所以我不知道从哪里获取此文件。

Answer 1

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

Answer 2

您需要在X.Y.Z页面中针对角度路线更改1.4.8等任何特定版本index.html。

所以你应该使用

<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>

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

2 个答案: