Fatal编程技术网
  • javascript/
  • Javascript angularJS-添加ngRoute时控制器停止工作

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

javascript angularjs

Javascript angularJS-添加ngRoute时控制器停止工作,javascript,angularjs,ngroute,Javascript,Angularjs,Ngroute,因此，我正在尝试将路由添加到angularJS应用程序中，我正在运行一个问题介绍，如果我尝试将“ngRoute”添加到应用程序中，我的应用程序的主控制器将停止工作。此外，ngRoute不工作 我的代码： app.js（角度逻辑） （函数（）{ 角度模块（'fccNight'，['ngRoute']）） .config（['$routeProvider'，函数（$routeProvider）{ $routeProvider 。当（“/”{ templateUrl:'results.html' })

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

我的代码：

app.js（角度逻辑）

（函数（）{
角度模块（'fccNight'，['ngRoute']））
.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider
。当（“/”{
templateUrl:'results.html'
})
。否则（{重定向到：'/'}）；
}])
//控制器
.controller（'mainController'，['$scope'，'$http'，函数（$scope，$http）{
$scope.searchTerm=''；
$scope.data=[]；
$scope.loading=false；
$scope.goingNo=[]；
$scope.getResults=函数（）{
如果（$scope.searchTerm！=''）{
$scope.loading=true；
$scope.data=[]；
$http.get（'/api/search？term='+$scope.searchTerm）
.成功（功能（结果）{
$scope.loading=false；
$scope.data=结果；
for（var i=0；i<$scope.data.length；i++）{
$scope.goingNo.push（$scope.data[i]。正在进行；
}
});
}
}
$scope.addGong=函数（索引）{
//检查用户是否经过身份验证
如果（$scope.data[index].go>$scope.go[index]）{
$scope.data[index].go-=1；
}
否则{
$scope.data[index].go+=1；
}
//数据库中的寄存器
}
}])
})();
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> 


你今晚要去哪里？
提前找到附近的酒吧和RSVP

| 
|使用yelpapi构建
html（我要在“/”路由上加载的模板）

正在加载结果

{{result.going | | 0}}going
{{'评级：'+result.Rating | |'无可用评级'}
{{result.text | | |'此机构无审查。}
正如我所说的，如果我从app.js和index.html中删除所有路由逻辑并只添加results.html，那么应用程序运行良好，控制器加载正常，一切正常。但在向应用程序添加“ngRoute”后，结果模板不会加载，我无法从index.html访问任何mainController变量或逻辑

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

编辑：我刚刚注意到angular-route.js的cdn不工作。我在官方网站上找不到该库的下载链接，而且我没有bower，因此我不知道从何处获取该文件。

angular-route.js有一个错误

它的地址错了。没有它的版本。写下你的版本而不是X.Y.Z
因此，您需要在
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>
浏览器控制台中显示了什么错误消息？谢谢，我完全没有注意到这一点。 
<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>