VM73:49Uncaught ReferenceError: angular is not defined in jsfiddle - angularjs

I am trying to run an angularJS example in jsfiddle (ofcourse learning purpose) getting below errors in console.
When I add this cdn for angular compatibility:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js
I seen below error.
VM141 angular.min.js:6 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=Error%3A%2…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.6%2Fangular.min.js%3A21%3A19)
When I remove the external source, seen below error:
VM93:45 Uncaught ReferenceError: angular is not defined
Concern:
Do I need to add external source for angular example? If yes then what will be the correct way to add external resource. (like, search a cdn for that api and add).
Here's the code snippet:
html:
<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{$scope.name}}
</div>
js:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});
Here's the fiddle: https://jsfiddle.net/supdas87/my1juu4e/2/

I've added angular-1.0.1.js file to external resources (you just have to copy and paste the URL), and changed {{$scope.name}} by {{name}} on your HTML file. You do not have to write $scope when you use {{ }}, it is implicit.
Here is a working Fiddle based on the code you provided.
PS: I've added Angular 1.0.1, but of course you can use the version of Angular you want. You can see allreleases here.
HTML
<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{name}}
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});

Related

Adding angular code in script section is not working in jsfiddle

Add the following code in html box and it will work as it should be
<div ng-app="myapp" data-ng-controller='Ctrl'>
<h1> Header </h1>
<h3> {{test}} </h3>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.test = "Hello";
});
</script>
Now move the JavaScript to JavaScript box
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.test = "Hello";
});
It start giving error: Uncaught Error: No module: myapp
I don't want to write everything in html section, any fix?
While I was playing with setting, found the answer :)
Change the setting Load Type from "OnLoad" to "No wrap - in ", see the attached image.
Strange but it is working like charm :)

Angular JS: Controller not working

I am doing a simple example but for some reason I am unable to print the value in message variable that I pass through $scope in my controller.
please find my code as give in this fiddle: http://jsfiddle.net/yy3vuzfk/1/
html page code:
<div ng-app>
<div>Hello AJS</div>
<div> Sum of 2 and 3 is: {{ 2 + 3}}
<div ng-controller="myController">
Message: {{ message }}
</div>
</div>
script.js code
var myController = function($scope){
$scope.message = "My Message";
};
My output html
Hello AJS
Sum of 2 and 3 is: 5
Message: {{ message }}
any help is appreciated
You first need to initalize angular by creating a module and then creating a controller in that module.
You can see this updated fiddle.
angular.module('myApp', [])
.controller("MyController", function($scope) {
$scope.message = "My Message Is Super Awesome";
});
You can find basic examples # Angularjs.org home page. Look at the "Add Some Control" section on that page.

ng-keypress not triggering function

I'm new to AngularJS. I'm implementing ng-keypress events in AngularJS.
I referred to many blogs and tried to do as it is shown, but my code is not working!
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
{{ text }}
</div>
</div>
script is:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.change=function($event){
$scope.text= 'a';
};
}]);
I'm trying to change the value of {{text}} on keypress.. but it's not working!
can anyone help me out!
Thanks :)
i tried the same things and its working
<body ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
<pre>{{name}}</pre>
</body>
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.change=function($event){
$scope.name= 'hello';
};
});
checkout this plunker... PLUNKER LINK
EDIT
checkout your code plunker.. thats also working
EDIT
finally the answer is: 1.0.7 does not support ng-keypress, hence it was not working..
sometimes ng-keypress do not work on some browsers !!
i had the issue with the arrow keys in chrome
try ng-keydown instead (it worked for me )
As everyone else says it's working as it is supposed to do. Perhaps you want something like this?
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = '';
$scope.change=function($event){
$scope.text += String.fromCharCode($event.keyCode);
};
}]);

how to modularize angular code?

