I know that AngularJS is framework for HTML.
XUL(XML user interface language) and HTML have the same underlying processing (can use JavaScript and CSS)
Can AngularJS can intergrate with XUL?
Since XUL is XML, the AngularJS syntax needs to be the XML compliant version:
add id="ng-app" to the root element in conjunction with ng-app attribute
<!doctype html>
<html xmlns:ng="urn:ng" id="ng-app" ng:app="optionalModuleName">
<div my-directive="exp"></div>
...
</html>
Use custom element tags such as <ng:view>
To make CSS selectors work with custom elements, the custom element name must be pre-created with document.createElement('my-tag') regardless of XML namespace.
<html xmlns:ng="urn:ng">
<!-- Needed for ng namespace -->
<head>
<!--[if lte IE 8]>
<script>
// needed to make ng-include parse properly
document.createElement('ng-include');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<style>
ng\:view {
display: block;
border: 1px solid red;
}
ng\:include {
display: block;
border: 1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng:include></ng:include>
...
</body>
</html>
the compiler now transparently supports several directive syntaxes. For example while before there was just one way to use ng:include directive: . The new compiler treats all of the following as equivalent:
<ng:include src="someSrc"></ng:include> <!-- XHTML element-->
<div ng:include src="someSrc"></div><!-- XHTML attribute-->
<div ng:include="someSrc"></div><!-- XHTML attribute shorthand -->
<div data-ng-include src="someSrc"></div><!-- data attribute-->
<div data-ng-include="someSrc"></div><!-- data attribute shorthand-->
<ng-include src="someSrc"></ng-include> <!-- Expando Element -->
<div ng-include src="someSrc"></div><!-- Expando Attribute-->
<div ng-include="someSrc"></div><!-- Expando attribute shorthand-->
<x-ng-include src="someSrc"></x-ng-include> <!-- Mozilla X-Tag -->
<div class="ng-include: someSrc"></div><!-- Class property-->
This will give template creators great flexibility to consider the tradeoffs between html code validity and code conciseness and pick the syntax that works the best for them.
References:
How does AngularJS get away with using custom HTML5 element tags and attributes?
Custom XUL Elements with XBL
Make New Tags and Widgets with XBL
AngularJS Guide: IE Compatibility
Behavior Attachment
AngularJS Documentation for Compile: restrict
XML Namespaces don't need URIs
RFC 2141: URN Syntax
urn:schemas-microsoft-com:office:office Namespace
Related
I am new to Angular JS, I got stuck up with this code, While I am reading the tutorials, I got stuck up with this code on Angular JS. Please help me on that.
More particularly how 'AfterClicked' is working in controlling the visibility of the DIV elements.
HTML Code:
<!DOCTYPE html>
<html ng-app="myModel">
<head>
<title>Begin with Angular</title>
<meta charset="utf-8" />
<!-- Adding the Bootstrap style sheet-->
<link href="Styles/bootstrap.min.css" rel="stylesheet" />
<!-- Adding the Angular File-->
<script src="Scripts/angular.js"></script>
<script src="Scripts/MainM.js"></script>
</head>
<body>
<div ng-controller="myController as control">
<div ng-hide="AfterClicked">
{{control.title}}
click To Edit
</div>
<div ng-show="AfterClicked">
<input ng-model="control.title">
Done Editing??
</div>
</div>
</body>
</html>
JS Code:
/// <reference path="angular.js" />
var myApp = angular.module("myModel", [])
.controller("myController", function () {
this.title = "Welcome to Angular",
this.AfterClick=0
});
It's working fine, The thing that i got stuck up is "AfterClicked", How it's working in ng-show, ng-hide and ng-click in anchor tags.
Please help me on that..!!
Updated answer:
When you don't define an object in AngularJS controller code but use it in the template, Angular creates that object and it's assigned empty string value. So, in this case, even though you did not assign any value to AfterClicked in JS code, it was created by Angular and set to ``. This evaluates to false and the div is hidden.
You can check the value in this fiddle: http://jsfiddle.net/5DMjt/12053/
Firstly, couple of mistakes in the code.
1.There is a typo with AfterClicked in JS code.
2.Since you are using the myController as control syntax, ng-click on the anchor tag should use control.AfterClicked and not AfterClicked.
Now in JS code, AfterClicked is being set to 0, which evaluates to false in JS.
In the ng-hide="AfterClicked" code, AfterClicked evaluates to false and hence angular hides the div.
In the anchor tag code ng-click="AfterClicked=!AfterClicked",means that on click of anchor tag, the expression "AfterClicked=!AfterClicked" is evaluated ,which negates AfterClicked.
I want to learn AngularJS to use in JSF pages. This is purely learning purpose.
I tried simply add AngularJS code inside the jsf. But seems it doesn't identify the AngularJS code. it simply out put the same My first expression: {{ 5 + 5 }} in the browser.
my jsf page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="hi" >
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Can anyone help me how to get the output of the AngularJS expression within the jsf page? or show me some direction
UPDATE
My Actual intention is to get some json from Managebean or from another jsf page and populate here. but for that as testing I tried to create a dummy json structure. but still jsf doesn't identify AngularJS component. It's simply print
My first expression: {{ 5 + 5 }}
Browser console prints MyFirstAng.xhtml:24 Uncaught TypeError: app.conntroller is not a function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myAPP" ng-controller="customerctrl">
<p>My first expression: {{ 5 + 5 }}</p>
<!-- <ul>
<li ng-repeat="x in myData">
{{x.Name + ', ' + x.Age}}
</li>
</ul>
-->
</div>
</body>
<SCRIPT type="text/javascript">
var app = angular.module('myAPP',[]);
app.conntroller('customerctrl', function($scope){
// $scope.myData=[{Name:'jani',Age:'32'}];
});
</SCRIPT>
</html>
Ok, I found the issue. It was a typo in the app.controller. I had type additional "n". it worked. Thanks for all so far guiding me to spot the issue. I thought I am missing to include some AngularJS library or something.
In order for angular to initialize ng-app="hi" there needs to exist a module with that name. Otherwise you should be seeing an exception thrown in browser dev tools console. Please note console errors when developing javascript apps
Either include a module with that name or remove the name from the attribute and just use ng-app
Either paste this
var app = angular.module('hi',[]);
in your script or make the ng-app="" ... Your choice.
If you specify anything in the ng-app then you have to make a module as given above by me. Otherwise just dont specify anything in the ng-app i.e. ng-app="".
At a later stage when you want to make a controller then you can make a module.. For now its best left empty.
I have been learning angularjs for 2 days and I can't have it working when dealing with ng-controller / ng-repeat
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Angular test </title>
</head>
<body ng-app>
Angular test
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
function menuCtrl($scope) {
$scope.menus = [
{title:"wiki",img:"../images/profil.png"},
{title:"list",img:"../images/profil.png"},
{title:"find",img:"../images/profil.png"},
{title:"exp",img:"../images/profil.png"},
{title:"stat",img:"../images/profil.png"},
{title:"param",img:"../images/profil.png"}
];
}
</script>
<div ng-controller="menuCtrl">
<div ng-repeat="menu in menus">
<img src={{menu.img}}>
<h3>{{menu.title}}</h3>
</div>
</div>
</body>
This way of coding is not supported by angular 1.4.7 however it is supported by angular <1.3.0.
I recommend you to follow this style of coding https://docs.angularjs.org/api/ng/directive/ngController
ngApp: ng-app description
<body ng-app>
Or
<html ng-app>
Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags.
This automatically bootstraps your angular application and then all is good to go. But I like to bootstrap it manually on DOM ready event.
It's upto you. If you are building a sample app and trying to learn then ng-app is fine for you, but in case of large application you should need to make Modules.
I am trying to use AngularStrap TypeAhead. The feature seems to work, but only after I click around a bunch (or so it appears). I just have stubbed data now so I know it can't be time from pulling data from API, etc. If I put the data in a dropdown it is available immediately (only like 5 items right now). I am not sure if it is taking a while for the directive to be enabled or what. Really good chance it is user error, just not sure what to look for. I am not seeing anything in the chrome debugger.
html code snippet:
<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" ng-model="vm.selectedPart" ng-options="p.partNumber for p in vm.parts" placeholder="Enter Part" bs-typeahead>
</div>
</form>
Vendor Scripts
<!-- Vendor Scripts -->
<script src="scripts/jquery-2.1.3.js"></script>
<script src="scripts/angular.js"></script>
<script src="Scripts/angular-strap.min.js"></script>
<script src="Scripts/angular-strap.tpl.min.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/toastr.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="scripts/spin.js"></script>
<script src="Scripts/smart-table.min.js"></script>
I had the same issue (or very similar) where the dropdown would only appear if I followed these steps...
Type the first few characters of a valid item in the list
Click out of the input box so that it loses focus
Click back into the input box so that it gains focus again
The workaround suggested by metronomx in typeahead not displaying sometimes 2.2.1 #1588 resolved the issue for me...
Add following css rule: input + .typeahead.ng-hide { display: block
!important; visibility: hidden !important; overflow: hidden; }
Also: You'll want to use bs-options instead of ng-options if you are using ng-strap 2.2.1 and Angular 1.3.15, as alluded to in Angular-strap v2.2.1 not compatible with angular v1.3.15
I am new to ServiceStack and Angular. Apologies if this is verbose.
with reference to Html5 pushstate Urls on ServiceStack
I would like to be able to have my api service served up from the root. ie http://mydomain.com/
If a user browses the route, I would like to serve up a default html page that bootstraps my angular app.
In the the app itself if angular calls mydomain.com/customer/{id} json should be served but if this is browsed directly it should serve the default html page and keep the url but the route in the service method does not need to be called. as this will be resolved by angular which will call the customer service itself for a json result.
There are probably a few different ways to make this work, as long as you don't need to support html5mode urls. I have hope that I'll be able to leverage this code to eventually support html5mode, but at the moment, I've resigned myself to hash based URLs.
Given urls like: http://example.com/ or http://example.com/#/customer/{id}, here's how to bootstap an angularjs single page app on a self-hosted servicestack project from the root of the domain.
To enable the markdown razor engine, add this to your AppHost config (not absolutely necessary, but my preference over the default razor engine):
Plugins.Add(new RazorFormat());
Place a file, default.md, in the root of your project, and ensure it's properties are "content/copy when newer". Put whatever content you want in there. The important thing is to assign the template file. (If you're using the default razor engine, an equivalent default.cshtml file should also work, but I've never tried it. ) The template file is what will bootstrap your angularjs app. This is what I have in my default.md:
#template "Views\Shared\_Layout.shtml"
# This file only exists in order to trigger the load of the template file,
# which bootstraps the angular.js app
# The content of this file is not rendered by the template.
My _Layout.shtml file looks like this (omitting irrelevant details). Note ng-app in the html tag, and the ng-view div in the body. Also note that I don't include <!--#Body--> in the file. I'm not using server side templates for this project.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Content/css/app-specific.css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar goes here -->
<div class="container">
<header id="header">
<!-- Header goes here -->
</header>
<div ng-view></div>
<hr>
<footer id="footer">
<!-- Footer goes here -->
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="/Scripts/app-specific/app.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-services.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-controllers.js?3ba152" type="text/javascript"></script>
</body>
</html>