Develop Reference

Angular 1.6.x: how to redirect from one controller to homepage using ng-click?

I have a contact page and there is a home btn on that page. I want to redirect it from contact page to home page using ng-click.
below is the code for respective pages.
contact.html
<div ngController="contactController">
<div class="heading text-center">
<h1>Contact Us</h1>
</div>
<div>
<form class="needs-validation" novalidate>
<div class="form-group row">
<label for="validationTooltip01" class="col-sm-2 col-form-label">Name</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipName" placeholder="Name" required>
<div class="invalid-tooltip">
Please enter your full name.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltipEmail" class="col-sm-2 col-form-label">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">#</span>
</div>
<input type="email" class="form-control" id="validationTooltipEmail" placeholder="Email"
aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a valid email.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltip03" class="col-sm-2 col-form-label">Query</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipQuery" placeholder="Query" required>
<div class="invalid-tooltip">
Please write your Query.
</div>
</div>
</div>
<div class="btn-group offset-md-5">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-default" type="button" id="homebtn" ng-click="home()">Home</button>
</div>
</form>
</div>
</div
contact.component.js
angular.module('myApp')
.component('contactComponent', {
restrict: 'E',
scope: {},
templateUrl:'contact/contact.html',
controller: contactController,
controllerAs: 'vm',
// bindings:{
// information:'='
// }
});
function contactController() {
};
app.js
var app = angular.module('myApp', ['ui.router']);
app.controller('mainCtrl',function(){
});
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('dashboard', {
url: '/dashboard',
component: 'dashboardComponent'
})
.state('contact', {
url: '/contact',
component: 'contactComponent'
})
.state('about', {
url: '/about',
component: 'aboutComponent'
})
}]);

Use
<button class="btn btn-default" type="button" id="homebtn" ng-click="navigate ('home')">Home</button>
and in controller,
$scope.navigate = function(routeName){
$state.go(routeName)
};

I noticed you have written
ngController="contactController"
It should be
<div ng-controller="contactController">
After that change your contactController as following. Put it after module initialization.
app.controller('contactController', ['$scope', '$state', function ($scope, $state) {
$scope.home = function () {
$state.go('home');
};
}]);

I finally got it working.
function contactController($scope, $state) {
$scope.navigate = function(home){
$state.go(home)
};
};
I was missing $scope as a parameter inside my controller function.

javascript Angularjs validation not showing

I am using ex6 and angularjs and I write an angularjs validation form.
the HTML doesn't show up. it's not showing any errors.
The HTML of the validation :
<form id="form" name="login.sign" class="setup info" novalidate>
<div class="input-group login-max-width">
<span class="input-group-addon" id="login-addon">
<i class="fa fa-envelope" id="login-addon"></i>
</span>
<input id="login.credentials.email" type="email" class="form-control email validate valid"
name="login.credentials.email" ng-model="login.credentials.email" placeholder="Email" required>
</div><br />
<div class="input-group">
<span class="input-group-addon lock-fix">
<i class="fa fa-lock"></i>
</span>
<input id="login.credentials.password" type="password" class="form-control password validate valid"
name="login.credentials.password" ng-model="login.credentials.password" placeholder="Password" ng-minlength="6" required>
</div>
<center>
<div class="input-group text-center" ng-show="login.error">
<h3 class="error-show">{{login.error}}<i class="fa fa-exclamation-triangle"></i></h3>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 login-flex-display">
<button type="submit" class="btn btn-success right-margin-button" ng-click="login.signIn(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Login
</button>
<button type="submit" class="btn btn-success" ng-click="login.signUp(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Register
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.email.$invalid">Email is not valid</h5>
</div>
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid">Password must be atleast 6 digits</h5>
</div>
</div>
</form>
The routes.login.js :
import template from './login.html';
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('login', {
url: '/Login',
template: template,
controller: 'LoginController',
controllerAs: 'login'
});
}
The login controller :
import {createUser} from '../../api/usersApi';
export default class LoginController {
constructor($location, authentication) {
this.location = $location;
this.authentication = authentication;
this.error = '';
}
}
LoginController.$inject = ['$location', 'authentication'];
Thx for the help guys. hope you have any idea how to solve it out.
i think its related to the "sign" and to controller as name "login"
But i still didn't figure it out.

