<!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/
Related
trying to create this file that changes an object's attributes (size, color, fade out, and reset) with the click of buttons. Not working right now and trying to figure out what I'm missing .... Any thoughts?
changing a box size
The first thing I notice is the duplication of attribute in your <script> tag and actual javascript in between the <script> and </script>. That's poor coding.
If you need code referenced in the file named 'javascript.js', then it needs to be it's own <script> declaration in HTML:
<script type="text/javascript" src="javascript.js"></script>
and THAT'S IT. THEN follow with any code you want on the page with a new <script> declaration block.
IF you're trying to make the jQuery library available, that can be accomplished with this: (put it in the <head></head> section of your html code.)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
jQuery is very particular about the selectors you feed it:
1) no prefix symbol means an html tag: $("table") means match any <table> in the HTML
2) a dot prefix symbol means match a class: $(".button1") WILL FIND the elements that you actually have in your code. They are not being found because you didn't prefix with a dot in your selector.
3) a hashtag/pound-sign/number-sign means match an ID: $("#box") will find that box at the beginning of your code.
<script type="text/javascript">
$(function(){
$(".button1").click(function(){
$("#box").css({'height':400,'width':400});
});
$(".button2").click(function(){
$("#box").css('background-color','blue');
});
$(".button3").click(function() {
$("#box").fadeOut();
});
$(".button4").click(function() {
$("#box").show().css({'height':150, 'width':150, 'background-color':'orange'});
});
});
</script>
here's a link to a FUNCTIONING codepen showing that what you're trying to do is possible.
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
I'm trying to get started with AngularJS using coffeescript and coffeekup.
AngularJS is capable of auto-bootstrapping itself when it detects the ng-app attribute on any HTML element. According to the docs, it should be placed on the <html> or <body> element. However, it will try to load any attribute value, if given, as the application root module.
When placed on the <html> element for example, the HTML should be
<html ng-app>
This output does not seem to be achievable using coffeekup. I tried the following things:
html 'ng-app': '' #prints <html></html>
html '': 'ng-app' #prints <html ="ng-app"></html>
html 'ng-app': ' ' #prints <html ng-app=" "></html> (still not what is wanted)
To clarify: What I do not want is the following:
html 'ng-app': 'ng-app' #prints <html ng-app="ng-app"></html>
since this causes AngularJS to look for a non-existent root module called ng-app.
Currently, I'm defining an empty root module as a workaround, but I still don't think that this is something coffeekup is not capable of.
I have a folder with several HTML files. Each of the HTML file uses AngularJS and contain the same declaration like below;
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="vendor/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="vendor/underscore-min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
I think this is bad practice as it violates the DRY (don't repeat yourself) principle. I tried to avoid repeating the above declaration by putting them into a html partial called header.html and put this following line <div ng-include src="'partials/header.html'"></div> into every HTML file in the folder.
However, it did not work and the HTML page did not render the AngularJS scope correctly. Is there something wrong with my approach or are there better ways to go about doing this?
AngularJS embrace the Single Page Application concept.
Technically this means you have only 1 HTML file (lets call it index.html) which contain the <head> and <body> tags.
This means that you can put all your included script files once in this index.html file.
By using the ng-route or ui-router modules, you can contain other partial HTML files that will "use" the same script files.
ng-include is an AngularJS defined directive. AngularJS needs to be loaded for it to be parsed correctly.
However, here you have included angular.min.js as part of the header.html partial. When the browser encounters the ng-include, it has no idea what it means, and simply ignores it. So none of the scripts and styles are loaded.
At a minimum, you need to have angular.min.js loaded in the main file. Everything else can then be inside the partial.
<script src="lib/angular/angular.min.js"></script>
...
<div ng-include src="'partials/header.html'"></div>
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.