Menu
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?
659
While programming in JavaScript, jQuery or Angular JS, coders often encounter an error called Uncaught ReferenceError: $ is not defined. This usually happens when the $, that may be a variable or a method is not properly defined but is being used.
If you get a TypeError along the lines " Blah is undefined" or "cannot read property foo of undefined ", it means that you have a variable or property that has the value undefined , which is the default value for a variable until you assign something to it.
You need to import jquery with angular-cli . Edit your angular-cli. json file. Find script array and add jquery.
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.
116
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
