How to write following javascript in Angular2? - javascript

I have no idea about Angular.js. But want I want to do is
this
<head>
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
</head>
and this
<body>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
</body>
any idea?

Here is angular js code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
//write your code here to perform some action on calling this function
//Android.showToast(toast);
alert(toast);
console.log(toast);
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="namesCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>
</html>

You should go through docs first of angular :
Its so simple as below :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
Android.showToast(toast); // Android should be inject as an dependency otherwise it would be undefined.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>

I managed to create a simple example for you. I was missing the Android class, so I tested it using the alert() function.
AngularJS 2
Plunkr Demo
Guidelines
AngularJS's Controller As and the vm Variable
File-closure and Strict mode
Angular Components
ngApp
ngController
ngClick
(function() {
"use strict";
function exampleController() {
var vm = this;
vm.showAndroidToast = showAndroidToast;
function showAndroidToast(message) {
alert(message); // replace this with your toast message
}
}
var app = angular.module("exampleApp", []);
app.controller("exampleController", exampleController);
})();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="exampleApp" ng-controller="exampleController as vm">
<input type="button" value="Say hello" ng-click="vm.showAndroidToast('Hello Android!')" />
</body>
</html>

Related

How can I use javascript code inside angularjs?

I need to run this code in angularjs.
When I try to execute this model function it is not running.
It is not even showing alert or console.
So what is the way to use this script files in angularjs
Here is my code in example.html:
<div>
{{sample}}
</div>
<div><button ng-click="name()"></div>
<script>
function name(){
alert("text");
}
</script>
If i understand your requirement correctly,
You need to execute a separate java-script function.
For an angular application it is not a proper way to run javascript out of scope of angular.
any if it is absolutely requried you can try replacing ng-click="name()" with onclick="name()"
var app = angular.module("app", []);
app.controller('exampleController', [function() {
this.myFunction = function() {
alert("Iam from angular controller");
}
}]);
function myFunction() {
alert("Iam from javascript");
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.myFunction()">click me</button>
<button onclick="myFunction()">click me</button>
</div>
#Update
If you want to use a java script library or function or constants in angularjs the my suggested way is to add a factory or service that ensure the library or function or constants but it is not simple as above solution.Here iam adding a snippet based on above solution
There are some advantages of using following approch :-
It will add dependency injection proprely which is a basic concept behind angularjs
It will ensure that the external function exist before starting app.
It will add more flexibility and control over the java script function in angular.
The below snippet will remove the external access of function and secure your application
This is the best way in which you can add external libraries like jquery loadash or any js libraries to your code
(function() {
function exampleController(myFunction) {
this.myFunction = function() {
alert("Iam from angular controller");
}
this.externalJSFunction = myFunction
};
exampleController.$inject = ['myFunction'];
function myFunctionFactory($window) {
if (!$window.myFunction) {
throw new Error("myFunction is not defined");
}
this.myFunction = $window.myFunction;
/* You can add
$window.myFunction = undefined;
if the function ($window.myFunction) is not required by
some other library or function in window scope
in such cases it gives added security by
restricting access of this from window scope and dis allows modification
*/
return this.myFunction;
}
myFunctionFactory.$inject = ['$window'];
var app = angular.module("app", []);
app.controller('exampleController', exampleController);
app.factory('myFunction', myFunctionFactory);
})();
function myFunction() {
alert("Iam from javascript");
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.myFunction()">click me For angular Function</button>
<br/>
<button ng-click="ctrl.externalJSFunction()">click me For external JS Function </button>
<br/>
<button onclick="myFunction()">click me for checking exteranl acess </button>
</div>
your code should be like this....
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script >
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name=function(){
alert("text");
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<div>
{{sample}}
</div>
<div><button ng-click="name()">click me</div>
</body>
</html>
You need to give angular js cdn first and then a create a module and controller like above
Here is a sample controller.
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<button ng-click="name()">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = name;
function name(){
alert("text");
}
});
</script>
</body>
You could use a directive, here is an example:
// in your JS source
angular.directive('something', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
alert('yup');
});
}
};
}]);
// in your HTML file
<button type="button" something>Click Me!</button>
This allows you to reuse your various code chunks / functions across your entire project pretty easily.
Another Solution
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.name()">click me to angular</button>
<button ng-click="name()" class="btn">click me to javascript</button>
<script>
var app = angular.module("app", []);
app.controller('exampleController', [function() {
this.name = function() {
alert("angular text");
}
}]);
//JQuery Lib must be included your project
$(document).on('click', '.btn', function() {
eval($(this).attr('ng-click'));
});
function name() {
alert("javascript text");
}
</script>
</body>
</html>
You should be able to run any javascript inside of an angular controller inside of a script tag in an html file.
Your html file should look something more like this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.name()">click me</button>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('exampleController', [function() {
this.name = function(){
alert("text");
}
}]);
</script>
Create a service layer and glue it inside the controller. Now, you can reuse the created function in multiple controllers.
For implementation,
How can I call javascript function in AngularJS controller?
I hope this helps!

