So I already know when I see the answer I'm going to feel really dumb, but I'm working through the AngularJS tutorials at egghead.io. When I do this:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="/foundation/stylesheets/foundation.min.css">
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
</body>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
</html>
with my JavaScript file as so (named main.js):
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
return { message: "I'm data from a service"}
})
function FirstCtrl($scope, Data) {
$scope.data = Data;
}
function SecondCtrl($scope, Data) {
$scope.data = Data;
}
My {{ data.message }} isn't recognized as an AngularJS binding (i.e. in the page it shows up as
{{ data.message }} instead of "I'm data from a service"). But if I take all the JS code and put it into <script></script> tags directly in the HTML it works fine. Am I missing a reference or something? Haven't seemed to find this anywhere, likely because it's really basic.
I'm going to JUMP THE GUN and recommend you switch these
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
to
<script src="lib/angular/angular.js"></script>
<script src="js/main.js"></script>
If this works then that is because before you were trying to use angular when it wasn't event loaded.
Tip
Now, when I first started with javascript these sort of things used to happen to me a lot. The best thing for you to do is learn how to use the
consoleit would have told you in the console something along the lines ofcannot read property 'module' of undefinedthat meaning thatangularisundefinedand therefore not loaded.
Load Angular before your controllers, not after
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With