angularjs - Error: [ng:areq] Argument 'ChatAppCtrl' is not a function, got undefined -
hi trying run angular based chat app, it's giving me error. kindly please me fix this. code available on https://github.com/tamaspiros/angularchat
the error getting
error: [ng:areq] argument 'chatappctrl' not function, got undefined http://errors.angularjs.org/1.3.9/ng/areq?p0=chatappctrl&p1=not%20a%20function%2c%20got%20undefined @ regex_string_regexp (angular.js:63) @ assertarg (angular.js:1577) @ assertargfn (angular.js:1587) @ angular.js:8418 @ angular.js:7592 @ foreach (angular.js:331) @ nodelinkfn (angular.js:7579) @ compositelinkfn (angular.js:7075) @ compositelinkfn (angular.js:7078) @ publiclinkfn (angular.js:6954)
the index.html
<!doctype html> <html ng-app="chat"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.yeti.css"> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" href="components/font-awesome/css/font-awesome.css"> </head> <body ng-controller="chatappctrl" ng-cloak> <!-- fixed navbar --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" ng-click="about()">angularchat</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/">home</a></li> <li><a href="#" ng-click="about()">about</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><p class="navbar-text online" ng-if='status === "online"'>{{ status }}</p><p class="navbar-text offline" ng-if='status === "offline"'>{{ status }}</p></li> <li class="dropdown" ng-show="joined"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ peoplecount }} online <b class="caret" ng-if="peoplecount > 0"></b></a> <ul class="dropdown-menu"> <li ng-repeat="user in users"><p class="white">{{ user.name }} <span ng-if="user.countrycode"><img class="flag flag-{{user.countrycode}}"></span> <i class="fa fa-{{user.device}}"></i></p></li> </ul> </li> <li class="dropdown" ng-show="joined"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ roomcount }} room<span ng-if="roomcount === 0 || roomcount > 1">s</span> <b class="caret" ng-if="roomcount > 0"></b></a> <ul class="dropdown-menu"> <li ng-repeat="room in rooms"> <form class="form-inline" role="form"><div class="form-group"><p class="white">{{ room.name }}</p></div><button class="btn btn-success btn-xs" type="submit" ng-click='joinroom(room)' ng-hide='room.id === user.owns || room.id === user.inroom || user.owns || user.inroom'>join</button> <button type="submit" ng-click='deleteroom(room)' class="btn btn-xs btn-danger" ng-show='room.id === user.owns'>delete</button> <button type="submit" ng-click="leaveroom(room)" class="btn btn-xs btn-info" ng-hide='room.id === user.owns || !user.inroom || user.owns || user.inroom !== room.id'>leave</button></form> </li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <!-- begin page content --> <div class="container" ng-show="!joined"> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="username">name: </label> <input type="text" class="form-control" name="username" id="username" ng-model="username" placeholder="enter desired name"> </div> <button type="submit" class="btn btn-default btn-sm" ng-click='joinserver()'>enter chat</button> </form> <small ng-if="error" class="text-danger">{{ error.join }}</small> <small ng-if="suggestedusername" class="text-info" ng-click="setusername(suggestedusername)">how <span class="text-success" style="cursor: pointer;">{{ suggestedusername }}</a>?</small> </div> <div ng-hide="!joined" class="container" > <p >hello {{ user.name }}. <span ng-if="user.owns">you own room: <strong>{{ user.roomname }}</strong>.</span> <span ng-if="!user.owns && user.inroom">you have joined room: <strong>{{ user.roomname }}</strong>.<br> can create own room (but need leave current 1 first) </span><br> <small ng-if="user.owns">you can remove room clicking delete in drop-down menu in top right corner.</small></p> <p ng-show="!user.inroom">create chat room or join 1 (top right corner). <div id="createroom"> <form class="form-inline" role="form" ng-hide="user.owns && user.inroom"> <div class="form-group"> <label class="sr-only" for="roomname">room name: </label> <input type="text" placeholder="enter room name" class="form-control" ng-model="roomname" name="roomname" id="roomname"> </div> <button type="submit" class="btn btn-default btn-sm" ng-click="createroom()">create room</button> <small ng-if="error" class="text-danger">{{ error.create }}</small> </form> </div> <div id="chatpanel" ng-show="user.inroom" > <div id="chat"> <form class="form-inline" role="form" ng-show="user.owns || user.inroom"> <div class="form-group"> <label class="sr-only" for="message">message: </label> <input type="text" placeholder="enter message" class="form-control" ng-model="message" name="message" id="message" ng-keypress="typing($event, user.inroom)" on-focus="focus(true)" on-blur="focus(false)"> </div> <button type="submit" class="btn btn-default btn-sm" ng-click='send()'>send message</button> </form> <small ng-if="error" class="text-danger">{{ error.send }}</small> </div> <div class="row"> <div class="col-lg-6"> <div id="messages"> <ul> <li class="list-unstyled" ng-repeat="message in messages track $index" autoscroll ng-class="{dark: $index % 2 === 0}"><strong>{{ message.name }}</strong>: {{ message.message }}</li> </ul> </div> </div> <div class="col-lg-6"> <div id="sidebar"> <ul ng-if="istyping"> <li ng-repeat="person in typingpeople track $index" class="text-muted list-unstyled"><small>{{ person }} typing</small></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <p class="text-muted">angularchat tamas piros | <a href="http://tamas.io/" target="_blank">http://tamas.io/</a> | <a href="https://twitter.com/tpiros" target="_blank">@tpiros</p> </div> </div> <!-- modal --> <script type="text/ng-template" id="aboutmodal" /> <div class="modal-header"> <h3>about angularchat</h3> </div> <div class="modal-body"> <p>hello , visiting angularchat.</p> <p>this experimental project testing new javascript technologies.</p> <p>first, please enter username. once you've done have 2 options. can create room or can join existing one.</p> <p>please note once you've joined room can't create 1 (basically can part of 1 room @ 1 time). note if you're room owner , disconnect server, delete or leave room other participants removed room well.</p> <p>if you'd read more project please check out article: <a href="http://tamas.io/angularchat/">http://tamas.io/angularchat/</a></p> <p>if you're interested in code behind project, please go to: <a href="https://github.com/tamaspiros/angularchat" target="_blank">https://github.com/tamaspiros/angularchat</a></p> </div> <div class="modal-footer"> <button class="btn btn-warning btn-sm cancel" ng-click="cancel()">cancel</button> </div> </div> </script> <script src="/socket.io/socket.io.js"></script> <script src="components/angular/angular.js"></script> <script src="components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <script src="components/jquery/dist/jquery.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/directives.js"></script> <script src="js/services.js"></script> </body> </html>and function chatappctrl
'use strict'; function chatappctrl($scope, $q, $modal, socket, useragent, geolocation) { $scope.peoplecount = 0; $scope.messages = []; $scope.user = {}; //holds information current user $scope.users = {}; //holds information users $scope.rooms = []; //holds information rooms $scope.error = {}; $scope.typingpeople = []; $scope.username = ''; $scope.joined = false; var typing = false; var timeout = undefined; /* page */ $scope.about = function() { var modalinstance = $modal.open({ templateurl: 'aboutmodal', controller: aboutmodalctrl }); }; var aboutmodalctrl = function($scope, $modalinstance) { $scope.cancel = function() { $modalinstance.dismiss('cancel'); }; }; /* page end */ $scope.setusername = function(suggestedusername) { $scope.username = suggestedusername; } function timeoutfunction() { typing = false; socket.emit('typing', false); } $scope.focus = function(bool) { $scope.focussed = bool; } $scope.typing = function(event, room) { if (event.which !== 13) { if (typing === false && $scope.focussed && room !== null) { typing = true; socket.emit('typing', true); } else { cleartimeout(timeout); timeout = settimeout(timeoutfunction, 1000); } } } socket.on('istyping', function(data) { if (data.istyping) { $scope.istyping = data.istyping; $scope.typingpeople.push(data.person); } else { $scope.istyping = data.istyping; var index = $scope.typingpeople.indexof(data.person); $scope.typingpeople.splice(index, 1); $scope.typingmessage = ''; } }); $scope.joinserver = function() { $scope.user.name = this.username; if ($scope.user.name.length === 0) { $scope.error.join ='please enter username'; } else { var usernameexists = false; socket.emit('checkuniqueusername', $scope.user.name, function(data) { usernameexists = data.result; if (usernameexists) { $scope.error.join = 'username ' + $scope.user.name + ' exists.'; socket.emit('suggest', $scope.user.name, function(data) { $scope.suggestedusername = data.suggestedusername; }); } else { socket.emit('joinsocketserver', {name: $scope.user.name}); $scope.joined = true; $scope.error.join = ''; } }); } } $scope.send = function() { if (typeof this.message === 'undefined' || (typeof this.message === 'string' && this.message.length === 0)) { $scope.error.send = 'please enter message'; } else { socket.emit('send', { name: this.username, message: this.message }); $scope.message = ''; $scope.error.send = ''; } } $scope.createroom = function() { var roomexists = false; var room = this.roomname; if (typeof room === 'undefined' || (typeof room === 'string' && room.length === 0)) { $scope.error.create = 'please enter room name'; } else { socket.emit('checkuniqueroomname', room, function(data) { roomexists = data.result; if (roomexists) { $scope.error.create = 'room ' + room + ' exists.'; } else { socket.emit('createroom', room); $scope.error.create = ''; if (!$scope.user.inroom) { $scope.messages = []; $scope.roomname = ''; } } }); } } $scope.joinroom = function(room) { $scope.messages = []; $scope.error.create = ''; $scope.message = ''; socket.emit('joinroom', room.id); } $scope.leaveroom = function(room) { $scope.message = ''; socket.emit('leaveroom', room.id); } $scope.deleteroom = function(room) { $scope.message = ''; socket.emit('deleteroom', room.id) } socket.on('senduserdetail', function(data) { $scope.user = data; }); socket.on('listavailablechatrooms', function(data) { $scope.rooms.length = 0; angular.foreach(data, function(room, key) { $scope.rooms.push({name: room.name, id: room.id}); }); }); socket.on('sendchatmessage', function(message) { $scope.messages.push(message); }); socket.on('sendchatmessagehistory', function(data) { angular.foreach(data, function(messages, key) { $scope.messages.push(messages); }); }); socket.on('connectingtosocketserver', function(data) { $scope.status = data.status; }); socket.on('usernameexists', function(data) { $scope.error.join = data.data; }); socket.on('updateuserdetail', function(data) { $scope.users = data; }); socket.on('joinedsuccessfully', function() { var payload = { countrycode: '', device: '' }; geolocation.getlocation().then(function(position) { return geolocation.getcountrycode(position); }).then(function(countrycode) { payload.countrycode = countrycode; return useragent.getuseragent(); }).then(function(ua) { return useragent.geticon(ua); }).then(function(device) { payload.device = device; socket.emit('userdetails', payload); }); }); socket.on('updatepeoplecount', function(data) { $scope.peoplecount = data.count; }); socket.on('updateroomscount', function(data) { $scope.roomcount = data.count; }); socket.on('disconnect', function(){ $scope.status = 'offline'; $scope.users = 0; $scope.peoplecount = 0; }); }
recent versions of angular not allow global functions used controllers, see docs under "arguments". solutions:
(preferred) use
angular.module('chat').controller('chatappctrl', chatappctrl);configure
$controllerprovider: in coonfig block, inject$controllerprovider, run:$controllerprovider.allowglobals().
Comments
Post a Comment