Controller is not working for the bellow code? - angularjs

controller.js code
angular.module('Zoho.controllers', [])
.controller('loginController', function($scope, $state) {
$scope.login = function(loginData) {
console.log(loginData);
}})
.controller('signUpController', function($scope, $state) {
$scope.signUp = function(signUpData) {
console.log(signUpData);
}})
app.js
angular.module('Zoho',
['ui.router','Zoho.controllers','Zoho.services','Zoho.directive'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
$stateProvider
.state('login',{
url: '/login',
templateUrl : 'pages/login.html',
controller : 'loginController'
})
.state('signUp',{
url: '/signup',
templateUrl : 'pages/login.html',
controller : 'signUpController'
});
Here only the login part is executing but signup is not working, Im using both signup and login code in a single page with ng-show and ng-hide methods
login.html
<div class="container-fluid login" ng-show="showDiv">
<div class="col-lg-4 col-sm-12 col-md-4">
<h1 class="title">Login</h1>
<input placeholder="Username" type="text" ng-model="loginData.username" required="required"/>
<input placeholder="Mobile" type="number" ng-model="loginData.mobile" required="required"/>
<button class="btn-signUp" ng-click="login(loginData)">Login <span class="glyphicon glyphicon-log-in"></span></button>
<p>New User <button class="btn-link" ng-click="showDiv=false">SignUp</button></p>
</div>
</div>
<div class="container-fluid login" ng-hide="showDiv">
<div class="col-lg-4 col-sm-12 col-md-4">
<h1 class="title">Register</h1>
<input placeholder="Name" type="text" ng-model="signUpData.name" required="required"/>
<input placeholder="Username" type="text" ng-model="signUpData.username" required="required"/>
<input placeholder="Mobile" type="number" ng-model="signUpData.mobile" required="required"/>
<input placeholder="Email" type="email" ng-model="signUpData.email" required="required"/>
<button class="btn-signUp" ng-click="signUp(signUpData)">SignUp <span class="glyphicon glyphicon-log-in"></span></button>
<p>Already User<button class="btn-link" ng-click="showDiv=true">Login</button>
</div>
</div>

Related

State stop working as soon as i add ng-controller

I am trying to add a controller to this state but as soon as i add the "ng-controller" attribute, this state stops working. I need to login a user as soon as it is authorized through firebase but i am unable to do so because of this issue. Have already initialized the app with ng-app.
<!--Sign In-->
<script type="text/ng-template" id="signin.html">
<ion-view view-title="Sign In">
<ion-content ng-controller="loginCtrl">
<form name="login" novalidate>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="email" placeholder="xyz#something.com" name="email" ng-model="email" ng-minlength="5" required>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="password" placeholder="******" name="pass" ng-model="pass" ng-minlength="6" required>
</label>
</div>
<div class="padding">
<p ng-show="login.email.$error.required && login.email.$dirty && login.email.$touched">*Email is required</p>
<p ng-show="login.email.$invalid && !login.email.$pristine">*Email not valid</p>
<p ng-show="login.pass.$error.required && login.pass.$dirty && login.pass.$touched">*Password is required</p>
<p ng-show="login.pass.$error.minlength">*Password must be longer than 6 characters</p>
</div>
<div class="padding">
<button class="button button-block button-royal" ng-disabled="login.$invalid">Sign In</button>
</div>
</form>
</ion-content>
</ion-view>
</script>
<!--End Sign In-->
And this is the js code for states
app.config(function($stateProvider, $urlRouterProvider){
//main route
$stateProvider.state("main",{
url: "/",
templateUrl: "main.html"
});
//signin route
$stateProvider.state("signin",{
url: "/signin",
templateUrl: "signin.html",
controller: "loginCtrl"
});
//signup route
$stateProvider.state("signup",{
url: "/signup",
templateUrl: "signup.html"
});
$urlRouterProvider.otherwise("/");
})
Controller has to be declared once and it would be cleaner to declare in the config function.So remove ng-controller="loginCtrl" from signin.html

Angularjs ui.router chid states not loading

I've been trying to figure this out for 3 days ....
I have an admin module:
'use strict';
angular.module('aaBlogger.admin',['aaBlogger.admin.controllers']);
angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
$stateProvider.state('admin',{
url: '/admin',
abstract: true,
controller: 'AdminController',
templateUrl: 'modules/admin/views/admin.home.html'
}).state('admin.postNew',{
url: '/post/new',
controller: 'PostCreationController',
templateUrl: 'modules/admin/views/admin.new.post.html'
}).state('admin.postUpdate',{
url: '/post/:id/edit',
controller: 'PostUpdateController',
templateUrl: 'modules/admin/views/admin.update.post.html'
}).state('admin.postViewAll',{
url: '',
controller: 'PostListController',
templateUrl: 'modules/admin/views/admin.all.posts.html'
});
}]
);
Admin home page loads into index.html just fine. However I cant figure out how to load admin.postNew state template into admin.home.html template
Admin home template
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked on-click-make-active">
<li><a ui-sref="admin.postViewAll">View All Posts</a></li>
<li class="active"><a ui-sref="admin.postNew">Add Post</a></li>
</ul>
</div>
<div class="col-xs-9 border-left">
<div ui-view></div>
</div>
</div>
Just in case here is admin.postNew template
<div class="row" ng-controller="PostCreationController">
<div class="col-xs-8">
<form name="newPostForm" class="form-horizontal" novalidaterole='form'>
<div class="form-group" ng-class="{'has-error':postForm.title.$dirty && postForm.title.$invalid}">
<label for="title" class="col-sm-2 control-label">Post Title</label>
<div class="col-sm-10">
<input type="text" name="title" ng-model="post.title" ng-required="true" class="form-control" id="title" placeholder="Title">
<span>Permalink:<i>/posts/[id]/{{post.title | permalink}}</i></span> <br/>
<span class="error-message" ng-show="postForm.title.$dirty && postForm.title.$invalid">Title is mandatory boss!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.content.$dirty && postForm.content.$invalid}">
<label for="content" class="col-sm-2 control-label">Content</label>
<div class="col-sm-10">
<textarea cols="8" rows="6" name="content" class="form-control" ng-model="post.content" ng-required="true" id="content" placeholder="Content"></textarea>
<span>{{post.content | wordcount}} words</span> <br/>
<span class="error-message" ng-show="postForm.content.$dirty && postForm.content.$invalid">You need to have some content!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.tags.$dirty && postForm.tags.$invalid}">
<label for="tags" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
<input type="text" name="tags" class="form-control" id="tags" ng-pattern="/^[\w,]+$/" ng-model="post.tags" placeholder="Comma separated tags"/>
<span class="error-message" ng-show="postForm.tags.$dirty && postForm.tags.$invalid">Sorry! No special characters allowed here.</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.keywords.$dirty && postForm.keywords.$invalid}">
<label for="keywords" class="col-sm-2 control-label">Keywords</label>
<div class="col-sm-10">
<input type="text" name="keywords" class="form-control" id="keywords" ng-pattern="/^[\w,]+$/" ng-model="post.keywords" placeholder="Comma separated keywords"/>
<span class="error-message" ng-show="postForm.keywords.$dirty && postForm.keywords.$invalid">Sorry! No special characters allowed here</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success" ng-disabled="postForm.$invalid">{{buttonText}}</button>
</div>
</div>
</form>
</div>
</div>
I had a similar problem. its solution
admin.home.html must have tag <div ui-view="content"></div>
angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
$stateProvider.state('admin',{
url: '/admin',
abstract: true,
templateUrl: '<div ui-view=""></div>'
})
.state('admin.postNew',{
url: '/post/new',
views: {
'': {
templateUrl: 'modules/admin/views/admin.home.html',
controller: 'AdminController'
},
'content#admin.postNew': {
templateUrl: 'modules/admin/views/admin.new.post.html',
controller: 'PostCreationController'
}
}
})
}]
);

