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 :)
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>
newbie here,
(this is important to me as i often don't have access to the internet.)
i have this strange problem where this code works fine on jsfiddle:
fiddle here ->https://jsfiddle.net/w4g71ea8/2/
but not when i try it on my own computer breaking it into seperate files (in same directory) and view with chrome.
Also I had to set no wrap-in on js fiddle for that to work.
test3.html :
<!doctype html>
<html>
Angular JS Tutorial
<head>
<script src= "file:///home/chronos/user/Downloads/angular/angular.js" > </script>
</head>
<body ng-app="myapp">
<script>
src= "script3.js"
</script>
<div ng-controller="HelloController" >
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
script3.js :
var app = angular.module('myapp', []);
app.controller("HelloController", function($scope) {
$scope.speak = "Joe";
});
I'm not sure where did you copy this html, but it's wrong. Try like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script3.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
And, since you said you're a newbie, it'd be a good habit to start using your code ready for future minifications:
// script3.js
var app = angular.module('myapp', []);
app.controller('HelloController', ['$scope', function($scope) {
$scope.speak = 'Joe';
}]);
On the other hand, I don't agree with some comments above; you don't have to install any webserver or something to see it's working. Just create your html and js files, drop it to the browser. Only thing you need to keep in your mind is file:// usage is not valid here. Either use full url from any CDN, or download the file and enter local path like /js/angular.js. I'm not talking about ng-view and ng-include of course, since they are making AJAX calls, you'll need some sort of webserver. But in this example, you don't need at all.
I'm learning AngularJS and I have a strange problem with it. My code is as follows:
html:
<!doctype html>
<html ng-app="blogApp">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="blogPostsCtrl">
<article ng-repeat="post in posts">
{{post.title}}
</article>
</div>
</body>
</html>
js:
var blogApp = angular.module('blogApp', ['ngSanitize', 'ngRoute']);
blogApp.controller('blogPostsCtrl', function($scope, $http) {
$http.get('//jsonplaceholder.typicode.com/posts').success(function(data) {
$scope.posts = data;
$scope.postsLoaded = 'visible-lg';
});
});
It should be working, as I create a module and then controller for it. But it returns an error: https://goo.gl/UWFMNm. What can I do?
Looks like you didn't install ngRoute. It comes separately in its own file/module.
As the error page says:
Using ngRoute
In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.
ngRoute Documentation - include the file from there for it to work
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 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.