Develop Reference

express js angular js update from mysql and Angular Js modules

I am new to Angular and I try to lern it.
I have problems with update a user. I click to the button but nothing happend.
Backand is ok, with rest client in firefox.
The second problem is that I can not put another module to the Angular app.
When I do this my app show a blank page without errors. I have only ngRoute as a Angular module.
My code:
Part of Html
<!-- Modal Edit Customer -->
<div class="modal fade" id="edit" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Kunde</h4>
</div>
<div class="modal-body">
<label>Name</label>
<input type="text" maxlength="70" ng-model="cust">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" ng-click="updateCustomer()" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Part of the controller
//update Customer
updateCustomer();
$scope.updateCustomer = updateCustomer;
function updateCustomer() {
$http.post('/customers/update' , {
"name" : $scope.name
})
.then(function successCallback(data, status, headers, config) {
$('#edit').modal('hide');
$scope.clearCustomerForm();
$scope.getAll();
console.log(data, status, headers, config);
},
function errorCallback(error, data) {
console.log('Error Updating: ' + data);
})
};
routers.js file - This is the problem with the blank page, see above
var app = angular.module('appCheck', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
controller : "customersCTRL",
templateUrl : "/app/customers/customers.html"
})
.when("/customers", {
controller : "customersCTRL",
templateUrl : "/app/customers/customers.html"
})
.when("/lists", {
controller : "listsCTRL",
templateUrl : "/app/lists/lists.html"
})
.when("/items", {
controller : "itemsCTRL",
templateUrl : "/app/items/items.html"
})
.when("/activities", {
controller : "activityCTRL",
templateUrl : "/app/activities/activities.html"
})
.when("/details", {
controller : "detailCTRL",
templateUrl : "/app/details/details.html"
})
.when("/singlecustomer", {
controller : "singleCustomerCTRL",
templateUrl : "/app/customers/singleC.html"
})
.otherwise({
redirectTo: '/'
});
// use the HTML5. Disable for old browsers that do not support HTML5
// With HTML5(false) shoud use #! to the href in the index.html
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
});
Please explain the answer, I am new to Angular. Thank you

how to open and set controller Mobile-Angular modal from controller

I'm trying to use in modal (Mobile Angular JS ), but I have not found , any way of setting controller for my modal inside my main controller , and pass parameters. My application is just mobile , it would be wrong to use ui- bootstrap ?
Html
<div ui-content-for="title">
<span>Employerss</span>
</div>
<div class="scrollable" ui-state="searchBar">
<div class="scrollable-content" ui-scroll-bottom='bottomReached()'>
<div class="list-group" style="height:80px;">
<a ng-repeat="employers in employerss" ng-click="select(employers)" class="list-group-item">
<p>{{employers.name | limitTo:70}}...</p>
</a>
</div>
</div>
</div>
<div ui-content-for="modals">
<div ng-include="'modal/modalemployers.html'" ng-controller="modalEmployersController"></div>
</div>
Modal
<div class="modal" ui-if='modalemployers' ui-state='modalemployers'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="modalemployers">
×
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>{{test}}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="modalemployers" class="btn btn-default">Close</button>
<button ui-turn-off="modalemployers" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Angular JS
var app = angular.module('apphome', [
"ngRoute",
"ngTouch",
"mobile-angular-ui",
"mobile-angular-ui.core",
"mobile-angular-ui.components"
]);
.........
.........
app.controller('employersController', function ($scope, $http) {
$scope.employerss = [];
$scope.select = function (item) {
$scope.Ui.turnOn('modalemployers');
}
getEmployers($http, function return(data) {
$scope.employers = data;
});
});
app.controller('modalEmployersController', function ($scope) {
$scope.test = "teste";
});
I Need (I am confused if I can use bootstrap -ui , without jeopardizing my application because it is just mobile. I need to know if the bootstrap -ui will work well . Mobile phones with small screen will use the application can not break the layout.)
$scope.select = function (item) {
var modalInstance = $modal.open({
templateUrl: 'modalemployers.html',
controller: 'modalEmployersController',
size: size,
resolve: {
item: function () {
return item;
}
}
});
}
Thanks all!

Angular UI Bootstrap just provides Angular templates and extensions for Bootstrap CSS. Since Bootstrap CSS supports mobile devices, the Angular UI Bootstrap library does as well.
Note that the only dependencies of Angular UI Bootstrap are Angular >= 1.3.x and Bootstrap CSS >= 3.x.

