I'm trying clone this example in my source but not working. All external links is added.
My HTML source:
<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
</head>
<body ng-app="myApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/brinley/jSignature/master/libs/jSignature.min.js"></script>
<script src="app.js"></script>
<div id="wrapper">
<div ng-controller="SignatureController">
<div>items length: {{items.length}}</div>
<img ng-src="{{hash}}" alt="signature image" />
<j-signature-directive sig="customSignature" save="testAction" bg-color="#00f" color="#ffcc00"></j-signature-directive>
</div>
<div id="tabs">
<div class="tCont result active" id="result"></div>
<script type="text/javascript">
window.addEventListener('load', function () {
if (typeof (EmbedManager) === undefined) {
EmbedManager.loadResult();
}
}, false);
</script>
</div>
</div>
</body>
</html>
In app.js file is all from javascript from above link.
Be sure to place all your code in JS file inside
$(document).ready( function() { ... });
Related
I have the following angular sample app:
<html ng-app="theapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
</head>
<body>
<div ng-controller="bootstrapper">
<p>This is the bootstrapper</p>
<p><button ng-click="loadtemplate1()">Load Template1</button></p>
<p><button ng-click="testalert()">Test Alert</button></p>
</div>
<script type="text/html" id="template1">
<div ng-controller="template1">
<p>This is template one {{1+5}}</p>
</div>
</script>
<script type="text/javascript">
angular.module('theapp',[])
.controller('bootstrapper',function($scope){
//alert('bootstrapper controller');
$scope.testalert=function(){
alert('call from testalert');
};
$scope.loadtemplate1=function(){
var html=document.getElementById('template1').innerHTML;
document.getElementsByTagName('body')[0].innerHTML=html;
};
})
.controller('template1',function($scope){
alert('template1 controller');
});
</script>
</body>
</html>
All I'm trying to achieve is to dynamically load a controller from some html string which resides in the same page.
However, I need some help, as this current setup doesn't seem to work.
Is there a way i can reset the value of kendo slider once it is changed.
Please see this example code: http://dojo.telerik.com/AKOhe/6
entire code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<input k-ng-model="width" kendo-slider />
</div>
<button k-ng-click="onClick()" />
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
How can i reset value of kendo slider on reset button?
Thanks in advance.
It is not working because you place the button outside of the controller scope, your code already correct. Try it like
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="margin-bottom:20px;">
<input k-ng-model="width" kendo-slider="slider" />
<button ng-click="onClick()"> reset</button>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
i try to deploy my project on my vps.
This is my server.js
var http = require('http');
var fs = require('fs');
var mime = require('mime');
var filename = "./index.html";
http.createServer(function (req, res) {
fs.readFile(filename, function(err, file) {
if (err) {
res.end("errore ci fu");
}
res.writeHeader(200, { "Content-Type": require('mime').lookup(filename) });
res.write(file, 'binary');
res.end();
});
}).listen(5000);
console.log('Server running at http://127.0.0.1:5000/');
and this is my structure:
this is the html file:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS User Registration and Login Example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link href="app-content/app.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error' }" ng-if="flash" ng-bind="flash.message"></div>
<div ng-view></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
AngularJS User Registration and Login Example
</p>
<p>
JasonWatmore.com
</p>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="//code.angularjs.org/1.2.13/angular-cookies.js"></script>
<script src="app.js"></script>
<script src="app-services/authentication.service.js"></script>
<script src="app-services/flash.service.js"></script>
<script src="app-services/user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
<script src="login/login.controller.js"></script>
<script src="register/register.controller.js"></script>
</body>
</html>
When I try tu run application e I on my browser type the right address, the responce is an error because it deasn't download tha angular js and maybe also other dependencies.
this is the result on my browser:
Why it doesn't download the dependencies?????
I ask for your help!!
Thanks
I am new to Angularjs so i made one example to call a controller but i am not able to call controller ...
this is my sample code
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
</head>
<body ng-app="">
<div data-ng-controller="mycontroller">
</div>
<script>
function mycontroller($scope, $http) {
alert("alert");
}
</script>
</body>
try this
<body ng-app="learning">
<div data-ng-controller="mycontroller">
</div>
<script>
angular.module("learning", [])
.controller("mycontroller", function($scope, $http) {
alert("alert");
});
</script>
</body>
You can try this, but I recommend you to read angular tutorials to understand how controllers and binds works.
http://www.w3schools.com/angular/
https://docs.angularjs.org/tutorial
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="mycontroller" ng-init="initMethod()">
<!--<input type="text" ng-model="test"></p>
<div>{{test}}</div>-->
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
alert("alert")
$scope.initMethod = function(){
alert("alert from init");
}
});
</script>
</body>
</html>
I'm trying to make a working example using Firebase to sync data between an Angular app and Polymer on the same file. I'm using the firebase-element from Polymer
Is it possible? I've have both apps in their own sections so Angular doesn't try to hijack Polymer's binding but I'm not getting data on the Polymer side or throwing any useful errors.
Appreciate any attention. Thank you. Here's the Plnkr.
<!DOCTYPE html>
<html>
<head>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="firebase#1.0.x" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase-debug.js"></script>
<script data-require="angularfire#0.8.x" data-semver="0.8.0" src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<script data-require="firebase-simple-login#1.6.x" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="import" href="firebase-element.html" />
</head>
<body>
<section ng-app="component-angular">
<div ng-controller="MainCtrl">
<h2>Data in Angular</h2>
{{data}}
<h3>
<input ng-model="new.data" placeholder="" />
<button ng-click="addData(new.data)">Add New Data</button>
</h3>
</div>
</section>
<section>
<div>
<firebase-element id="base" location="https://tezt.firebaseio.com/web-components" data="{{data}}" keys="{{keys}}"></firebase-element>
<h3>My Firebase Data</h3>
<template repeat="{{key in keys}}">
<p>{{key}}: {{data[key]}}</p>
</template>
</div>
</section>
<script>
var app = angular.module('component-angular', ['firebase'])
.controller('MainCtrl', function($scope, $firebase, Firebase){
var fb = new Firebase("https://tezt.firebaseio.com/web-components");
var fbSync = $firebase(fb);
$scope.data = fbSync.$asObject();
$scope.addData = function(newData){
fbSync.$push(newData);
}
});
</script>
</body>
</html>