I have two DIVs, each one is a self-contained user control or partial view, if I want one team to work on dog div, the other team work on fox div. can each team have their own angular module, controller, view, etc ? If yes, can you show me a code snippet?
another question: if I want to these two DIVs loosely coupled, what is the best angular way to let them communicate ?
<body ng-app>
<div id="dog">
<input type="text" ng-model="name"/> {{name}}
</div>
<div id="fox">
</div>
</body>
Thank you!
For other new ng developer's reference, this is the final code, if you have better solution, please feel free to improve it.
<body ng-app="airborneApp">
<div id="dog" ng-controller="dogController">
<input type="text" ng-model="name" /> {{name}}
</div>
<div id="fox" ng-controller="foxController">
<input type="text" ng-model="name" /> {{name}}
</div>
<script>
angular.module('airborneApp', ["dogCompany", "foxCompany"]);
angular.module('dogCompany', []).
controller('dogController', ['$scope', function ($scope) {
$scope.name = 'hello dog';
}]);
angular.module('foxCompany', []).
controller('foxController', ['$scope', function ($scope) {
$scope.name = "hello fox";
}]);
</script>
</body>
You can make as many modules as you can, you just have to reference all of them as a dependency in you main App module definition (and load them in correct order)
app
angular.module('myApp', ['firstModule', 'secondModule'])
modules
angular.module('firstModule', []) // empty array as a second parameter creates new module instead of using existing one
.controller(...)
.directive(...)
angular.module('secondModule', [])
.controller(...)
.directive(...)
For communication between different modules, the simplest way is to inject $rootScope into all controllers.
But preferred way is to create a service in main app module, which will be injected into both modules
angular.module('myApp')
.factory('SharedData', function() {
var a = {},
b = {};
return {
a: a,
b: b
}
})
and then use it
angular.module('firstModule')
.controller('something', function($scope, SharedData) {
SharedData.a.data = 'new data';
})
angular.module('secondModule')
.controller('something else', function(SharedData) {
console.log(SharedData.a.data); //will output 'new data'
})
each div can have a separate controller using:
<div ng-controller="firstCtrl"></div>
<div ng-controller="secondCtrl"></div>
for the other part of your question see:
What's the correct way to communicate between controllers in AngularJS?

Very simple ng-model watch not working

Here is the jsfiddle.
http://jsfiddle.net/CLcfC/
code
var app = angular.module('app',['']);
app.controller('TestCtrl',function($scope){
$scope.text = 'Change Me';
$scope.$watch('text',function(){
alert('Changed !');
});
})
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestCtrl">
<input type="text" ng-model='text'/>
<span>{{text}}</span>
</div>
</div>
I am not able to see the change in $scope.text. Please help.
This is so easy but what am I missing?
Change the module creation to this, make sure you don't put a empty string in the []. (Obvious the empty string is not a module that can be injected.)
var app = angular.module('app', []);
Demo: http://jsfiddle.net/MWa66/
Your JavaScript file loads after the AngularJS initialization and that's why it fails to find your module. In order to fix it change the initialization to a manual initialization.
First change your HTML and remove the ng-app directive:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div id="appRoot">
<div ng-controller="TestCtrl">
<input type="text" ng-model='text'/>
<span>{{text}}</span>
</div>
</div>
Then go to your JavaScript and use angular.bootstrap method to manually attach your module:
var app = angular.module('app',[]);
app.controller('TestCtrl',function($scope){
$scope.text = 'Change Me';
$scope.$watch('text',function(){
alert('Changed !');
});
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('appRoot'), ['app']);
});
You can find more help on manual AngularJS initialization here.
Thank you! I solved this annoying thing!
The solution that worked for me was that I use angular UI router and there I had used the following code
.state('app.monimes', {
url: "/monimes",
views: {
'menuContent' :{
templateUrl: "templates/monimes.html",
controller: 'sampleCtrl'
}
}
})
so then in the controller I had
/***
*
*Controller for tests..
*/
.controller('sampleCtrl',['$scope','sampleService', function($scope, $sampleService) {
$scope.username="em";
// Watch for changes on the username property.
// If there is a change, run the function
$scope.$watch('username', function(newUsername) {
// uses the $http service to call the GitHub API
// //log it
$scope.log(newUsername);
// and returns the resulting promise
$sampleService.events(newUsername)
.success(function(data, status, headers) {
// the success function wraps the response in data
// so we need to call data.data to fetch the raw data
$scope.events = data.data;
});
},true);
}
]);
and in the view I had
<div>
<label for="username">Type in a GitHub username</label>
<input type="text" ng-model="username" placeholder="Enter a GitHub username, like a user" />
<pre ng-show="username">{{ events }}</pre>
</div>
but that didn't work.
so I added ng-controller="sampleCtrl"
to the div and now it works :D
so that means that the view is loaded after the controller loads and the watcher doesn't get added to the watching variable.

Resources