Sorry about the noob question, I'm new to AngularJS.
I have a Service and 2 Controllers , one for my home page and the second for the page that I want to create dynamically.
I want to set an object from my first controller(home page) in my service, and get this object in my second controller(on a new html page that I'll call with form action) and display some attributes of this object.
How can I do that?
Thanks!
EDIT
Sample of what I need :
index.html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
Aqui!
</div>
</body>
</html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="secondCtrl">
Second Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
</body>
</html>
http://plnkr.co/edit/sSBnE7gllFc0F6197cUD?p=info
In that case you can use ngStorage https://github.com/gsklee/ngStorage because data in service will be destroyed after full page reload.
please see demo here http://plnkr.co/edit/8b04wZ6btGwLodRuJr7V?p=preview
JS:
var app = angular.module('app', ['ngStorage']);
app.controller('firstCtrl', function($scope, $localStorage) {
$scope.storage = $localStorage.$default({myValue: 0 });
});
app.controller('secondCtrl', function($scope, $localStorage) {
$scope.storage = $localStorage;
});
HTML1
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="storage.myValue = storage.myValue + 1">{{storage.myValue}}</button>
{{service.data.value}}
<hr/>
Aqui!
</div>
</body>
</html>
HTML2
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="secondCtrl">
Second Controller myValue is: {{storage.myValue}}
</div>
Page 1
</body>
</html>
var app = angular.module('app', []);
app.service('dataService', function(){
var _data = {value:0};
return {
data : _data
};
});
app.controller('firstCtrl', function($scope,dataService){
$scope.data = dataService.data;
$scope.add = function(){
$scope.data.value ++;
};
});
app.controller('secondCtrl', function($scope,dataService){
$scope.data = dataService.data;
$scope.add = function(){
$scope.data.value ++;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
<div ng-controller="secondCtrl">
Second Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
</body>
Inject the service into your first controller, set an object on it. Inject the same service into the second controller and viola - the object is there!
Related
I have a situation somewhat like this below code. I have a delete button on view cart page when it is pressed an API is called to delete the product and I just hide the product div tag to avoid page reload initially. How to hide multiple products one by one
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(){
//WHAT SHOULD GO HERE
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide()" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
You can have following in your HTML:
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)"
ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}</h5>
Now, your hide() function would look like this,
$scope.hide = function(index){
$scope['hide'+index] = true
}
That should hide numbers on click.
Here's working example!
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(index){
$scope['hide'+index] = true
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
if you want to hide the product div tag to avoid page reload initially
just get type button without type="submit" ( inside <form></form> )
<button type="submit" > to >>> <button ng-click="hide()">
Update your COntroller like that :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list=[0,1,2,3,4,5,6]
$scope.hide = function(x){
//WHAT SHOULD GO HERE
$scope.list.splice(x, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in list">{{x}}</h5>
</div>
</body>
</html>
ng-hide is just css(display:none) way hide element. ng-if is add/remove DOM element. (we can see if u hide element, ng-if we can't see).
You try remove. Just see the example.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [0,1,2,3,4,5,6];
$scope.hide = function(index){
// in api call success function
$scope.data.splice(index, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in data">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
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>
I am trying to print scope value from 2 controllers. It is not printing the value from the second controller. What is my mistake?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-app="myApp" ng-controller="Ctrl2">
{{carname}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
You defined two ng-app, angular will bootstrap the first app it finds on the page and not the second one. Therefore second one doesn't work.
Define app on the element covering all the controller elements.
Example Snippet:
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
You don't need ng-app for each div, change your html like this:
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>
Because you defined your app twice. Try to use this code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
Two ng-app on single page doesn't work, it will compile only the 1st instance of ng-app and the other will get ignored.
It seems like you wanted to use two controllers on the same page. What you can do is you can move ng-app directive on body level & have ng-controller on two different divs.
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>
I have a paragraph and a counter. I want to update the counter when someone clicks on the paragraph using AngularJS. I wrote the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.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>
</head>
<body>
<p>Click on this paragraph.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$ang=$scope;
$ang.count=10;
});
$(document).ready(function(){
$("p").click(function(){
console.log("The paragraph was clicked.");
$ang.count=$ang.count-1;
});
});
</script>
</body>
</html>
But it's not working. I guess I'am using $scope in a wrong way but I am not sure how to fix it.
Don't mix angular with jQuery!
Rather follow angular way of doing it, Wrap all things in angular context just by moving ng-app & ng-controller directive on body and have and then place ng-click on p tag and do your desired task there
Markup
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-click="increamentCount()">Click on this paragraph.</p>
<div>
<h2>{{ count }}</h2>
</div>
<body>
Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.increamentCount = function(){
$scope.count = $scope.count + 1;
}
});
Demo Plunker
It is should be:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.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>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="click()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.click = function(){
$scope.count=$scope.count-1;
}
});
</script>
</body>
</html>
You had several errors in your code. I've refactored it a bit. Make sure to use ng-app and ng-controller properly. Do not use jquery in combination with angular. You can observe scope changes with the $watch function - this method is expensive in terms of computation and should not be overused.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.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>
</head>
<body>
<div ng-controller="myCtrl">
<p ng-click="onClick()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
</div>
<script>
angular
.module('myApp', ['ng'])
.controller('myCtrl', function($scope) {
$scope.count = 10
$scope.onClick = function () {
$scope.count--
}
// this is how you can observe state
// changes outside of event handlers
$scope.$watch('count', function(newValue, oldValue) {
console.log("The paragraph was clicked.")
})
})
</script>
</body>
</html>
I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}