我刚刚开始研究AngularJS并遇到了如下问题
我已将代码创建为 app.js
var myApp = angular.module("myApp",[]);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when("/getAnimals",{
templateUrl: "templates/showAnimals.html",
controller:"animalController"
});
$routeProvider.when("/getBirds",{
templateUrl: "templates/showBirds.html",
controller: "birdController"
});
}]);
myApp.controller("animalController",function($scope){
$scope.message = "Hello Animal World";
});
myApp.controller("birdController",function($scope){
$scope.message = "Hello Bird World";
});
index.html
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src = "app.js"></script>
</head>
<body>
<div>
<a href = "#getAnimals">Click Here to get Animals</a><br>
<a href = "#getBirds">Click Here to get Birds</a><br>
</div>
<p ng-view></p>
</body>
但我发现这个页面没有加载并且在我检查时显示一个巨大的错误。我真的不明白那里发生了什么。但经过几个小时的破解,我没有给CDN,而是添加了另一个CDN,即
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
有效!!!有了这个,我就知道自己犯了一些错误。但由于我是AngularJS的新手,我对那里发生的事情感到非常困惑。这个带CDN的版本在AngularJS中真的很重要吗?我是否在我的模块中编写了任何不支持更新版AngularJS的错误代码?
答案 0 :(得分:5)
神秘巨大错误(不在问题中)的一个可能原因可能是因为在分离出模块而不是将所有内容放入核心模块方面,角度已经从1.0.7开始移动。
在旧版本中,路由过去常常内置于核心模块和库中。但后来它被分离出ngRoute
模块(和不同的文件),这样你只需要在需要时选择加入。您使用的$routeProvider
属于ngRoute
模块,您需要在应用模块声明中列出该依赖项。
var myApp = angular.module("myApp",['ngRoute']);
还包括脚本:
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
使用ngRoute: 在AngularJS 1.2.0及更高版本中,ngRoute已移至其自己的模块。如果在升级到1.2.x或更高版本后出现此错误,请确保已安装ngRoute。
附加说明: - 大多数情况下,当您点击巨大错误中的链接时,它将导航到角度文档网站中的错误描述页面,它将有可能导致问题的线索的
答案 1 :(得分:0)
这是AngularJS(缩小版)的Google API链接:
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js
请注意http S
您的原始角度参考指向版本1.2.28,这是Google服务器上的未知文件。对于您需要开始使用的内容,该版本不需要是最新版本。除非另有说明,否则通常只会有一个稳定的版本进入CDN。
至于你的代码,只要你的app目录中有文件,它就可以正常工作:
--------- angularjs v.1.0.7功能--------- index.html(与原始帖子相同,只使用脚本参考:
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
app.js(与原版相同)
模板/ getAnimals.html
<h1>Animals</h1>
模板/ getBirdss.html
<h1>Birds</h1>
输出:: 在负载:
Click Here to get Animals Click Here to get Birds点击动物后
:
Click Here to get Animals Click Here to get Birds Animals