“角度未定义"的原因是什么? [英] What is the cause for "angular is not defined"
问题描述
我正在关注 egghead.io 上的视频教程，但在他创建时尝试效仿他的示例一家工厂(参见视频此处)我不断收到角度未定义"" 参考错误，但我已经包含了 angular 脚本
这是我的 html 页面:
<头><title>原型</title><link rel="stylesheet" type="text/css" href="foundation.min.css"><script type="text/javascript" src="main.js"></script><身体><div data-ng-app=""><div data-ng-controller="FirstController"><input type="text" data-ng-model="data.message"><h1>{{ data.message }}</h1><div data-ng-controller="SecondController"><input type="text" data-ng-model="data.message"><h1>{{ data.message }}</h1>
<script type="text/javascript" src="angular.min.js"></script></html>
这是我的 javascript 文件main.js":
//服务//第 1 步创建一个应用程序var myApp = angular.module('Data', []).//步骤 2 创建工厂//服务名称，函数myApp.factory('数据', function(){返回 { 消息:我是来自服务的数据"}});//控制器函数 FirstController($scope, Data){$scope.data = 数据；}功能 SecondController($scope){}我读过一些类似的帖子(这里)和如果我错了，请纠正我，但我认为这与引导打包有关，我尝试使用 angular.bootstrap(document, ['Data']); 手动引导，但仍然没有成功得到同样的错误.
但我想知道的是，为什么这适用于如此多的在线示例，例如 egghead 视频系列，但我有问题，因为我相信我非常密切地关注了他的视频.最近版本的角度有变化吗?
您必须将脚本标记放在引用 Angular 的标记之后.把它移出head:
<script type="text/javascript" src="angular.min.js"></script><script type="text/javascript" src="main.js"></script>按照您现在的设置方式，您的脚本会在 Angular 加载到页面上之前运行.
I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
这篇关于“角度未定义"的原因是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