Angular-ui bootstrap modal button will not execute function

I have my modal set up as so
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Confirm</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="removeSetting()">Yes</button>
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>
</script>
Hitting the cancel button does what it should, simply closes the modal. My problem comes when a user hits the yes button. My function removeSetting() never gets executed.
$scope.removeSetting = function() {
TwoFactorAuthenticationService.removetAuthetication().then(function(data) {
$scope.busy3=false;
notifyService.alert("error", notifyService.getAlertText('2FactorRemovedToken'));
$scope.busy=true;
$timeout(function() {
$scope.templateUrl = 'twofactorsetup/step1.html';
}, 3000);
}, function() {
notifyService.alert("error", notifyService.getAlertText('2FactorRemoveTokenFailed'));
});
};
That is the function that should be called and executed. What am I missing?

Place code like this in modal initialize
$modal.open({
templateUrl: 'myModalContent.html',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.removeSetting = function() {
//place your code here or call function from parent scope
$scope.$parent.removeSetting();
$modalInstance.dismiss('cancel');
};
}
});
You don't need scope parameter if not using parent scope.
Or you can use call function from parent scope from template like this (by using $parent.removeSetting() call)
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Confirm</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$parent.removeSetting()">Yes</button>
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>
</script>

Angular bootstrap ui modal with same controller instead of new controller

I am using angular bootstrap ui modal box it says to give a new $modalInstance for new controller.I want to use the same controller where i have initialized the modal box.I searched but no success.I found this links but no success -
How to use the same controller for modal and non-modal form in Angular UI Bootstrap?
Angular-ui bootstrap modal without creating new controller
app.controller('UserCtrl',['$scope','$filter','ngTableParams','$modal',function($scope, $filter, ngTableParams,$modal) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl', //Instead of this i want to use the same controller 'UserCtrl'
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
} ]);
So that i can call the save function on this same controller which is called on save click of modal box

It was possible in older version of UI-Bootstrap 0.10.0
Download Library.Even latest version,it works for me
index.html
<!-- if you are using Bower -->
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">
</script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">
</script>
<!-- button click opens modal-->
<button ng-click="openModal()">Button test</button>
<!-- modal -->
<!-- look at 'type' and 'id' values -->
<script type="text/ng-template" id="myTestModal.tmpl.html">
<div class="modal-header">
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something
</button>
</div>
</script>
modalDemoController.js
$scope.openModal=function(){
$scope.modalInstance=$modal.open({
templateUrl: 'myTestModal.tmpl.html',
scope:$scope
});
}
$scope.close=function(){
$scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think
};
$scope.doSomething=function(){
//any actions to take place
console.log("Do Something");
}

I had a similar issue, but I managed to fix it by removing the controller inside of the $uibModal.open({])

AngularjS $injector:unpr

I have a following controllers:
/** Calculation controller **/
app.controller('calculationController', ['$scope','$modal','content', function($scope, $modal, content) {
/** data recieved from get request **/
$scope.data = content.data; //promise
/** function to edit data **/
$scope.edit = function(item){
var htmlContents = {
title: 'Edit product',
body: 'Please confirm that you want to edit the product'
}
var modalInstance = $modal.open({
templateUrl : templateBase + 'views/modal/dialog.html',
controller : 'modalInstanceController',
resolve : {
items : function() { return item; },
html : function() { return htmlContents; }
}
});
}
/** function to delete data **/
$scope.trash = function(item){
}
}]);
app.controller('modalInstanceController', ['$scope', '$modalInstance','items','html', function($scope,$modalInstance,items,html) {
$scope.title = html.title;
$scope.body = html.body;
}]);
What I'm trying to accomplish is to open a dialog with contents from 'dialog.html' however once I click the :
<img ng-src="images/icn_edit.png" ng-click="edit(item)" alt="Edit">
$injector:unpr is appearing in console log.
dialog.html contents are :
<div ng-controller="modalInstanceController">
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
I know that I'm missing to inject something however after hours of looking at the code I'm unable to locate what...
From what I can observe '$scope', '$modalInstance','items','html' are being injected in modelInstanceController..
Any help appreciated.
thank you

From your dialog.html remove
Ng-controller="modalInstanceController"
It should be plain div and that will do the trick
Your html markup for dialog.html should look like this:
<div>
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>