AngularJS binding variables - javascript

Yo everyone.
Today im learning something about AngularJS.
In my project i tried to use controller as syntax.
app.js
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('ParentController', [function(){
this.message = 'Hello from the parent.';
}]);
angular.module('myApp').controller('FirstChild', [function(){
this.message = 'Hello from the first child.';
}]);
angular.module('myApp').controller('SecondChild', ['$interval','$scope',function($interval, $scope){
this.message = 'Hello from the second child';
this.value = 1;
$interval(function() {
this.value = Math.round(Math.random()*1000000)+1;
}.bind(this),2000);
$scope.$watch('second.value', function(newValue, oldValue){
console.log('New', newValue, 'Old:', oldValue);
});
}]);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Controllers as syntax</title>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ParentController as parent">
<p>This is the parent: {{parent.message}}</p>
<div ng-controller="FirstChild as first">
<p>This is the parent: {{parent.message}}</p>
<p>This is the first child: {{first.message}}</p>
</div>
<div ng-controller="SecondChild as second">
<p>This is the parent: {{parent.message}}</p>
<p>This is the secondChild:{{second.message}}</p>
<p>Randomize:{{second.value}}</p>
</div>
</div>
</body>
</html>
When i try to load the page this is my output:
This is the parent: {{parent.message}}
This is the parent: {{parent.message}}
This is the first child: {{first.message}}
This is the parent: {{parent.message}}
This is the secondChild:{{second.message}}
Randomize:{{second.value}}
How i can fix this?


you are missing ng-app
<body ng-app="myApp">
DEMO
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('ParentController', [function(){
this.message = 'Hello from the parent.';
}]);
angular.module('myApp').controller('FirstChild', [function(){
this.message = 'Hello from the first child.';
}]);
angular.module('myApp').controller('SecondChild', ['$interval','$scope',function($interval, $scope){
this.message = 'Hello from the second child';
this.value = 1;
$interval(function() {
this.value = Math.round(Math.random()*1000000)+1;
}.bind(this),2000);
$scope.$watch('second.value', function(newValue, oldValue){
console.log('New', newValue, 'Old:', oldValue);
});
}]);
<!DOCTYPE html>
<html>
<head>
<title>Controllers as syntax</title>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ParentController as parent">
<p>This is the parent: {{parent.message}}</p>
<div ng-controller="FirstChild as first">
<p>This is the parent: {{parent.message}}</p>
<p>This is the first child: {{first.message}}</p>
</div>
<div ng-controller="SecondChild as second">
<p>This is the parent: {{parent.message}}</p>
<p>This is the secondChild:{{second.message}}</p>
<p>Randomize:{{second.value}}</p>
</div>
</div>
</body>
</html>

Related

How to use AngularJS $scope?

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>

html and script tag not linking

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}}

ngDialog not showing modal when clicked and no errors shown on the browser console

I am trying to implement a modal popup in angularjs using ngmodal. The code runs ,there is no error returned on the browser console but nothing happens when the modal is clicked. Below is my attempt and code
Index.html file
<html ng-appp="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
<script src="ngDialog.js"></script>
<link src="ngDialog.css"></link>
<script src="ngDialog.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
</div>
</script>
</div>
</body>
</html>
app.js file
var myApp = angular.module('myApp',['ngDialog']);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'templateId' });
};
}
function tt($scope)
{
$scope.test = function()
{
console.log("AaA");
}
}
Source of tutorial http://jsfiddle.net/mb6o4yd1/6/
Kindly assist

HTML Page.
You didnt put ng-app
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ngDialog.js"></script>
<script src="Scripts/app.js"></script>
<link href="Content/ngDialog.css" rel="stylesheet" />
<link href="Content/ngDialog-theme-default.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
</div>
<script type="text/ng-template" id="templateId">
<div ng-controller="tt" class="ngdialog-message">
<button ng-click="test()">Click here </button>
</div>
</script>
</div>
Here is your app.js
var myApp = angular.module('myApp', ['ngDialog']);
myApp.controller('MyCtrl', function ($scope,ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId'
});
};
});
myApp.controller('tt', function ($scope) {
$scope.test = function () {
alert('It works');
}
});
Let me know still you find any problem.(I have added ngDialog-theme-default.css )

Need Two views on a single page with separate modules in angular js

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Azhar";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Khan";
});
</script>
</head>
<body>
<div id="AgeCalc">
<h1>Age Calculator</h1>
<div ng-app="MyModuleA" ng-controller="MyControllerA">
{{name}}
</div>
</div>
<div id="Currency Converter">
<h1>Currncy Converter</h1>
<div ng-app="MyModuleB" ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div id="App1" ng-app="myApp1" ng-controller="MyControllerA">
<h1>My Name</h1>
<div >
<span>{{name}}</span>
</div>
</div>
<div id="App2" ng-app="myApp2" ng-controller="MyControllerB">
<h1>My Surname</h1>
<div >
<p>{{name}}</p>
</div>
</div>
<script>
angular.module("myApp1", [])
.controller("MyControllerA",
function($scope) {
$scope.name="sagar";
}
);
angular.module("myApp2", [])
.controller("MyControllerB",
function($scope) {
$scope.name = "chopada";
}
);
angular.bootstrap(document.getElementById("App2"),['myApp2']);
</script>
</body>
</html>
Hope It Will Help You...

You need to manually bootstrap the Angular apps as below. Check out the link: https://plnkr.co/edit/iW8GzBgexjylXiq1IWtp?p=preview
<div id="AgeCalc">
<h1>Age Calculator</h1>
<div ng-app="MyModuleA" ng-controller="MyControllerA">
{{name}}
</div>
</div>
<div id="Currency Converter">
<h1>Currncy Converter</h1>
<div ng-app="MyModuleB" ng-controller="MyControllerB">
{{name}}
</div>
</div>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) { $scope.name = "Azhar"; });
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) { $scope.name = "Khan";});
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyModuleA','MyModuleB']);
});

angularjs set and get a value from a service

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!

Categories