Ng-model is not working as expected?

I have a textbox which is connected to angular js with ng-model=sampleValue
Now, my requirement is whenever I click on the button show function should be executed and the textbox's value should be changed to Harish. But this is not the result I'm getting. Please take a look at the code that I have written below:
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp">
<input ng-controller="mainController" type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
Thank you in advance :)
Currently you had applied ng-controller over input element, which means controller scope has restricted on input DOM only, because of which show method would not get call. You should move ng-controller to wrapper element(here its body).
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue" />
<button ng-click="show()">Click Here</button>
</body>
Plunker
Move ng-controller to body tag:
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
Put ng-controller in body or in some parent div. You are using ng-controller in input type
Try this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myCtrl', function myCtrl($scope,$filter) {
$scope.showValue = function(){
$scope.sampleValue = "Harish";
}
})
</script>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="sampleValue"/>
<button ng-click="showValue()">Click Here</button>
</body>
</html>
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
your ng-controller is on the input
The fact is you used ng-controller over input tag. so outside of the input tag inside controller function will not work. your js is totally ok. u just need to change the html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" >
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Ang</title>
</head>
<body>
<div ng-app="">
<h1>Ng-show ng-hide</h1>
<p class="description">Click on the "show"-link to see the content.</p>
Show
<button ng-click="showme=false">Hide</button>
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
</div>
</body>
</html>
Try executing the above code you may get an idea for you code.
Your controller scope is limited to input text box.
<body ng-app = "myApp">
<div ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</div>
</body>

Why parseInt on a variable using expression does not display $scope variable?

Here is my code,
WORKING CODE
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{value}}</h1>
</div>
</body>
</html>
NOT WORKING CODE:
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>
Normally using parseInt on an expression should work, what is the issue here?
You have to parse the value in the controller since angular is not able to parseInt into an Angular expression:
In the other hand if you really want to make this in the DOM one of the best options is to use an angular filter like:
var app = angular.module("app", []);
app.filter('parseInt', function() {
return function(value) {
return parseInt(value);
};
});
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1>{{(value | parseInt) + 44}}</h1>
</div>
</body>
</html>
As per the doc
https://docs.angularjs.org/guide/expression
Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.
For the question about why it does not display check this
https://docs.angularjs.org/guide/interpolation
if the interpolated value is not a String, it is computed as follows:
undefined and null are converted to ''
Since ParseInt in not available inside interpolation, it is undefined and so is the displayed value.
you will have to create your own function in the controller $scope.
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",function($scope) {
$scope.value = '20';
$scope.parseInt = function(value)
{
return parseInt(value);
}
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>

ng-show on the basis of model value of some other html element

I have a simple Angular Program in which the span must show only if the input value is 'Peter'. I was hoping that if I change input value then span must vanish, but when I am trying to change the value of input box, it is not allowing me do so. What is the issue due to which I am unable to change input value ?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<span ng-show="name='peter'">{{name}}</span>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
</script>
</body>
</html>
Change ng-show to
<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
You are using assignment operator but you need to compare the values and also change the case of input value.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
</script>
</body>
</html>
Try this.
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p ng-hide="name!== 'peter'">peter</p>
<p ng-show="name!== 'peter'"></p>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
});
</script>

AngularJS tutorial not binding data

I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller

Categories