Can anyone please tell me how to create arrays like myarray = [] along with other variables in localstorage using angularJS,
ive created variable which is as shown below.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script>
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function(
$scope,
$localStorage
){
$scope.$storage = $localStorage.$default({
x: 42 // variable
});
});
</script>
</head>
<body ng-controller="Ctrl">
<button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> + <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> = {{$storage.x + $storage.y}}
</body>
</html>
It support json, you can store anything except those not supported by JSON:
Demo
<script>
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function(
$scope,
$localStorage
){
$scope.$storage = $localStorage.$default({
x: 42,
array:[]
});
});
</script>
Related
The index.html page looks like this.
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="/js/script.js"/>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
The script.js file looks like this:
var MainController = function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
But when I boot up the application my page shows :
{{message}}
{{person.firstName}}
and not the values that it should. Am I missing something here? I am using spring boot.
I have debugged the chrome and have seen the js file loading properly, it even hits the debugger point in the js file,hence the file loading is not the problem i suppose.
UPDATE- THIS WORKED
var MainController = function($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
angular.module('mainApp', [])
.controller('MainController', MainController);
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
Since angular 1.3+ global function declaration of controller haven't been supported. So you have first create an angular module and then bind all of its angular component to it.
Also move /js/script.js right after angular.js reference with closing </script> tag.
Code
angular.module('mainApp', [])
.controller('MainController', MainController)
function MainController($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
Then do add mainApp module inside ng-app directive like ng-app="mainApp" on html tag.
Demo Here
You need to define the module and the controller,
HTML:
<body ng-app="DemoApp" ng-controller="DemoController">
{{message}} {{person.firstName}}
</body>
Controller:
var app = angular.module('DemoApp', ['angular.filter'])
app.controller('DemoController', function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
});
DEMO
I am having a problem sending a value of JavaScript variable to Angular js variable. I want to send a value in dataArray variable in JavaScript to Angular js variable $scope.test
html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="angular.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
// $("#fileUpload").load('test.csv');
$.get("test.csv", function(data) {
alert(data);
var rows = data.split("\r\n");
if(rows.length>0){
alert("inside if");
var firstRowCells = GetCSVCells(rows[0], ",");
var dataArray = new Array();
for(var i=1;i<rows.length;i++)
{
var cells = GetCSVCells(rows[i], ",");
var obj = {};
for(var j=0;j<cells.length;j++)
{
obj[firstRowCells[j]] = cells[j];
}
dataArray.push(obj);
}
$("#dvCSV").html('');
alert(dataArray);
$("#dvCSV").append(JSON.stringify(dataArray));
var myjson=JSON.stringify(dataArray);
//alert(myjson);
}
});
function GetCSVCells(row, separator){
return row.split(separator);
}
});
</script>
</head>
<body>
<div id="container">
Test
</div>
<div ng-app="sortApp" ng-controller="mainController">
<div id="dvCSV" ng-model="dataf" ng-bind="bdc">dfsgdfd</div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js:
angular.module('sortApp', [])
.controller('mainController', function($scope) {
window.alert("Angular");
window.alert("asdfad"+$scope.bdc);
$scope.test=$scope.dataf;
window.alert($scope.myjson);
window.alert("test"+$scope.test.value);
You can do this all jquery stuff in angular using http service of angular js.
For simple http service you can refer this link -
http://www.w3schools.com/angular/angular_http.asp
I agree with previous answer. Also its wrong to use $(document).ready along with using angular framework in you application.
Try something like this:
angular.module('sortApp', [])
.service('loadTestCsv' ['$http', function($http) {
return $http.get('test.csv').then(data => {
// do all data processing you need
return data;
});
}]);
.controller('mainController', ['$scope', 'loadTestCsv', function($scope, loadTestCsv) {
loadTestCsv().then(data => {
$scope.data = data;
});
}]);
For some reason it gives me the error:
ReferenceError: random is not defined at Scope.$scope.generateRandom
I dont know what im doing wrong, you can go check out the website im using to do this HERE.
index.html:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Basic Login Form</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
<script type="text/javascript" src="script23.js"></script>
</head>
<body ng-app = "app" ng-controller = "app">
<button ng-click = "generateRandom()">Generate Random Number</button>
<br> {{randomNumber}}
</body>
</html>
script23.js:
var app = angular.module('app', []);
app.service('random', function(){
var randomNum = Math.floor(Math.random()*10)
this.generate = function(){
return randomNum;
}
});
app.controller('app' , function($scope){
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
})
To use service in controller, you need to inject it.
app.controller('app', function ($scope, random) {
I'd recommend you to use following syntax:
app.controller('app', ['$scope', 'random', function ($scope, random) {
See Why we Inject our dependencies two times in angularjs?
Change your controller like this, since you are using the service 'random'
myApp.controller('app', ['$scope','random', function( $scope,random)
{
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
}])
Here is the working Application
I am new to angular JS. I wrote a bit of angular code.
i have defined controller code also.Can anybody tell me why i cannot get scope variable value?
Any thing i missed ?
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<!--this above is external java script
file my controller is not working,
what problem i am facing ?-->
<body>
<!-- the below is ng-controller -->
<div ng-controller="HelloCtrl">
say hello to : <input type="text" ng-model="name"/>
<h1> Hello, {{name}}! </h1>
</div>
Script:
<script>
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
</body>
</html>
you should define your app and your controller like this :
var myApp = angular.module("myApp", []);
myApp.controller("HelloCtrl", function ($scope) {
$scope.name = "world";
});
You are missing var myApp = angular.module('myApp',[]);
Your script should look like:
<script>
var myApp = angular.module('myApp',[]);
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
Working example. Depends on angular version. :)
I just saw a video of introduction to AngularJS and use the following example
The html:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="MainContrl">
<h2>{{message}}</h2>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>
The js:
var MainContrl = function($scope){
$scope.message = "Hello friend";
};
In the example I've seen this structure works, but when I test it does not work.
The console gives me this error:
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MainContrl&p1=not%20a%20function%2C%20got%20undefined
Can be used in this way the controller?
Or is it a bad practice
Example in Plunker:
Code example
I think, it's a bad practice
You better use:
var myApp = angular.module('myApp', []);
myApp.controller('MainContrl', ['$scope', function ($scope) {
// any code here
]);
And use this in HTML:
<html ng-app="myApp">
<body ng-controller="MainContrl">
// any code here
</body>
</html>
You may need to define your angular App first :
var myApp = angular.module('myApp', []);
myApp.controller('MainContrl', function ($scope) {
$scope.message = "Hello friend";
});
here is a working example on Plunkr
I think you have to have a main app.
In myapp.js
var yourApp = angular.module('myApp',[]);
In mainController.js (it should not be called test.js)
yourApp.controller('MainController',['$scope',function($scope){
$scope.message = "Hello world";
}]);
In your index.html
<html ng-app="myApp">
<body ng-controller="MainController">
{{message}}
</body>'
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/myapp.js"></script>
<script src="js/mainController.js"></script>
</html>
Change Your script.js to
var app=angular.module('myapp',[]);
app.controller('MainContrl', ['$scope', function($scope){
$scope.message = "Hello friend";
}]);
and in html page put ng-app in body tag and remove ng-app from html
<body ng-app="myapp" ng-controller="MainContrl">
First declare your app in your html:
<html ng-app="myApp">
Second define your app in your js:
var app = angular.module('myApp', []);
Then definewhatever controller in whatever js file (best practice sugests that every controller has its own file):
var MainContrl = function($scope){
$scope.message = "Hello friend";
};
Then declare your controller and variables in your html:
<body ng-controller="MainContrl">
<h2>{{message}}</h2>
</body>
Don't forget to bind your controller with your app:
app.controller('MainContrl',MainContrl);
I also can see that you're using bower, so I suggest you read this:
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/