The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working.
index.html
<html class="no-js" ng-app="mainApp" ng-controller="MainCtrl">
<head> ....
</head>
<body class="home-page">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
...
signup.html
<div class="form-container col-md-5 col-sm-12 col-xs-12">
<form class="signup-form">
<div class="form-group email">
<label class="sr-only" for="signup-email">Your email</label>
<input id="signup-email" type="email" ng-model="user.email" class="form-control login-email" placeholder="Your email">
</div>
<!--//form-group-->
<div class="form-group password">
<label class="sr-only" for="signup-password">Your password</label>
<input id="signup-password" type="password" ng-model="user.password" class="form-control login-password" placeholder="Password">
</div>
<!--//form-group-->
<button type="submit" ng-click="createUser()" class="btn btn-block btn-cta-primary">Sign up</button>
<p class="note">By signing up, you agree to our terms of services and privacy policy.</p>
<p class="lead">Already have an account? <a class="login-link" id="login-link" ui-sref="login">Log in</a>
</p>
</form>
</div><!--//form-container-->
app.js
angular
.module('mainApp', [
'services.config',
'mainApp.signup'
])
.config(['$urlRouterProvider', function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}])
signup.js
'use strict';
/**
* #ngdoc function
* #name mainApp.signup
* #description
* # SignupCtrl
*/
angular
.module('mainApp.signup', [
'ui.router',
'angular-storage'
])
.config(['$stateProvider', function($stateProvider){
$stateProvider.state('signup',{
url: '/signup',
controller: 'SignupCtrl',
views: {
'header': {
templateUrl: '/pages/templates/nav.html'
},
'content' : {
templateUrl: '/pages/signup/signup.html'
},
'footer' : {
templateUrl: '/pages/templates/footer.html'
}
}
});
}])
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {
$scope.user = {};
$scope.createUser = function() {
$http({
url: 'http://localhost:3001/users',
method: 'POST',
data: $scope.user
}).then(function(response) {
store.set('jwt', response.data.id_token);
$state.go('home');
}, function(error) {
alert(error.data);
});
}
});
There is a working plunker. Firstly, check this Q & A:
Are there different ways of declaring the controller associated with an Angular UI Router state
Where we can see, that
controller does not belong to state. It belongs to view!
This should be the state definition:
$stateProvider.state('signup',{
url: '/signup',
//controller: 'SignupCtrl',
views: {
'header': {
templateUrl: 'pages/templates/nav.html'
},
'content' : {
templateUrl: 'pages/signup/signup.html',
controller: 'SignupCtrl',
},
'footer' : {
templateUrl: 'pages/templates/footer.html'
}
}
});
Check it here
You need a template to bind a controller.
In the docs ui-router Controllers
Controllers
You can assign a controller to your template. Warning: The controller
will not be instantiated if template is not defined.
Related
I have a multi step angular form using ui.router. I have a form html file that loads each step as a view. Each step has a button with a ui-sref link that takes the user to the next step. However it wont show the html 5 validation hints unless I remove the ui-sref. How can I have the validation work while still triggering the ui-sref at the same time?
my main form view:
<form ng-submit="processForm()" name="mortgage">
<div class="row">
<!-- our nested state views will be injected here -->
<div id="form-views" class="small-12 columns" ui-view></div>
</div>
</form>
my view html:
<h3>Please provide some information about your property</h3>
<label for="name">Zip Code</label>
<input type="text" pattern="[0-9]{5}" class="form-control" name="zipcode" type="number" ng-model="formData.zipcode" placeholder="Zip Code" required>
<button ui-sref="form.verify" type="submit" class="next">Next</button>
my controller
angular
.module('angularApp', [
'rzModule',
'btford.modal'
'ui.router'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/form/property-type');
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
controller: 'FormCtrl'
})
.state('form.info', {
url: '/property-info',
templateUrl: 'views/property-info.html'
})
.state('form.verify', {
url: '/property-verify',
templateUrl: 'views/property-verify.html'
})
.controller('FormCtrl', function($scope) {
$scope.formData = {};
$scope.processForm = function() {
console.log($scope.formData);
};
});
I am trying to get the ng-model value from html to controller and getting undefined.
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="uname">User Name</label>
<div class="col-md-7">
<input type="text" ng-model="login.user.name" id="uname" class="username form-control input-sm" placeholder="User name" required ng-minlength="3"/>
</div>
</div>
</div>
<button type="button" ng-click="login.getUser(login.user.name)" class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Login</button>
In Controller I am using the below code,
function getUser(name){
console.log('User Name --> '+$scope.login.user.name+" "+$scope.name+" "+self.user.name +$scope.userName+" "+name);
return LoginService.getUserByName(name);
}
In app.js I am using controller,
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/list',
controller:'UserController',
controllerAs:'ctrl',
resolve: {
users: function ($q, UserService) {
console.log('Load all users');
var deferred = $q.defer();
UserService.loadAllUsers().then(deferred.resolve, deferred.resolve);
return deferred.promise;
}
}
}).state('login', {
url: '/login',
templateUrl: 'partials/login',
controller: 'loginController',
controllerAs:'login'
});
$urlRouterProvider.otherwise('/');
}]);
I am getting undefined in console. Please suggest why I am not able to receive the value.
As i see in your code you using controllerAs syntax. so in your controller probably using var self = this;
to access models in controller use this
console.log('User Name --> '+self.user.name);
I have 4 files, View, a Module, a controller and a factory :
Module : project.module.js
(function () {
'use strict';
angular.module('BlurAdmin.pages.projects', [])
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('projects', {
url: '/projects',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
abstract: true,
title: 'Les projets',
Controller : 'ProjectController',
sidebarMeta: {
icon: 'ion-compose',
order: 250,
},
.state('projects.add', {
url: '/add',
templateUrl: 'app/pages/projects/add/addProject.html',
title: 'Ajouter un projet',
sidebarMeta: {
order: 800,
},
.state('projects.list', {
url: '/list',
templateUrl: 'app/pages/projects/list/listProjects.html',
title: 'List',
sidebarMeta: {
order: 900,
},
});
$urlRouterProvider.when('/projects','/projects/list');
}
})();
Controller : ProjectController.js
(function(){
'use strict';
angular.module('BlurAdmin.pages.projects')
.controller('ProjectController', ProjectController);
function ProjectController($state, $stateParams, $log, $scope, projectFactory) {
<!-- Value to show -->
$scope.addMessage = "see ME";
...}
})();
Factory : projectFactory.js
function(){
'use strict';
angular.module('BlurAdmin.pages.projects')
.factory('projectFactory', projectFactory);
function projectFactory($http, $stateParams) {
var factory = {};
....
}})();
View : addProject.html
<div class="col-md-6">
<div
ba-panel
ba-panel-title="Ajouter un projet"
ba-panel-class="with-scroll">
<form name="ProjectForm" ng-submit="setProject()" ng-init="getProjectById()">
<!-- Value to show -->
Show me the add message : {{addMessage}}
<div class="form-group">
<label for="titre">Titre du projet</label>
<input type="text" class="form-control" id="titre" placeholder="Titre">
</div>
<div class="form-group" ng-controller="datepickerpopupCtrl">
<label>Date de début: <em>{{dt | date:'fullDate' }}</em></label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" datepicker-options="options" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" show-button-bar="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<section class="col-md-6 col-lg-3">
<button progress-button="progressFunction()" pb-style="rotate-side-up" class="btn btn-danger">Submit</button>
</section>
</form>
</div>
</div>
</div>
Now the state is loaded perfectly and everything is working fine but when I try to load a variable from the controller in the View it doesn't show.
And I'm loading the scripts in the index page :
<script src="app/pages/projects/projects.modules.js"></script>
<script src="app/pages/projects/projectFactory.js"></script>
<script src="app/pages/projects/ProjectController.js"></script>
<script src="app/pages/projects/add/addProject.html"></script>
P.S: I have an error and I don't know if it's related or not :
projects.html:2 Uncaught SyntaxError: Unexpected token <
P.S: I'm using this BootsTrap template
I want to implement login system on my angular app using Blur Admin template.
I know there is auth.html but what I want is custom.
My idea is when unauthenticated user open app page, my app will load login.html content which is auth.html content and put in index.html else my app will load main.html which contain dashboard.html container and put in index.html then load dashboard.html.
So in root of my app I have index.html, login.html, main.html
index.html
...
all css component here
...
<body>
<div ui-view style="height: 100%;">
</div>
...
all js component here
...
</body>
login.html just main content of auth.html
<main class="auth-main">
<div class="auth-block">
<h1>Sign in to Blur Admin</h1>
New to Blur Admin? Sign up!
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn-auth">Sign in</button>
<a href class="forgot-pass">Forgot password?</a>
</div>
</div>
</form>
<div class="auth-sep"><span><span>or Sign in with one click</span></span></div>
<div class="al-share-auth">
<ul class="al-share clearfix">
<li><i class="socicon socicon-facebook" title="Share on Facebook"></i></li>
<li><i class="socicon socicon-twitter" title="Share on Twitter"></i></li>
<li><i class="socicon socicon-google" title="Share on Google Plus"></i></li>
</ul>
</div>
</div>
</main>
main.html is main content of index.html before modified.
<div class="body-bg"></div>
<main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $baSidebarService.isMenuCollapsed() }">
<ba-sidebar></ba-sidebar>
<page-top></page-top>
<div class="al-main">
<div class="al-content">
<content-top></content-top>
<div ui-view></div>
</div>
</div>
<footer class="al-footer clearfix">
<div class="al-footer-right">Created with <i class="ion-heart"></i></div>
<div class="al-footer-main clearfix">
<div class="al-copy">Blur Admin 2016</div>
<ul class="al-share clearfix">
<li><i class="socicon socicon-facebook"></i></li>
<li><i class="socicon socicon-twitter"></i></li>
<li><i class="socicon socicon-google"></i></li>
<li><i class="socicon socicon-github"></i></li>
</ul>
</div>
</footer>
<back-top></back-top>
</main>
<div id="preloader" ng-show="!$pageFinishedLoading">
<div></div>
</div>
app/pages/pages.module.js load my other page and authorization check
/**
* #author v.lugovsky
* created on 16.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages', [
'angularCSS', //css lazy load
'ui.router',
'BlurAdmin.pages.dashboard', //dashboard page
'BlurAdmin.pages.transaksi', //my other page
'BlurAdmin.pages.ui',
'BlurAdmin.pages.components',
'BlurAdmin.pages.form',
'BlurAdmin.pages.tables',
'BlurAdmin.pages.charts',
'BlurAdmin.pages.maps',
'BlurAdmin.pages.profile',
])
.config(routeConfig).run(function ($rootScope, $state, authFactory){
$rootScope.$state = $state;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
authFactory.isAuthenticated().then(function (response) {
//authenticated user will go to dashboard
$state.transitionTo('home.dashboard')
}, function (error) {
event.preventDefault();
//unauthenticated user will go to login
$state.transitionTo("login");
});
});
});
/** #ngInject */
function routeConfig($urlRouterProvider, $stateProvider, baSidebarServiceProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'main.html',
authenticate: true,
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
title: 'Login',
authenticate: false,
css: 'app/auth.css' //css lazy load
});
$urlRouterProvider.otherwise('/login');
....
....
....
app/pages/dashboard/dashboard.module.js
/**
* #author v.lugovsky
* created on 16.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.dashboard', [])
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('home.dashboard', {
url: '/dashboard',
templateUrl: 'app/pages/dashboard/dashboard.html',
title: 'Dashboard',
css: 'app/main.css', //css lazy load
sidebarMeta: {
icon: 'ion-android-home',
order: 0,
},
authenticate: true,
});
}
})();
app/pages/transaksi/transaksi.module.js
(function () {
'use strict';
angular.module('BlurAdmin.pages.transaksi', [
'BlurAdmin.pages.transaksi.sewa', //sub menu for transaksi
'ngFileUpload'
])
.config(routeConfig)
function routeConfig($stateProvider){
$stateProvider
.state('home.transaksi', {
url: '/transaksi',
title: 'Transaksi',
sidebarMeta: {
icon: 'ion-grid',
order: 100
}
});
}
})();
app/pages/transaksi/sewa/sewa.module.js routing for sub menu of transaksi
(function () {
'use strict';
angular.module('BlurAdmin.pages.transaksi.sewa', [])
.config(routeConfig);
function routeConfig($stateProvider){
$stateProvider
.state('home.transaksi.sewa', {
url: '/sewa',
templateUrl: 'app/pages/transaksi/sewa/sewa.html', //contain something simple just "this is sewa page"
controller: 'SewaCtrl',
title: 'Sewa',
authenticate: true,
sidebarMeta: {
order: 0
}
});
}
})();
currently I'm authenticated user so when I open http://localhost:3000/account/ redirect to http://localhost:3000/account/#/home/dashboard
But as title says dashboard menu and my custom page transaksi including sub level name sewa doesn't appear like this
I have already check via inspect element maybe it just css problem, unfortunatelly no.
and when I go to http://localhost:3000/account/#/home/transaksi/sewa I redirected to http://localhost:3000/account/#/home/dashboard instead of showing this is sewa page.
Why this thing happen? and how to solve it?
Thanks in advance.
When you are trying to reach this route http://localhost:3000/account/#/home/transaksi/sewa, you will be definitely redirected.
The reason is as below
You have declared individual modules for each and every html page which is not advisable.
Your transaksi.sewa module does not know either the home or the home.transaksi states because the transaksi.sewa is not dependent on transaksi module.
As per your code you made a mistake here as
transaksi is dependendent on the transaksi.sewa module which should be the reverse way.
(function () {
'use strict';
angular.module('BlurAdmin.pages.transaksi', [
/*********************************************************/
'BlurAdmin.pages.transaksi.sewa', //sub menu for transaksi
/*********************************************************/
'ngFileUpload'
])
.config(routeConfig)
function routeConfig($stateProvider){
$stateProvider
.state('home.transaksi', {
url: '/transaksi',
title: 'Transaksi',
sidebarMeta: {
icon: 'ion-grid',
order: 100
}
});
}
})();
Replace that with this.
(function () {
'use strict';
angular.module('BlurAdmin.pages.transaksi.sewa', [
/*********************************************************/
'BlurAdmin.pages.transaksi', //root menu for transaksi.sewa
/*********************************************************/
'ngFileUpload'
])
.config(routeConfig)
function routeConfig($stateProvider){
$stateProvider
.state('home.transaksi', {
url: '/transaksi',
title: 'Transaksi',
sidebarMeta: {
icon: 'ion-grid',
order: 100
}
});
}
})();
Child is dependent on parent where as Parent should not be dependent
on the child
Let me know if there are further help needed! :)
I am trying give dynamic link from my models which names are "aracData.planlama".
There is no problem on this. But when I click the link I get "could not resolve from state" error on console.
<div class="form-group">
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="sifirmi">
Araç satın alınmış durumda
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="satin-alinacak">
Satın alınması planlanıyor
</label>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.{{aracData.planlama}}" class="btn btn-block btn-info" ng-class="{disabled:aracData.planlama == undefined}">
Sonraki adım <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
And theese are my routing codes:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
.state('form.sifirmi', {
url: '/sifirmi',
templateUrl: 'sifir-mi-ikinci-el-mi.html'
})
.state('form.alindimi', {
url: '/alindimi',
templateUrl: 'alindi-mi.html'
})
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
$urlRouterProvider.otherwise('/form/profile');
})
How can I fix this?
You can't pass an expression to ui-sref for the state name. Instead, you can do this in the controller.
<a ng-click="go(aracData.planlama)">
Inject the $state service into your controller, then do:
$scope.go = function(sub) {
$state.go('form.'+sub);
};
This will probably also work:
$scope.go = $state.go; // may need to do $state.go.bind($state);
<a ng-click="go('form'+aracData.planlama)">
Click here for GitHub discussion about dynamic state name for ui-sref.