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.
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 am following along a tutorial for angualr js that is in angular 1.3 ,but I am using the lastest stable version 1.4.7. The following code doesnt work in 1.4.7 although it does in 1.3.2. Could you please tell me the changes I need to do for the code to work ?
HTML :
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
JavaScript :
var MainController = function($scope){
$scope.message = "Hello World";
};
I am using the online tool plunker to code.
Can you please tell me the changes I need to make ?
Global controller constructors are disabled by default since version 1.3.0-beta.15.
In later versions use this instead:
angular.module('myApp', []).controller('MainController', function($scope) {
$scope.message = "Hello World";
});
And:
<html ng-app="myApp">
Demo: http://plnkr.co/edit/XWv50NKr5ojiplbMHI59?p=preview
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 am trying to get angularstrap working but have not had any luck yet. here is my angular code
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.tpl.min.js"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
{{understand}}
</div>
<script>
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
app.controller("MainController", function($scope){
$scope.understand = "I now understand how the scope works!";
});
</script>
</body>
</html>
I get this error
Uncaught object ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:33
when I take mgcrea.ngStrap out from
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
then it works. Any help will be appreciated!
angularstrap depends on angular animate..
include this
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
It is already answered here : $injector:modulerr using angular-strap?
AngularStrap is lighter and faster than ever as it does leverage the
power of ngAnimate from AngularJS 1.2+!
https://github.com/mgcrea/angular-strap/issues/651
I am currently ramping up with angular, and trying to make dynamic routing work.
Note: I have looked at the question: How to defer routes definition in Angular.js?, and I believe I am doing everything it states, but I'm still getting the error "unknown provider: $routeProvider"
What am I doing wrong?
html:
<!doctype html>
<html ng-app="rProvider">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="lib/angular/angular.js"></script>
<script src="js/routeProviderTest.js"> </script>
</head>
<body>
<div ng-controller="rControl">
<h2>Route Controller Test</h2>
[Route 1 | <a>Route 2</a>]
<hr/>
<span class="partial-info">
Partial: {{routeValue}}
</span>
<div ng-view></div>
<small>The Bottom</small>
</div>
</body>
</html>
js:
var myAppModule = angular.module('rProvider',[]);
myAppModule.config(function($routeProvider){
$routeProvider.when("r1",{templateUrl:"/route1.html"});
});
myAppModule.controller('rControl', function($scope, $route){
$scope.routeValue = 'nothing yet';
});
thanks in advance...
If you are using version 1.2.x, you need to download angular-route.js, include it via the <script> tag, and add it as a dependency module in JavaScript:
<!-- in HTML -->
<script src='angular-route.js'></script>
// in JavaScript
var myAppModule = angular.module('rProvider', ['ngRoute']);
Maybe this will help you:
http://www.egghead.io/video/gNtnxRzXj8s
This guy has some pretty good tutorials on AngularJS. Or some of the next videos about the routeProvider.