try to change ng-show="login.error" to ng-show="login.sign.error" angular bind the the error to the name of the form
I hope this helped you.

Posting form data from AngularJs frontend to NodeJS RESTful API using restangular

im working on a project and im having troubles posting form data from my angularJS frontend to my backend RESTful API using restangular. each time i try i get a error code 400(bad request). heres my code below
app.js
'use strict';
angular
.module('clientApp', ['ngRoute', 'restangular'])
.config(function ($routeProvider, RestangularProvider) {
RestangularProvider.setBaseUrl('http://127.0.0.1:3000');
$routeProvider
.when('/', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
controllerAs: 'login'
})
.when('/create/user', {
templateUrl: 'views/user-add.html',
controller: 'UserAddCtrl',
controllerAs: 'userAdd'
})
.otherwise({
redirectTo: '/'
});
});
view/user.html
<div ng-controller="UserAddCtrl">
<form class="form-horizontal" name="regForm" ng-submit="saveUser()">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">First Name</label>
<div class="col-md-4">
<input id="Fname" name="Fname" type="text" ng-model="newUser.FnameValue" placeholder="Enter First Name" class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Last Name">Last Name</label>
<div class="col-md-4">
<input id="Lname" name="Lname" ng-model="newUser.LnameValue" type="text" placeholder="Enter Last Name" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Staff ID">Staff ID</label>
<div class="col-md-4">
<input id="StaffId" name="StaffId" ng-model="newUser.StaffIdValue" type="text" placeholder="Enter Staff ID" class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" ng-model="newUser.EmailValue" type="text" placeholder="Enter Email" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" ng-model="newUser.PasswordValue" type="password" placeholder="Enter Password" class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="Register"></label>
<div class="col-md-4">
<button id="Register" name="Register" type="submit" class="btn btn-primary">Creat User</button>
</div>
</div>
</fieldset>
</form>
</div>
controller/user.js
'use strict';
angular.module('clientApp')
.controller('UserAddCtrl', function ($scope, Restangular, $location) {
$scope.saveUser = function() {
$scope.newUser = {};
var restVar = Restangular.all('user');
restVar.post($scope.newUser).then(function() {
$location.path('/users');
console.log('Success');
}, function(response) {
console.log('Error with status code', response.status);
});
};
});
each time i execute the about codes, i get 400(bad request)... what im i doing wrong?
please note that im using mongodb and my db name is isdbmeanapp and my collection name is user, hence my server url is http://127.0.0.1:3000/user

In Restangular posts should be done to collections not elements.
In your case POST should be made like this;
$scope.newUser = {email :"", password: "", etc: ""};
Then make POST request like;
Restangular.all('user').post("users", $scope.newUser);
Reference;
https://github.com/mgonto/restangular#element-methods
Restangular POST form data in json format in Angular JS

Modal state angularjs

