Qual é a causa para "angular não está definido"
Estou seguindo os tutoriais em vídeo sobreegghead.io mas ao tentar seguir o seu exemplo, quando ele criou uma fábrica (ver vídeoAqui) Eu continuo recebendo "angular não está definido" Erro de referência, mas eu incluí o script angular
Esta é a minha página html:
<!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>
e este é o meu arquivo javascript "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){
}
Eu li alguns posts onde acontece semelhante (Aqui) e por favor me corrija se eu estiver errado, mas eu acho que isso tem a ver com a colocação de correias de inicialização e tentei inicializar manualmente usandoangular.bootstrap(document, ['Data']); mas sem sucesso, ainda recebe o mesmo erro.
Mas o que eu quero saber é: por que isso funciona para tantos exemplos on-line, como a série de vídeos de alto nível, mas tenho problemas, pois acredito que acompanhei o vídeo dele de muito perto. é uma mudança angular em versões recentes?