I am making a simple program in Angular.js to print a name. Alas, still it shows an error.
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="angularScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{name}}
</body>
</html>
AngularScript.js
// Defining Module
var app = angular.module('myApp',[]);
// Defining Controller
app.controller('myCtrl', function ($scope) {
$scope.name = "Peter";
});
Error:
-> Uncaught ReferenceError: System is not defined
-> Uncaught ReferenceError: angular is not defined
Can someone help me out, with where is the problem?
Use the correct version of AngularJS script file.
You are writing AngularJS script of 1.4 but including 2.0.
Just replace your script tag with:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
Related
The following angular piece doesn't work, it seems that in the immediately invoked function the code breaks where I create my module because angular syntax is not recognised.
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js"></script>
</head>
<body ng-controller="MyCtrller">
<h1>Hello!</h1>
{{ cousin }}
</body>
</html>
<script type="text/javascript">
(function() {
var app = angular.module("MyModule", []);
var MyCtrller = function($scope) ///typo here in "MyCtrller"
{
$scope.cousin = "Karen";
}
app.controller("MyCtrller", ["$scope", MyCtrller]);
}());
</script>
I expect the result to be Karen.
Instead, I see {{ cousin }}
The error I get in console is:
Uncaught ReferenceError: angular is not defined
on the line where I create my module:
var app = angular.module("MyModule", []);
Your problem is that you are including the v2.0 version of angular (a.k.a. Angular), instead of 1.x version (a.k.a. AngularJS) while using the latter syntax. :)
Simply change your script to use the correct version and you should be good to go.
https://angularjs.org/
Just use the AngularJs script instead of Angular Script in your script like this
<script src="https://code.angularjs.org/1.6.7/angular.js"></script>
I'm trying to get Tiny MCE to work in angular and having less than stellar success with it.
Currently I cant get past this error:
Unable to get property 'body' of undefined or null reference
I even tried to just get a basic fiddle running with it but failed at that too. http://jsfiddle.net/m0z0n6dL/
As far as I understand all you need is the tinymce-angular script and then decorate your textbox with <textarea ui-tinymce="tinymceOptions" ng-model="text" type="text"><textarea>
and to include it in the module
var myApp = angular.module('myApp', ['ui.tinymce']);
But this is failing on:
Unknown provider $sceProvider <- $sce <- uiTinymceDirective
If anyone could show me a simple example using CDNs for angular and tinymce dependencies I would be really happy.
Well, it seems you MUST instantiate your module as ui.tinymce, otherwise it doesn't work.
Here's an example:
angular.module('ui.tinymce')
.controller('mainCtrl', function($scope, $sce) {
$scope.updateHtml = function() {
$scope.tinymceHtml = $sce.trustAsHtml(ctrl.tinymce);
};
});
<!DOCTYPE html>
<html ng-app="ui.tinymce">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/ui-tinymce/master/src/tinymce.js"></script>
</head>
<body ng-controller="mainCtrl">
<form method="post">
<textarea ui-tinymce
ng-model="tinymce"
ng-change="updateHtml()"></textarea>
</form>
<div ng-bind-html="tinymceHtml"></div>
</body>
</html>
Note: The example above won't compile well because the stacksnippets is blocking the url of tinymce.
You can see the full demo here without errors.
I am trying to learn angular, and I am stuck in first chapter :-(
I am using angular 2.0, but when i try to create a module I get error "angular is not defined".
My plunker: Plunker:
my script:
(function() {
console.log("Hello");
var app = angular.Module("gitHubViewer", []);
app.controller("MainController", MainController);
var MainController = function($scope) {
$scope.message = "Hello World!";
};
}());
HTML:
<html ng-app="gitHubViewer">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular.js" data-semver="2.0.0-alpha.20" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Can some body please help, is this a wrong way of creating module?
Thanks
Please check https://code.angularjs.org/2.0.0-alpha.20/angular.js link.
Display 404 Not Found.
Please download angularJS From https://angularjs.org/ and add it in your project.
I've not looked into Angular 2 very much but your code looks more like Angular 1 to me.
Angular 2 apps are bootstrapped in a very different way using ES6 components (specifically System). It should look more like this:
<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>
This code was taken from this excellent tutorial: Getting Started with Angular 2.0.
I use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web.
I just make 2 files - hello.html and controller.js.
hello.html:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.
I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.
What to do to see the "Hello World" in my browser?
Thanks!
It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller.
<html ng-app> Isn't doing anything without <html ng-app="myApp">.
myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.
Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/
The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:
angular.module('myApp')
.controller('HelloController', ['$scope',function($scope){
//doStuff
}]);
I hope this helps!
you're missing Angular Library.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js
Good luck.
The solution is:
hello.html:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.greeting = { text: 'Hello' };
});
Thanks for your answers! hope my book won't put me in difficulties again :)
I have the following HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Title</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
Hello World
</body>
</html>
and is giving me the following exception:
0x800a139e - JavaScript runtime error: [$injector:nomod]
http://errors.angularjs.org/1.2.26/$injector/nomod?p0=ngLocale
If I switch to the non-minified angular.js, the error goes away
It is hard to say without looking at your javascript file.
Usually the problem is that angular's dependency system uses function arguments with the default syntax.
for example:
app.controller('mainController', function($scope) {
$scope.data= 'data';
});
becomes:
app.controller("mainController",function(e){e.data="data"});
In order to avoid this situations you have to use the following syntax
app.controller('mainController', ['$scope', function($scope) {
$scope.data= 'data!';
}]);
So the minification script will not change the dependencies name.
You can read more at https://docs.angularjs.org/tutorial/step_05 scroll down to A note on minification