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
Related
In firefox, the localized html pages have to use xhtml, because localized variables are brought in as:
&blah.sub.name;
But an issue is, with frameworks like angular, we need to set attributes that don't have a value. Such as ngCsp:
https://docs.angularjs.org/api/ng/directive/ngCsp
<!doctype html>
<html ng-app ng-csp>
...
...
</html>
However xhtml doesn't agree with this and it throws errors. During runtime we can set these attributes with no value no problem, with javascript. However is there a way to do this not on runtime?
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.)
I am trying to include one html file (with JSS and CSS code embedded in HTML) into other html file using following code.
File a.html
<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function(){
$("#includedContent").load("mychart2.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
File mycharts2.html
http://www.megafileupload.com/en/file/585768/mychart2-html.html
After using developer tool, i found following error:
ReferenceError: Highcharts is not defined
jquery-1.9.1.js line 603 > eval:4
and there is no output. How can i fix this issue?
After downloading your html file and taking a look at the code. I believe your issue is the following line:
var chart = new Highcharts.Chart({
According to this highcharts demo I found on jsfiddle. You have the initialization of highcharts incorrect. The code should look like this:
$('#chart116319a1dae9').highcharts({data:...,otherStuff:...});
I highly recommend taking a look at the HighCharts site and taking a look at their Demos
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.