I want set modal state using ui-router.I make state:
.state('adminUsers.new', {
url: '/new',
controller: 'adminUsersCtrl',
onEnter: ['$uibModal', '$state', function($uibModal, $state){
$uibModal.open({templateUrl: "administration/users/new.html"})
.result.then(
function(){
$state.go('^');
},
function(){
$state.go('adminUsers');
},
function(){
$state.go('adminUsers');
}
).finally(function(){$state.go('^')});
}]
})
when I go to adminUsers.new state, template normal loaded and showing. In template I have two buttons:
<span class="btn btn-success" ng-click="addUser()">Add user</span>
<a class="btn btn-danger" ui-sref="adminUsers" href="#/admin/users">Cancel</a>
adminUsersController
var adminUsersController = function($scope, Restangular, $stateParams, $state) {
$scope.store = Restangular.all('users');
console.log("adminUsersController");
$scope.store
.getList()
.then(
function(users){
$scope.users = users;
},
function()
{
alertify.log("Не удалось получить список пользователей");
}
)
$scope.addUser = function() {
alert('hello');
}
};
angular
.module('mofs')
.controller('adminUsersCtrl', [
'$scope',
'Restangular',
'$stateParams',
'$state',
adminUsersController
]);
when I clicked to "addUser" button I don't get alert, but when I clicked to "cancel" button modal window not closed, but in browser url changed to #/admin/users. What am i doing wrong? Thank you.
full template code
<div class="modal-content" uib-modal-transclude=""><div class="row no-margin ng-scope">
<h3>
Новый пользователь
</h3>
<form class="form-horizontal ng-pristine ng-valid" id="userForm">
<div class="form-group">
<label class="col-sm-3 control-label" for="user[surname]">
Фамилия
</label>
<div class="col-sm-9">
<input class="form-control" id="user[surname]" name="user[surname]" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[name]">
Имя
</label>
<div class="col-sm-9">
<input class="form-control" id="user[name]" name="user[name]" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[patronimyc]">
Отчество
</label>
<div class="col-sm-9">
<input class="form-control" id="user[patronimyc]" name="user[patronimyc]" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[login]">
Логин
</label>
<div class="col-sm-9">
<input class="form-control" id="user[login]" name="user[login]" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[password]">
Пароль
</label>
<div class="col-sm-9">
<input class="form-control" id="user[password]" name="user[password]" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[password_confirmation]">
Подтверждение пароля
</label>
<div class="col-sm-9">
<input class="form-control" id="user[password_confirmation]" name="user[password_confirmation]" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[role]">
Роль
</label>
<div class="col-sm-9">
<select class="form-control" id="user[role]" name="user[role]">
<option value="1">Администратор</option>
<option value="2">Главный врач</option>
<option value="3">Врач</option>
<option value="4">Сотрудник регистратуры</option>
</select>
</div>
</div>
</form>
</div>
<div class="row no-margin ng-scope">
<div class="pull-right">
<span class="btn btn-success" ng-click="addUser()">Добавить</span>
<a class="btn btn-danger" ui-sref="adminUsers" href="#/admin/users">Отменить</a>
</div>
</div></div>

Along with teplateUrl, you provide controller as property.Like as fallows
$uibModal.open({
animation: true,
templateUrl: 'Your template URL',
controller: 'Your controller',
size: undefined,
resolve : {
// If you have anything to resolve
embedLink : function (){
return embedLink;
}
}
});
Inside your controller add a method which will call on click of cancel button as fallows.
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
Don't forget to have a dependency of uibModalInstance in you controller.
The same you can do inside the same controller on click of addUser button.
Please refer Plunker

AngularJS - Getting 'undefined'

I making a login form with AngularJS. After entering user & password and on clicking the Login button I am trying to retrieve those values. But those are printed as undefined.
My code looks like below.
Javascript
File: app.js
var mdmApp = angular.module('mdmApp', [ 'ngRoute' ]);
mdmApp.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/home', {
templateUrl : 'partials/home.html',
controller : 'homeController'
}).when('/login', {
templateUrl : 'partials/login.html',
controller : 'loginController'
});
}).controller('homeController', function($scope) {
}).controller('loginController', function($scope) {
var user = $scope.user;
var password = $scope.password;
$scope.login = function() {
console.log($scope.user + "-" + $scope.password);
}
})
HTML
File : partials/login.html
<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<form role="form" ng-submit="login()">
<div ng-app="mdmApp" ng-controller="loginController">
<div class="form-group" >
<label for="user" class="control-label">User</label>
<input id="user" type="text" ng-bind="user" class="form-control">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input id="password" type="password" ng-bind="password" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
</div>
</div>
</form>

You should be using ng-model, not ng-bind:
<input id="user" type="text" ng-model="user" class="form-control">
<input id="password" type="password" ng-model="password" class="form-control">