Angular Expression Conflicts with ng-model

I have a modal:
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" name="brandid" value="{{item.brandid}}"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{item.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
and its modal controller:
app.controller("BrandCtrl", function ($scope, $http, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
}
});
var gg = function ($scope, $modalInstance, $http, item) {
$scope.item = item;
$scope.ok = function () {
$http.post('/admin.brands/updateBrandAndGetJSON', {id:$scope.brandid, name:$scope.brandname, isactive:$scope.isactive}).
success(function(data, status, headers, config) {}).
error(function(data, status, headers, config) {});
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
This way I can't get the input values in $http.post in $scope.ok function so I tried add ng-models to form fields in modal
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" ng-model="item.brandid" name="brandid"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" ng-model="item.name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
but now, I can't load values from modal controller to input fields.
ng-model and expression conflicted.
How can I load values from modal controller and get it in ok function ?
Try this,
Remove expressions used
In the controller, after setting $scope.item initiate brandid as $scope.brandid=angular.copy($scope.item.brandid);
Likewise for other fields.
OR
In your current approach you can try giving $scope.$apply() after setting $scope.item; This is an indirect approach. No need to do like this.

angularjs form post http interceptor not working

i am new to angularjs so pardon my ignorance. Here is the interceptor i have for my angularjs app
.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
.factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
return {
// Add authorization token to headers
request: function (config) {
config.headers = config.headers || {};
if ($cookieStore.get('token')) {
config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
}
return config;
},
// Intercept 401s and redirect you to login
responseError: function(response) {
if(response.status === 401) {
$location.path('/login');
// remove any stale tokens
$cookieStore.remove('token');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
};
})
I have an html which posts the data to the server
<form role="form" id="addTeacherForm" data-validate="parsley" action="/api/v1/teacher" method="post">
<h4>Add your Teacher's data</h4>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<input type="text" ng-model="teacher.name" name="name" class="form-control input-md"
placeholder="Name" required="required">
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<input type="date" ng-model="teacher.dob" name="dob" class="form-control input-md"
placeholder="Date Of Birth" required="required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<div class="input-icon"><i class="icon-user"></i>
Teacher's Photo
<input type="file" id="teacherPhoto" name="teacherPhoto" accept="image/*" required="required">
</div>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<div class="form-group">
<input type="text" name="phoneNumber" ng-model="teacher.phoneNumber"
class="form-control input-md" name="phoneNumber"
placeholder="Phone Number(Optional)">
</div>
</div>
</div>
</div>
<div class="form-actions text-center">
<div class="col-xs-12 col-sm-5 col-md-5">
<input type="submit" value="Submit" class="btn btn-primary btn-block btn-md">
</div>
</div>
</form>
Now when i press submit on this form the request goes to the server but the interceptor doesn't get invoked and the request fails because the headers are not populated with the authorization token. Any idea why this is not being intercepted?

navigation from one page to another in angularjs

I know i have already asked the same question but i am getting nowhere with this problem..I am trying to navigate from login page to next page...
login.html
<body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
</br></br>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b></button>
</form>
</div> <!-- /container -->
</div>
</body>
my app file is
'use strict';
//Define Routing for app
var applog = angular.module('myApp',['ngRoute']);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'html/navAng.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: 'html/navAng.html'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
and the controller is
applog.controller("LoginController", function($scope, $location){
$scope.login=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin")
{
$location.path( "html/navAng.html" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
now when i click on the login button the url is getting generated but it just changes the url in the url tab and nothing happens i.e the page is not getting refreshed or navigating to the next page....can someone help plz...
just enter the path not with .html, like this
$location.path( "/login" );

Resources