I'm trying to run a simple hello world example and can't get it to work. What am I doing wrong here? I keep getting 'Uncaught Error: No module: myapp' error in the chrome console.
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<title>Angular App</title>
</head>
<body>
<div ng-controller="TextController">
<h1>Angular App says {{greeting.message}}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
<script type="text/javascript">
var myModule = angular.module('myapp',[]);
myModule.controller("TextController", function($scope){
$scope.greeting.message = "hello world!";
});
</script>
</body>
</html>
Here's the JSFiddle link: http://jsfiddle.net/HdR2c/1/
You can't self close script tags first of all so you need to change your angular include to be the following:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
Then change your $scope.greeting.message var to something like $scope.greetingMessage. The way you are currently doing it you are looking for an attribute called "message" in a greeting object.
You can't self-close script tag. This is wrong:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"/>
You should close it this way:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
Make sure your module definition have the argument [] blocks in it, even though they are empty.
angular.module('module_name',[]);
Related
I'm beginning to work with AngularJS and am having trouble working with a local copy of the angular.js file. Below is the sample I am trying to get to work. When I reference the CDN script, the page correctly displays 'Hello, World'. When I reference the local script, the binding does not occur. The browser is able to locate the local angular.js file, it just doesn't seem to perform the binding.
<html ng-app>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<!--<script src="Scripts/angular.js"></script>-->
<script>
function HelloController($scope) {
$scope.greeting = { text: "Hello" };
}
</script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
If I was starting out with 1.3.15 would do something like this:
<html ng-app="main.app">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
angular.module('main.app', [])
.controller('HelloController', function () {
var self = this;
this.greeting = { text: "Hello" };
})
</script>
</head>
<body ng-controller="HelloController as HelloCtrl">
<p>{{HelloCtrl.greeting.text}}, World</p>
</body>
</html>
This follows the latest styles of angular coding
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 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 have a problem with boostrapping an angularjs app - with initialization code in the controller. The simplified test-case is like this (index.js):
var myApp = angular.module( 'myApp', []);
myApp.controller( 'myAppController', [ '$scope', function($scope) {
console.log('never shown');
$scope.test = 'constructor called';
// removed more init code
}]);
$(document).ready(function(){
angular.bootstrap( document, ['myApp']);
console.log('Finished boostrapping.');
});
The HTML file for this test-case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TeST</title>
</head>
<body>
{{test}}
<script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
The result is that console output only says "Finished bootstrapping" - and the controller function is never invoked. .. This baffles me a little, but this is my first angular 1.2 app. I get the same result If I put ng-app="myApp" in the tag and let angular bootstrap the app automatically. ...
you never set ng-controller anywhere in your markup.
also, you should either put your script tags in the head, or after </body>.
edit: when using bootstrap this way, the placement of the <script> tags goes matter.
The first parameter to the angular.bootstrap method is an element. Currently you are passing in document, which is not an element.
Try
angular.bootstrap(document.documentElement, ['myApp']);
or
angular.bootstrap(document.body, ['myApp']);
EDIT: i arranged the files so the JS file is the last one.. but its still not working
The result when I open this up in firefox is simply {{message}}
I've named the files: html.html and js.js
HTML file
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>
Javascript file
var app = angular.module('app', []);
abc.controller('abc', function($scope){
$scope.message = 'booya';
});
Your controller should be defined as:
app.controller('abc', function($scope){
$scope.message = 'booya';
});
You have mentioned abc.controller. It seems where the issue is
You need to load js.js after angularjs, which means that your should look like:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
<script src="js.js", type='text/javascript'></script>
You dont have a body or a ngController. And you should change the order of your js files, as follows:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>