Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder The Noob Coder's Avatar
    Join Date
    Jul 2012
    Location
    The City that Never Sleeps
    Posts
    99
    Thanks
    1
    Thanked 0 Times in 0 Posts

    AngularJS: Uncaught TypeError

    I wrote a really simple html and JavaScript file to start teaching myself AngularJS. I was following a video tutorial and copied the video's code exactly and the person in the video didn't have any errors.

    All I have is an html file with the following very simple code:
    Code:
    	<div class="container">
    		<div ng-controller="EventController">
    			{{event.name}}
    		</div>
    	</div>
    
    	<script type="text/javascript" src="/lib/jquery.min.js"></script>
    	<script type="text/javascript" src="/lib/underscore.min.js"></script>
    	<script type="text/javascript" src="/lib/bootstrap.min.js"></script>
    	
    	<script type="text/javascript" src="/lib/angular/angular.js"></script>
    	<script type="text/javascript" src="/js/app.js"></script>
    	<script type="text/javascript" src="/js/controllers/EventController.js"></script>
    The event scope variable is defined in the EventController file as so:
    Code:
    'use strict';
    
    eventsApp.controller('EventController',
    	function EventController($scope) 
    	{
    		$scope.event = 
    		{
    			name: 'Angular Boot Camp',
    			date: '1/1/2013',
    			time: '10:30 am'
    		};
    	}
    );
    eventsApp is a module defined in app.js as so:

    Code:
    'use strict';
    
    var eventsApp = angular.module('eventsApp', []);
    As you can see, really simple stuff! But when I run it in the browser I get the following error in the console:

    Uncaught TypeError: undefined is not a function

    I get this in the controller file right at the call to the controller() function:

    eventsApp.controller('EventController',

    What I've tried so far

    1) Removing the app.js file. Removing it gives me the error that eventsApp is undefined in EventController.js. So clearly, app.js is being recognized alright.
    2) Removing the angular library, which gives me the error that there is no defined function called "controller"
    3) Removing the jquery, underscore and bootstrap files, which changes nothing
    4) I thought at first that eventsApp wasn't a real variable, (debunked by (1) ), so I tried putting this only in the EventController.js file:

    Code:
    eventsApp = 1;
    This generated no error at all.

    Any suggestions?

  • #2
    New Coder The Noob Coder's Avatar
    Join Date
    Jul 2012
    Location
    The City that Never Sleeps
    Posts
    99
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Anyone?

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Location
    Oslo, Norway
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to have an element with the ng-app attribute like so:
    <div ng-app="eventsApp">

    <div class="container">
    <div ng-controller="EventController">
    {{event.name}}
    </div>
    </div>

    </div>

  • #4
    New Coder The Noob Coder's Avatar
    Join Date
    Jul 2012
    Location
    The City that Never Sleeps
    Posts
    99
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by superole View Post
    You need to have an element with the ng-app attribute like so:
    <div ng-app="eventsApp">

    <div class="container">
    <div ng-controller="EventController">
    {{event.name}}
    </div>
    </div>

    </div>

    Hello superole,

    Thanks for your response. I already have the ng-app attribute on the outer <html> tag, so I don't think that is the problem.
    Code:
    <!DOCTYPE html>
    <html ng-app="eventsApp">
    
    <head>
    	<title>Event Registration</title>
    	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    	<link rel="stylesheet" type="text/css" href="./css/app.css">
    </head>
    <body>
    	<div class="container">
    		<div ng-controller="EventController">
    			{{event.name}}
    		</div>
    	</div>
    
    	<script type="text/javascript" src="/lib/jquery.min.js"></script>
    	<script type="text/javascript" src="/lib/underscore.min.js"></script>
    	<script type="text/javascript" src="/lib/bootstrap.min.js"></script>
    	
    	<script type="text/javascript" src="/lib/angular/angular.js"></script>
    	<script type="text/javascript" src="/js/app.js"></script>
    	<script type="text/javascript" src="/js/controllers/EventController.js"></script>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •