AngularJS File placing - javascript

Do I need to place the files in a local-server or any server to get the results?
index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta char-set = "UTF-8">
<title>AngularJS | Passing Data between Different Scopes</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src = "controller.js"></script>
</head>
<body ng-app = "mainApp">
<div ng-controller = "app">
<li ng-repeat = "i in myRange">
{{i}} <br/>
</li>
</div>
</body>
</html>
controller.js:
var app = angular.module('mainApp', []);
app.controller('app', function($scope) {
var range = 10;
var myRange = [];
for (i = 0; i<range; i++)
{
myRange.push(i);
}
$scope.myRange = myRange;
});
When i'm running using localhost it gets the result i wanted. But when I run it without using any server or local-server it shows only the html page, not returning data from controller.js file. As i know this must work without using of any local-server. what's the wrong here?
Edit:
When i run the html file without using local-server the output is as follows.

As #csharpfolk suggested, the problem is with loading angular.js library use 'https://' instead of '//'. If you use '//' browser will try to load using 'file://' protocol.

Related

Using javascript on wordpress site to add/modify a link

I currently have an html page where I use javascript to add a link to a different port on the same host, as in the code below.
If I'm on a machine with address 192.168.1.10:8090 the link provided is 192.168.1.10:5000
I'm trying to the same function to a wordpress site, but can't work out how to add javascript and add a link to the page (or reference an existing link).
I've not used wordpress before, so grateful for any help with this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
</head>
<body>
<div id="ext_link" style="text-align:center">
<script>
window.onload = function(){
var x = location.hostname;
var init = "http://";
var link_stem = x.concat(':5000');
var link_address = init.concat(link_stem);
console.log(link_address);
var a = document.createElement('a');
var linkText = document.createTextNode("Link to Port 5000");
a.appendChild(linkText);
a.title = "LinkToPort5000";
a.href = link_address;
document.getElementById("ext_link").appendChild(a);
};
</script>
</div>
</body>
</html>

How to convert string into angular binding?

I have a string like var message = "you are moving to {{output.number}}";
I want this to be put to div element. i tried using $("#message").html(message);
but it just printed the whole string for me. I want to have the output.number print the value it had. Is it possible to achieve what i want?
I am using angular.js 1.5.
Use $interpolate service like:
var message = $interpolate("you are moving to {{number}}")(output)
// or
var message = $interpolate("you are moving to {{output.number}}")($scope)
I hope you are looking for something like this. You can do it by using the scope variable inside the controller.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.bootcss.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" ng-model="output.number" />
<button ng-click="AppendItem()">Append</button>
<div id="message"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.output = {};
$scope.AppendItem = function () {
var string = "Your Number is " + $scope.output.number;
$("#message").html(string);
}
});
</script>
</body>
</html>
You are almost there just try :
$scope.output.number = '123';
var message = "you are moving to" + output.number;
$("#message").html(message);
Don't put variable inside "" quotes.
When we are going to append a string variable to another string variable then we need to use append operator ie., "+". Here is an example.
var output.number = 10;
var message = "you are moving to " + output.number;
$("#message").html(message);
You can do like this using $compile:
$compile(angular.element(document.querySelectorAll('#message')[0]).html("you are moving to {{output.number}}"))($scope);
Add $compile as dependency in your controller.
All the best.
You can try this:
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-controller="appCtrl">
<p id="message"></p>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"> </script>
</body>
JS:
Should not write DOM Manipulation code inside controller, but can get the idea how to do it.
var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $interpolate){
var msg = "you are moving to {{number}}";
$scope.number = 10;
$('#message').html($interpolate(msg)($scope));
});

Calling .jSignature() on div doesn't update the div

I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.

Use Coldfusion query resultset in AngularJS

