Sorry for the silly question, does everyone know how to start using AngularUI? I've downloaded it from Github and read the instruction in README but still don't understand what I have to do.
Steps to integrate:
Include jQuery and jQuery-ui (best served from a CDN)
Include angular (it is the best to include if from a CDN)
Include angular-ui JS / CSS (currently only hosted in the GitHub repository in the build folder)
Include any jQuery plugins for the directives you are planning to use
Declare dependencies on the angular-ui modules (ui.directives or ui.filters depending on what you are planning to use).
Most of the outlined steps are just about including JS/CSS dependencies. The only "tricky" part is to declare dependencies on a ui.* module, you can do it like this:
var myApp = angular.module('myApp',['ui.directives']);
Once all the dependencies are included and a module configured you are ready to go. For example, using the ui-date directive is as simple as (notice the ui-date):
<input name="dateField" ng-model="date" ui-date>
Here is the complete jsFiddle showing how to use the ui-date directive: http://jsfiddle.net/r7UJ2/11/
You might also want to have a look at the sources of the http://angular-ui.github.com/ where there are live examples off all the directives.
As of 3rd of May 2013, here are the steps:
include
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
register ui
angular.module('myFancyApp', ['ui.bootstrap']);
make sure myFancyApp is the same as in your <html ng-app="myFancyApp">
Let the magic commence.
I think what is missing is plugins - you've got to add the jquery plugin scripts and css for some angular-ui directives to work. For example the codemirror directive needs:
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />
It's a surprise to me that angular-ui.github.com doesn't mention needing to include plugins.
Hi I wrote an article specifically on how to do this for for PHP syntax highlighting. The article is here: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/
The core of things is getting the configuration right:
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true
}
});
function codeCtrl($scope) {
$scope.code = '<?php echo "Hello World"; ?>';
}
For something like the following HTML snippet:
<div ng-app="myApp">
<div ng-controller="codeCtrl">
<textarea ui-codemirror ng-model="code"></textarea>
</div>
</div>
You can see the whole jsfiddle of the set up here: http://jsfiddle.net/jrobertfox/RHLfG/2/
pkozlowski.opensource is right, there are a lot more files that you need to include than it seems from the AngularUI documentation (if you can call it documentation...)
The instructions are in the readme.md file at their official github repository
Angular UI
Alternatively, the way you can find out how to integrate is to open the angular-ui js file (example: ui-bootstrap-tpls-0.6.0.js) and in the first line, you will notice the following statement
angular.module("ui.bootstrap", [...deps...])
Based on the above code, you need to inject 'ui.bootstrap' into your module.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);
Related
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
Whatever i do ng-click of AngularJS in paper-button within polymer-element it doesn't work, is there any file to import? please tell me step by step what should i do.
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-button/paper-button.html"/>
<link rel="import" href="../components/core-signals/core-signals.html">
<polymer-element name="my-statut-footer_OnEdit">
<template>
<div class="tag-container">
<paper-button class="shadow" ng-click='annulerClick()'>Annuler</paper-button>
<paper-button class="colored shadow" ng-click='publierClick()'>Publier</paper-button>
</div>
</template>
<script>
Polymer('my-statut-footer_OnEdit',{
});
</script>
</polymer-element>
The best solution that I've found is to use polymer's on-click event, then inside the method select the angularjs controller by his id
<paper-button on-click='publierClick()'>Publier</paper-button>
Polymer('my-statut-footer_OnEdit',{
publierClick: function(e, detail, sender) {
var scope = angular.element(document.getElementById(('controllerID')))
.scope();
scope.$apply(function () {
scope.publier();
});
}
});
Polymer and Angular are not compatible with each other.
Polymer makes extensive use of the brand new Web Components standards which Angular know literally nothing about so when Angular's Compiler comes across a Custom Element it tries to use it as a Angular Directive which it is actually not so it throws lot of errors.
Here are a few Solution:
Use ng-polymer-elements which helps Polymer elements be compatible with Angular.
Wait for Polymer 0.8 and hope it goes along with Angular.
While you are here please make sure to view some answers for the Following question this might help you understand some technical differences between polymer and angular:
What is the difference between Polymer elements and AngularJS directives?
For now there is no efficient way to achieve it. I used Iframe to make it working. Hope will find better solution, but for now angular can't work efficient with shadow html generated by polymer.
I am new to caman js. I want to edit image residing at my local machine using caman js. I searched for it but could not find appropriate code. I also went through tutorial of caman js.
link: http://camanjs.com/guides/
Can anyone please help me?
Thank you.
The link you provided gives the information you are looking for. If I understand your question correctly, these are the basic steps you need to take.
Make sure the Camanjs plugin is included in your project.
Have an img or canvas element on your working DOM
After the DOM is ready Initialize Camanjs by passing to it either a selector or DOM element. Here is the relevant code to the link you provided:
Caman("#image-id", function () {
// Setup whatever options or image processing you want here
// Make sure to render after
this.brightness(5).render();
});
Your question asks about a file on your local machine. From my understanding, your image has to be present in the DOM to work on it with Camanjs. Therefore, your image should be located somewhere your html/javascript can find. (i.e. 'img/myLocalPicture.jpg' relative to your .html file)
For me, looking at the source code of Camanjs was very helpful as well as looking at the API docs: http://camanjs.com/api/
If you want a more specific answer please rephrase your question to be more specific.
You can load a file using the HTML5 File API.
If you are using JQuery, the following will allow you to browse for a local file, and then apply an effect to it. (You don't need jquery, this is just a feature of HTML5)
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/caman.full.min.js"></script>
</head>
<body>
<img id="myimage" alt="Image go here" />
<form>
<input type="file" id="fileinput" />
</form>
</body>
<script>
$("#fileinput").change(function(evt) {
var image = evt.target.files[0];
$("#myimage").attr("src", URL.createObjectURL(image));
processImage();
});
function processImage() {
Caman("#myimage", function() {
// Perform your effects here
});
}
</script>
</html>
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 have included these in my index.html because bower is including them:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
Why is the ui-bootstrap.js not included? Because the bower.json from bootstrap and its main property has set "ui-bootstrap-tpls.js" but what about the ui-bootstrap.js?
Even when I include the file outside of the bower:js tags the popover from the datepicker is not visible and I get NO errors in my google chrome.
But when I click on the datepicker button no popover...
UPDATE
Now that I corrected my angularjs modules, now I use just this: 'ui.bootstrap.datepicker'
I get now these errors in google chrome:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/datepicker/datepicker.html
Error: [$compile:tpload] Failed to load template: template/datepicker/datepicker.html
When I look at the source ui-bootstrap-tpls.js file:
.directive( 'datepicker', function () {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/datepicker/datepicker.html',
scope: {
datepickerMode: '=?',
dateDisabled: '&'
},
Where are these above path template... ? I have them not here. I just installed the angular-bootstrap bower package. Should there not all be included?
UPDATE2
I get these angularjs error now:
See the parent is null and therefore the parent.InsertBefore can not work and throws the exception...
Official Doc
ui-bootstrap-tpls.js library contains the directives and the directive templates.
ui-bootstrap.js is just the directives and you are expected to supply the directive templates.
Most folks use the predefined directive templates (ui-bootstrap-tpls.js). You do not want to include both and that may be why the popover/datepicker is not working. You would essentially have 2 directives working to show/hide the popover/datepicker. Also, do not load the bootstrap.js library as that will cause the same problems.
UPDATE:
In regards to the template not found error, the datepicker directive is looking for the template 'template/datepicker/datepicker.html' in the $templatecache. The ui-bootstrap-tpls.js injects the templates into the template cache at the very end of the js file.
In the ui-bootstrap-tpls.js file you should see several $templatecache.put lines with 'template/datepicker/datepicker.html' being one of them.
Just in case someone else is having the same issue: I was having problems with the datepicker, and the issue was that I was loading the templates before the base JS:
From:
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
To:
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
I just ran into this issue also, the answers above helped me a lot!
In my instance I was using a yo-angular build, and installed ui-bootsrap with bower. The problem was multiple references to ui-bootrap and bootstrap conflicting with the tpls.js verison
Here is my solution:
Simply put within my index.html
Remove
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
Add
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Problem:
This questions comes up as a Google result for
Error: [$compile:tpload] Failed to load template: templates/datetimepicker.html
This may not be a direct answer to your specific problem, but I wanted to leave a note for future users encountering similar problems.
The directive daleotts/angular-bootstrap-datetimepicker introduces a breaking change in v1.0.0:
must include datetimepicker.template.js in the page to load the
template.
(b520f515)
Solution:
Users of angular-bootstrap-datetimepicker can either roll back to a previous version (such as v0.40), or choose to include templates file that was previously included in the base .js file:
// Previously this was the needed file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
// Users who wish to use the default datetimepicker templates must now also include this file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>