I've seen this basic AngularJS code in a tutorial video which gives the output as expected. But when I try the same code locally it does not work, it shows {{message}} as the output.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope)
{
$scope.message = "First Run...";
}
</script>
</body>
</html>
In the console it shows an error,
Argument 'HelloWorldCtrl' is not a function, got undefined
Error: [ng:areq]
http://errors.angularjs.org/1.3.0-rc.2/ng/areq?p0=HelloWorldCtrl&p1=not%20a%20function%2C%20got%20undefined
Why this same code behaving differently in different environments?
Can someone point out what I'm missing here?
there is something changed in angular1.3.rc2!
http://jsbin.com/sumifozawiji/1/edit
i got same error. 1.2.25 works:
http://jsbin.com/lanavuvaniva/1/edit
Since Angular v1.3.0-beta defining controller constructors in the global scope is no longer supported.
Angular will run, it will bootstrap automatically (because of the ng-app attribute) and expects to find a controller named HelloWorldCtrl (due to the ng-controller="HelloWorldCtrl"). But this controller is defined after Angular, so it is not there at the moment of execution.
The simplest solution is to change the order of the scripts, i.e. put your code before Angular.
Related
<!DOCTYPE html>
<html >
<head>
<title>Angular ToDo</title>
<script src="script/angular.js"></script>
<script src="script/script.js"></script>
</head>
<ng-app>
<body>
{{6+4}}
Is this a valid angular syntax? Can I use ng-app as an element ?
No, you have to place it inside an element.
You can find valid examples here: http://www.w3schools.com/angular/ng_ng-app.asp
No. The documentation specifies ng-app is restricted explicitly to attributes.
<ANY
ng-app="angular.Module"
[ng-strict-di="boolean"]>
...
</ANY>
In Angular's documentation, ANY refers to any element that is either defined in HTML5 or defined by your own element directive.
If you want it in a specific spot, it's been conventional to place it within the container of that portion of your application, whether that's a div or some other element.
I don't think you can do this nor am I sure what you're trying to accomplish. If it is to use more than one Angular module in the same HTML page here is a post that should help.
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
on my html header i have this two lines:
<html>
<head>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
but if i have this two lines at the same time, bootstrap doesn't work. If i comment the line of the angularjs and leave the line for bootstrap alone, bootstrap will process correctly and format the elements on the page.
i have already tried change the order on headers and add diferent links to download the files, but nothing have worked.
Anyone knows a solution for both to work at the same time?
Thanks
You get the followed error in your console:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So just do it as follow, and you get no errors:
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
This must work :)
I know that due to backwards compatibility with IE, Angular allows the use of an xmlns and using ng: instead of ng-, however it doesn't appear to be working with all directives in xhtml
<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org">
<head>
<title>Test</title>
</head>
<body ng:app="MyApp">
<div ng:controller="FooController as foo">
<p>{{foo.text}}</p>
</div>
<script src="angular.min.js" />
<script>
var app = angular.module("MyApp", []);
app.controller("FooController", function () {
this.text = "Hello Angular!";
});
</script>
</body>
</html>
The above will just produce {{foo.text}}, but if I replace ng:app with ng-app (leaving ng:controller the way it is) everything works fine. I really like the consistency of using namespaces, so why doesn't ng:app work?
The ng:app syntax doesn't work due to the following:
The elements contained within the template are always created in the HTML namespace. Whilst this is probably fine for the fast majority of cases if someone ever uses AngularJS with another XML document like SVG this could cause some problems.
References
Directive templates are always created in the HTML namespace
XHTML pages with fail to load in Opera
AngularJS Developer Guide: Internet Explorer Compatibility
Your example works fine. Have a look here: http://plnkr.co/edit/mgUMZe09FSr1aALE6ddd?p=preview
Maybe your angular script is not included properly
<script/> should be <script></script> its not self closing html tag
This is both a question about Angular architecture and how to work with it.
I created a really simple Angular App. It has a main module called App, and App has two dependencies, Dep1, Dep2. Both of the Deps, have a constant called theConst. So when theConst is used in the App, how does Angular decide what to use?
As it stands now, when I test the app, Angular chooses Dep2's value, which is injected second. What if I want to refer to Dep1's value in some places and Dep2's in others?
Code:
<html>
<head>
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="js/Dependency1.js"></script>
<script src="js/Dependency2.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="App">
<div ng-controller="Ctrl">
<h1>{{greet}}</h1>
<h5>{{const}}</h5>
</div>
</body>
</html>
Javascript:
angular.module('Dep1', [])
.constant('theConst', "Number One!");
angular.module('Dep2', [])
.constant('theConst', "Number Two!");
angular.module('App', ['Dep1', 'Dep2'])
.controller('Ctrl', ['$scope', 'theConst', function($scope, theConst){
$scope.greet = "Howdie!";
$scope.const = theConst;
}]);
Angular modules are a strange thing (I don't like them - but that's a personal opinion). They only provide an abstract grouping, no namespacing, no bundling/script loading.
In the end it comes to this: you have to make sure no 2 artifacts have the same name by yourself. There may be plugins for Grunt/Gulp/you build system that help you, but I do not know any.
Angular will choose the last artifact with a given name it encounters. (This can get funny when artifacts are declared in multiple files.)
There is probably a simple answer to my question although any help will be appreciated.
I use ExtJs with my GE plugin. To get the plugin working I need to include the following in my main HTML page.
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDS</title>
<script src="https://www.google.com/jsapi" id="GoogleEarth"></script>
<script src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"> </script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
</head>
<body></body>
</html>
Now when I want to remove the following code and try to run it as javascript alone the page seems to keep on loading.
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
Even if I remove the code and paste it inside it's own .js file the problem persist.
For example use
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
with content like
google.load("earth", "1");
google.load("maps", "2.xx");
It seems to want to stay in the main page with the script tags.
Is there anyway I can get around this problem?
My main reason for asking is I am using a package that overides my main html everytime I save the project.
The package allows me to add scripts via a link as seen above, although it does not make a difference with the outcome.
I get an error saying TypeError: google.earth is undefined
Please advice.
It is probably simply the order of your script elements.
The scripts are executed in the order they are in the document so your error is because something in app.js or Ext.ux.GEarthPanel-1.3.js is referencing google.earth before the file GoogleEarthStartup.js has been executed - hence google.earth is undefined because google.load("earth", "1"); has not yet been called.
Try fix try simply reordering the script elements like so...
<script type="text/javascript" src="//www.google.com/jsapi" id="GoogleEarth"></script>
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
<script type="text/javascript" src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"></script>
<script type="text/javascript" src="app.js"></script>