I'm trying to set up a little POC to see whether or not angular would work for something I'm in the middle of.
I set up a REST server which I am able to CRUD with via angular. However, as the documentation and tutorials out there are so all over the place (read: SUPER inconsistent), I am not sure that the behavior I'm not seeing is the result of incorrect code or it's not something I can do like this.
I've gleaned from the docs that two-way binding is available, but it isn't clear how it works. NB I've read dozens of articles explaining how it works at a low level a'la https://stackoverflow.com/a/9693933/2044377 but haven't been able to answer my own question.
I have angular speaking to a REST service which modifies a sql db.
What I am wondering about and am trying to POC is if I have 2 browsers open and I change a value in the db, will it reflect in the other browser window?
As I said, I have it updating the db, but as of now it is not updating the other browser window.
app.js
angular.module('myApp', ['ngResource']);
var appMock = angular.module('appMock', ['myApp', 'ngMockE2E']);
appMock.run(function($httpBackend) {});
controllers.js
function MainCtrl($scope, $http, $resource) {
$scope.message = "";
$scope.fruits = [];
$scope.fruit = {};
$scope.view = 'partials/list.html';
var _URL_ = '/cirest/index.php/rest/fruit';
function _use_$resources_() { return false; }
function _fn_error(err) {
$scope.message = err;
}
$scope.listFruits = function() {
$scope.view = 'partials/list.html';
var fn_success = function(data) {
$scope.fruits = data;
};
$http.get(_URL_).success(fn_success).error(_fn_error);
}
function _fn_success_put_post(data) {
$scope.fruit = {};
$scope.listFruits();
}
function createFruit() {
$http.post(_URL_, $scope.fruit).success(function(data){
$scope.listFruits()
}).error(_fn_error);
}
function updateFruit() {
$http.post(_URL_, $scope.fruit).success(_fn_success_put_post).error(_fn_error);
}
function deleteFruit() {
$http.put(_URL_, $scope.fruit).success(_fn_success_put_post).error(_fn_error);
}
$scope.delete = function(id) {
if (!confirm("Are you sure you want do delete the fruit?")) return;
$http.delete("/cirest/index.php/rest/fruit?id=" + id).success(_fn_success_put_post).error(_fn_error);
}
$scope.newFruit = function() {
$scope.fruit = {};
$scope.fruitOperation = "New fruit";
$scope.buttonLabel = "Create";
$scope.view = "partials/form.html";
}
$scope.edit = function(id) {
$scope.fruitOperation = "Modify fruit";
$scope.buttonLabel = "Save";
$scope.message = "";
var fn_success = function(data) {
$scope.fruit = {};
$scope.fruit.id = id;
$scope.view = 'partials/form.html';
};
$http.get(_URL_ + '/' + id).success(fn_success).error(_fn_error);
}
$scope.save = function() {
if ($scope.fruit.id) {
updateFruit();
}
else {
createFruit();
}
}
$scope.cancel = function() {
$scope.message = "";
$scope.fruit = {};
$scope.fruits = [];
$scope.listFruits();
}
$scope.listFruits();
}
MainCtrl.$inject = ['$scope', '$http', '$resource'];
list.html
{{message}}
<hr/>
New Fruit
<ul ng-model="listFruit">
<li ng-repeat="fruit in fruits">
id [{{fruit.id}}] {{fruit.name}} is {{fruit.color}}
[X]
</li>
</ul>
index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>FRUUUUUUUUUUUUUUUUUUUUUUUUUUUIT</title>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div class="navbar">NAVBARRRRRRRRRRR</div>
<div class="container">
<div class="row">
<div ng-controller="MainCtrl">
<button ng-click="listFruits()">ListFruit()</button>
<button ng-click="cancel()">Cancel()</button>
<ng-include src="view"></ng-include>
</div>
</div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
form.html
<h3>{{fruitOperation}}</h3>
<hr/>
<form name="fruitForm">
<input type="hidden" name="" ng-model="fruit.id" />
<p><label>name</label><input type="text" name="name" ng-model="fruit.name" value="dfgdfgdfg" required="true" /></p>
<p><label>color</label><input type="text" name="color" ng-model="fruit.color" value="fruit.color" required="true" /></p>
<hr/>
<input type="submit" ng-click="save()" value="{{buttonLabel}}" /> <button ng-click="cancel()">Cancel</button>
</form>
Thanks for any insight or pointers.
Two-way binding refers to changes occurring in your controller's scope showing up in your views and vice-versa. Angular does not have any implicit knowledge of your server-side data. In order for your changes to show up in another open browser window, for example, you will need to have a notification layer which pushes changes to the client via long polling, web sockets, etc.
Related
I am trying to implement a simple file drag and drop functionality in Angular js/MVC.
I created a directive for the drag and drop.
(function (angular, undefined) {
'use strict';
angular.module('fileupload', [])
.directive("myDirective", function ($parse) {
return {
restrict: 'A',
link: fileDropzoneLink
};
function fileDropzoneLink(scope, element, attrs) {
element.bind('dragover', processDragOverOrEnter);
element.bind('dragenter', processDragOverOrEnter);
element.bind('dragend', endDragOver);
element.bind('dragleave', endDragOver);
element.bind('drop', dropHandler);
var onImageDrop = $parse(attrs.onImageDrop);
//When a file is dropped
var loadFile = function (files) {
scope.uploadedFiles = files;
scope.$apply(onImageDrop(scope));
};
function dropHandler(angularEvent) {
var event = angularEvent.originalEvent || angularEvent;
var files = event.dataTransfer.files;
event.preventDefault();
loadFile(files)
}
function processDragOverOrEnter(angularEvent) {
var event = angularEvent.originalEvent || angularEvent;
if (event) {
event.preventDefault();
}
event.dataTransfer.effectAllowed = 'copy';
element.addClass('dragging');
return false;
}
function endDragOver() {
element.removeClass('dragging');
}
}
});
}(angular));
This is the template
<div class="dropzone" data-my-Directive on-image-drop="$ctrl.fileDropped()">
Drag and drop pdf files here
</div>
This is my component code
(function (angular, undefined) {
'use strict';
angular.module('test', [])
.component('contactUs', contactUs());
function contactUs() {
ContactUs.$inject = ['$scope', '$http'];
function ContactUs($scope, $http) {
var ctrl = this;
ctrl.files = [];
ctrl.services = {
$scope: $scope,
$http: $http,
};
}
//file dropped
ContactUs.prototype.fileDropped = function () {
var ctrl = this;
var files = ctrl.services.$scope.uploadedFiles;
angular.forEach(files, function (file, key) {
ctrl.files.push(file);
});
}
return {
controller: ContactUs,
templateUrl: 'partials/home/contactus/'
};
}
}(angular));
Sometimes the drag and drop works absolutely fine without any issue. But some times I get the below issue and the drag and drop does not work and I get the black invalid cursor.
This issue is random and i do not see any errors in the console.
And I also tried other third party components like angular-file-upload
https://github.com/nervgh/angular-file-upload and I am seeing the exact same issue with that component also.
EDIT :
Answer updated for pdf preview. The code is available in the same plunker.
References : Excellent solution by #Michael at https://stackoverflow.com/a/21732039/6347317
In the example above, the response from the http POST is used in "new Blob([response]". In angular-file-upload library, the "response" would be "fileItem._file" property in "uploader.onAfterAddingFile" function. You can console log to check the data these have , so as to understand it better.
Also please note that if PDf viewer is not enabled in chrome, it has to be enabled using this: https://support.google.com/chrome/answer/6213030?hl=en
END EDIT
Since you mentioned that you tried with angular-file-upload library, i have created a plunker with it:
http://plnkr.co/edit/jeYg5fIRaC9wuEYSNOux?p=info
HTML:
<!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="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-file-upload/2.5.0/angular-file-upload.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-4">
<h3>Select files</h3>
<div ng-show="uploader.isHTML5">
<!-- 3. nv-file-over uploader="link" over-class="className" -->
<div class="well my-drop-zone" style="width:300px" nv-file-drop nv-file-over="" uploader="uploader"
filters="syncFilter">
<label>
Click here or Drag and Drop file
<input type="file" style="visibility:hidden;" nv-file-select nv-file-over="" uploader="uploader"
filters="syncFilter" multiple/>
</label>
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.queue[0].progress + '%' }"></div>
</div>
<div>{{uploader.queue[0].file.name}}</div>
<div ng-show="showAlert" class="alert alert-warning alert-dismissable">
×
<strong>Clear the existing file before uploading again!!</strong>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
var app = angular.module('plunker', ['angularFileUpload']);
app.controller('MainCtrl', function($scope,FileUploader) {
var uploader = $scope.uploader = new FileUploader();
// FILTERS
// a sync filter
uploader.filters.push({
name: 'syncFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
console.log('syncFilter' + this.queue.length);
return this.queue.length < 1;
}
});
// an async filter
uploader.filters.push({
name: 'asyncFilter',
fn: function(item /*{File|FileLikeObject}*/, options, deferred) {
console.log('asyncFilter');
setTimeout(deferred.resolve, 1e3);
}
});
uploader.allowNewFiles = true;
uploader.filters.push({
name:'csvfilter',
fn: function() {
return this.allowNewFiles;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
$scope.showAlert=true;
};
uploader.onAfterAddingFile = function(fileItem) {
};
});
It is pretty straight forward and i dont get the error you mentioned. We are actually using this library in one of our Projects. I have also added a filter to restrict upload to only 1 file.
Please check this and let me know how it goes or if you have any doubts in the code.
I'm very new to Angularjs and Firebase and have been stuck on this for quite some time. I'm trying to use ng-repeat to iterate over an array of procedures I set in my controller. I can print $scope.procedures in my controller but not in index.html. Any idea where I'm going wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<!-- Angular JS -->
<script src="lib/angular/angular.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" id="logo">
</div>
<div class="container" ng-controller="MainCtrl">
<div class="col-sm-7 col-md-6 col-md-offset-1" id="message">
<label id="input-label">Insurance Company</label>
<input ng-model="insurQuery" class="form-control insurInput" id="input-box" placeholder="Patient Insurance Company" autofocus>
<div ng-if="showProcedures()">
<h3>Procedures Covered by <span id="proc-span">{{selectedInsur.name}}</span></h3>
<ul class="list-group">
<li class="list-group-item" ng-repeat="proc in procedures">
<a>{{ proc.name }}</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-md-offset-1" id="message2">
<ul class="list-group">
<li class="list-group-item ng-class: {'active':isSelectedInsur(company)}" ng-repeat="company in insuranceCompanies | filter: insurQuery | orderBy: 'name'">
{{ company.name }}
</li>
</ul>
</div>
</div>
</body>
</html>
controllers.js
var myApp = angular.module('myApp', ['ui.bootstrap', 'firebase']);
myApp.controller("MainCtrl", function($scope, $firebaseArray) {
var ref = new Firebase("https://payoralerts.firebaseio.com/companies");
// download the data into a local object
$scope.insuranceCompanies = $firebaseArray(ref);
$scope.selectedInsur = null;
$scope.isSelected = false;
$scope.procedures = [];
function getProcedures() {
var companiesBaseUrl = "https://payoralerts.firebaseio.com/companies/"
var proceduresBaseRef = new Firebase("https://payoralerts.firebaseio.com/procedures/");
var companyUrl = companiesBaseUrl + $scope.selectedInsur.$id + "/procedures/";
var proceduresUrl = "https://payoralerts.firebaseio.com/procedures/"
var companyProceduresRef = new Firebase(companyUrl);
companyProceduresRef.on("child_added", function(snap) {
proceduresBaseRef.child(snap.key()).once("value", function(data) {
if (data.val()) {
console.log("Name: ", data.val().name);
$scope.procedures.push(data.val());
console.log("scope procedures: ", $scope.procedures);
};
});
});
}
function setSelectedInsur(company) {
if ($scope.selectedInsur == company) {
$scope.selectedInsur = null;
$scope.isSelected = null;
} else {
$scope.selectedInsur = company;
$scope.isSelected = true;
getProcedures();
console.log("scope procedures: ", $scope.procedures);
}
}
function isSelectedInsur(company) {
return $scope.selectedInsur !== null && company.name == $scope.selectedInsur.name;
}
function showProcedures() {
if ($scope.isSelected == true) {
return true;
} else {
return false;
}
}
$scope.setSelectedInsur = setSelectedInsur;
$scope.isSelectedInsur = isSelectedInsur;
$scope.showProcedures = showProcedures;
// $scope.procedures = $scope.procedures;
});
I'm also pretty new to Angular as well and one of the most deep and hard topics in angular (imo) is how angular binding works under the hood.
In your case calling $scope.$apply() works but keep in mind that this is not the best solution and you should not start calling it whenever you have a binding problem.
I really encourage you to take some time reading some articles about what angular binding really is. You can start here and here. After this get back to your code to understand what you are doing wrong. :)
I want a angularjs code in which 1 controller is using .service set method to set the value and another controller using the .service get method to retrieve that value.
also i tried this code please let me know why it is not printing the right output.
i tried this code but after setting value it is not printing value...can you help me out in this ..
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>
<script>
var app = angular.module('myApp', []);
app.service('sharedProperties', function() {
var stringValue = ' ';
return{
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
}
}});
app.controller('get', function($scope,sharedProperties) {
$scope.stringValue = sharedProperties.getString();
});
app.controller('set', function($scope, sharedProperties) {
$scope.setString = function(newValue) {
$scope.objectValue.data = newValue;
sharedProperties.setString(newValue);
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="set">
<input type=text ng-model="newValue">
<button onclick="setString(newValue)" >Click here</button>
</div>
<div ng-controller="get">
value is {{stringValue}}
</div>
</body>
</html>
Answers will be appreciated.
I dont understand what is stopping you?
Just read the angular docs https://docs.angularjs.org/guide/services
Quick fiddle
angular.module('serviceApp',[]);
angular.module('serviceApp').service('SharedService',[function(){
var value = '';
this.set = function(val){
value = val;
};
this.get = function(val){
return value;
}
}]);
angular.module('serviceApp').controller('OneCtrl',['$scope','SharedService',function($scope,sharedService){
$scope.form = {value:''}
$scope.setValue = function(){
sharedService.set($scope.form.value);
}
}]);
angular.module('serviceApp').controller('TwoCtrl',['$scope','SharedService',function($scope,sharedService){
$scope.value = sharedService.get();
$scope.getValue = function(){
$scope.value = sharedService.get();
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="serviceApp">
<div ng-controller="OneCtrl">
<input ng-model="form.value" type="text" />
<button type="button" ng-click="setValue()">Set</button>
</div>
<div ng-controller="TwoCtrl">
<button type="button" ng-click="getValue()">Get</button>
Value: {{value}}
</div>
</div>
I have the following
var model =
{
UserInfo :null ,
PlatformID : 1
}
var myApp = angular.module("myApp", []);
myApp.controller("UCtrl",['$scope','$http','$window', function ($scope, $http,$window) {
$scope.Info =model ;
$scope.SearchUser = function() {
$http({
method:"POST",
url : '/FindUser',
data: {UserID : 9999}
}).success(function(data){
$scope.Info.UserInfo = data;
});
};
});
<div ng-hide="{{Info.UserInfo === null}}" >
</div>
When a user is searched for , the Info.User is updated via $http post via
$scope.Info.User = data ;
The ng-hide part does not show after the data is assigned to the Info.User object even though there is data.
Don't user {{}} inside ng-if. Expression will be executed anyway:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
</head>
<body ng-app="Example">
<div data-ng-controller="Cntrl">
<div ng-hide="UserInfo === null" >
User info
</div>
<button data-ng-click="toggle()">Toggle</button>
</div>
<script>
var app = angular.module("Example", [])
.controller("Cntrl", function ($scope) {
$scope.UserInfo = null;
$scope.toggle = function () {
if ($scope.UserInfo === null) {
$scope.UserInfo = 'some value';
} else {
$scope.UserInfo = null;
}
};
});
</script>
</body>
</html>
EDIT: here is another fiddle with code more like yours: http://jsfiddle.net/kpLe544u/3/
I think the issue is that you haven't declared a controller in your HTML so you cannot access the variable Info.UserInfo from that div.
Excerpts from my fiddle: (http://jsfiddle.net/kpLe544u/2/)
HTML
<div ng-app>
<div ng-controller="MyCtrl">
<div ng-show="Info.User">data here</div>
<div ng-show="Info.Test">this won't show</div>
</div>
</div>
controller.js
function MyCtrl($scope) {
$scope.Info = {};
$scope.Info.User = "blah blah";
$scope.Info.Test = null;
}
I'm displaying a message when the user clicks on the button.
I want to show this message for 10 seconds and then hide it.
My code is the following:
<script>
function Ctrl($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function() {
$scope.msg="hi";
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting()">click</button>
{{msg}}
</div>
You can set a variable that determines whether to show the message or not and hide it and after 10,000 seconds. You will have to inject $timeout as shown below. Then in your view you will need to wrap {{msg}} in a span in order to use ng-show
<script>
function Ctrl($scope, $window, $timeout) {
$scope.greeting = 'Hello, World!';
$scope.showGreeting = false;
$scope.doGreeting = function() {
$scope.msg="hi";
$scope.showGreeting = true;
$timeout(function(){
$scope.showGreeting = false;
}, 10000);
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting()">click</button>
<span ng-show="showGreeting ">{{msg}}</span>
</div>
The way I did to show a message for a certain time in angularjs was using AngularJS-Toaster library
To use the library follow this steps:
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.js"></script>
Add toaster container directive:
<toaster-container></toaster-container>
Prepare the call of toaster method:
// Display an info toast with no title
angular.module('main', ['toaster'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});
Call controller method on button click:
<div ng-controller="myController">
<button ng-click="pop()">Show a Toaster</button>
</div>
Here you can see a Plunker showing many kinds of toasts showing differents messages
Add the $timeout dependency to your controller. Here's a fiddle:
<div ng-app>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting()">click</button>
<div class="ng-hide" ng-show="showMessage">{{msg}} {{ greeting }}</div>
</div>
</div>
function Ctrl($scope, $window, $timeout) {
var messageTimer = false,
displayDuration = 5000; // milliseconds (5000 ==> 5 seconds)
$scope.showMessage = false;
$scope.msg = "hi";
$scope.doGreeting = function () {
if (messageTimer) {
$timeout.cancel(messageTimer);
}
$scope.showMessage = true;
messageTimer = $timeout(function () {
$scope.showMessage = false;
}, displayDuration);
};
}