angularJS

Question

所以我正在尝试将路由添加到我的 angularJS 应用程序，我运行遇到一个问题，如果我尝试添加 'ngRoute' 到应用程序。此外，ngRoute 不工作。

我的代码：

app.js（angular逻辑）

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

<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-view 并仅添加 results.html，则应用程序是运行很好，控制器正在正确加载，一切正常。但是在将 'ngRoute' 添加到应用程序后，结果模板不会加载，我无法从 index.html.

访问任何 mainController 变量或逻辑

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

编辑：我刚注意到 angular-route.js 的 cdn 不工作。我在官方网站上找不到这个库的下载 link，而且我没有 bower，所以我不知道从哪里得到这个文件。

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

您需要在 index.html 页面中为 angular 路线更改 X.Y.Z 任何特定版本，例如 1.4.8。

所以你应该使用

<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 时控制器停止工作

angularJS - controller stops working when I add ngRoute

javascript

ngroute