I'm trying to use AngularJS in my cfm files to display data from cfquery resultset.
I used below code in my cfm file.I'm not able to see any output.
P.S. I'm really new to AngularJS. So if anyone can please help me out here it would be great.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html ng-app="Demo">
<head>
<link rel="stylesheet" href="/Applications/_Common/style.css" type="text/css">
</head>
<body>
<cfsetting enablecfoutputonly="Yes">
<CF_GetProjectData project_number=349246 query_name="GetProject">
<div ng-controller="DemoController">
<div ng-repeat="number in project">
{{number.project_number}} - {{number.project_name}}
</div>
<!-- <input name="imprint" type="text" size="10" ng-model="first">
<p>{{first}}</p> -->
</div>
<cfoutput>
<script language="JavaScript" src="/CFIDE/scripts/wddx.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script language="text/javascript">
var theProjectArray; < cfwddx action = "CFML2JS"
input = "#GetProject#"
toplevelvariable = "theProjectArray" >
</script>
<script>
var Demo = angular.module("Demo", []);
Demo.controller("DemoController", function($scope) {
$scope.project = theProjectArray;
alert(theProjectArray);
});
</script>
</cfoutput>
<cfsetting enablecfoutputonly="No">
</body>
</html>
I am not sure about Angular.js but based on the code you have posted, it seems, you need to wrap ng-controller div in cfoutput. This is because you have set enablecfoutputonly="Yes". So only the content inside cfoutput will be rendered.
I'm a CF developer that's currently learning Angular as well. First of all Angular is a MVC framework and will work for you best of you follow the rules of Separation of Concern (SoC). I know unless you are using Object Relational Mapping (ORM) in CF this is counter intuitive but it will save you so much hassle and trouble shooting later.
For your problem right now though i would
combine both script blocks.
your variable theProjectArray is defined with var so it's not
global. Are you sure it's making it into your controller?
the line toplevelvariable = "theProjectArray" > ... is the greater
than sign a type-o?
After you've done those i would console.log(theProjectArray); right after it's defined. Then console.log(theProjectArray); again in your controller to ensure it's getting passed in properly.
Just for your reference here is a very basic example of a controller and a factory in angular calling a CFC. Since i've been doing things this way the only time i use ColdFusion is to retrieve data and model it. It's simplified my code and logic quite a bit and has allowed me to do a lot more now that i'm not leaning on ColdFusion.
var myapp = angular.module("test.myapp", [])
myapp.controller("MyController", function($scope, getevent) {
$scope.myData = {};
$scope.myData.doUpdate = function(item, event) {
getevent.GetProgram(item).success(function(data, status, headers, config) {
console.log(data.DATA);
$scope.test = data.DATA;
$scope.test.DATE = new Date(data.DATA.DATESTART);
});
getevent.GetProgram(item).error(function(data, status, headers, config) {
console.log("FAILED: "+item);
alert("AJAX failed!");
});
}
});
myapp.factory('getevent', function($http){
return {
GetProgram: function(item) {
var programInfo = '/foundation/cfc/calendar.cfc?method=getevent&eventid='+item;
return $http.get(programInfo);
}
};
});

angularjs cookies with latest versions 1.4.1

Hello i want to store one sample cookie in my browser and read it.this not working for me
this is sample html code :
<!DOCTYPE html>
<html ng-app="KendoDemos">
<head>
<script src="/home/user/Desktop/kendo/angular.min.js"></script>
<script src="/home/user/Desktop/kendo/angular-cookies.min.js"></script>
<script src="/home/user/Desktop/kendo/app.js"></script>
</head>
<!-- Body tag augmented with ngController directive -->
<body ng-controller="MyCtrl">
<h1>Hello</h1>
</body>
</html>
and this my app.js file :
var app = angular.module("KendoDemos", ["ngCookies"]);
app.controller("MyCtrl",['$scope','$cookies','$cookieStore',MyCtrl]);
function MyCtrl($scope,$cookies,$cookieStore){
var favoriteCookie = $cookies.get('myFavorite');
// Setting a cookie
$cookies.put('myFavorite', 'oatmeal');
console.log(favoriteCookie);
}
Please help me.
I think you don't have a problem is really logical that your cookie myFavorite isn't set before putting it so you have to switch the instruction of setting and getting.
var app = angular.module("KendoDemos", ["ngCookies"]);
app.controller("MyCtrl",['$scope','$cookies','$cookieStore',MyCtrl]);
function MyCtrl($scope,$cookies,$cookieStore){
// Setting a cookie
$cookies.put('myFavorite', 'oatmeal');
var favoriteCookie = $cookies.get('myFavorite');
console.log(favoriteCookie);
}

Categories

Resources