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! :)
Related
Please help me,
I was get an error when loading partialy template view and controller in angularjs using lazyload.
I got these error message:
Error: ng:areq
Bad Argument
Argument 'meSygroupController' is not a
How to fix it, when I will build big project, so its imposible to load all javascript controller in one time while load first page. And how to apply new controller to existing module
Here some codes :
Filename : angular-app.js
var colorAdminApp = angular.module('colorAdminApp', [
'ui.router',
'ui.bootstrap',
'oc.lazyLoad'
]);
colorAdminApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app/dashboard/v2');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'demo?page=template/app',
abstract: true
})
.state('app.sys', {
url: '/system',
template: '<div ui-view></div>',
abstract: true
})
.state('app.sys.sygroup', {
url: '/sygroup',
templateUrl: 'me_sygroup',
// controller: "meSygroupController",
data: { pageTitle: 'Master Grup Akses' },
resolve: {
service: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'me/meSygroupController.js',
'coloradmin/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.css',
]
});
}]
}
})}]);
colorAdminApp.run(['$rootScope', '$state', 'setting', function($rootScope, $state, setting) {
$rootScope.$state = $state;
$rootScope.setting = setting;
}]);
And here template :
<div ng-controller="meSygroupController" class="frm">
<!-- <div> -->
<ol class="breadcrumb pull-right">
<li>Beranda</li>
<li>Sistem</li>
<li class="active">Grup User</li>
</ol>
<h1 class="page-header">Grup User <small>kelompok otorisasi user...</small></h1>
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
<i class="fa fa-repeat"></i>
<i class="fa fa-minus"></i>
<i class="fa fa-times"></i>
</div>
<h4 class="panel-title">Daftar Grup User</h4>
</div>
<div class="panel-body">
Panel Content Here
</div>
</div>
<!-- end panel -->
</div>
And here the controller
colorAdminApp.controller('meSygroupController', function($scope, $rootScope, $state) {
angular.element(document).ready(function() {});
$scope.test = function() { alert(111); }
$scope.test();
});
Please Helpme.
Arif Diyanto
I wrote a code for for my app, when a I click on the toggle to reach the second page, the url changes it took me there but nothing is appeared, just a blank page no more,
here is the app.js code
angular.module("BloodDonationApp", [
"ionic",
])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.keyboard) {
cordova.plugins.keyboard.hidekeyboardAccessoryBar(true);
}
if (window.statusBar) {
//org.apache.cordova.statusbar required
statusbar.styleDefault();
}
});
})
//****************ROUTES***************//
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
abstarct: true,
url: "/home",
templateUrl: "templates/home.html"
})
.state('home.feeds', {
url: "/feeds",
views: {
"tab-feeds": {
templateUrl: "templates/feeds.html"
}
}
})
.state('home.settings', {
url: "/settings",
views: {
"tab-settings": {
templateUrl: "templates/settings.html"
}
}
})
.state('requestDetails', {
url: "/RequestDetails/:id",
view: {
"mainContent": {
templateUrl: "templates/requestDetails.html"
}
}
})
.state('requestDetails.ClientRegister', {
url: "/Client-Register/:id",
view: {
"mainContent": {
templateUrl: "templates/ClientRegister.html"
}
}
});
//if name of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home/feeds');
})
and here is the html code of the feeds page:
<ion-view ng-controller="FeedsCtrl as vm">
<ion-content class="has-header">
<div class="card" ng-repeat="requests in vm.feeds">
<div class="item item divider" ng-click="toggleGroup(requests)"
ng-class="{active: isGroupShown(requests)}">
<div class="row row-bottom">
<div class="col">
{{requests.type}}
</div>
<div class="col">
{{requests.unitNb}} Units
</div>
</div>
</div>
<div class="item-accordion"
ng-show="isGroupShown(requests)" ng-click="goToDetails()">
<div class="row">
<div class="col-top">
Since 7 s{{requests.Date}}
</div>
<div class="col col-center col-50 col-offset-8">
<br/>{{requests.HospName}}
<br/>
{{requests.Hosplocation}}
</div>
<div class="col col-bottom">
<a class="item item-icon-right">
<div class="row">
<i class="ion-icon ion-pinpoint "></i>
</div>
<div class="row">
{{requests.HospDistance}}4km
</div>
</a>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
and the controller for feeds:
(function () {
'use strict';
angular.module('BloodDonationApp')
.controller('FeedsCtrl', ['BloodDonationApi', '$scope', '$state', FeedsCtrl]);
function FeedsCtrl(BloodDonationApi, $scope, $state) {
var vm = this;
//start Data Binding functions//
var data = BloodDonationApi.getRequests();
console.log(data);
vm.feeds = data;
//end Data Binding//
//start Accordion function//
$scope.toggleGroup = function (requests) {
if ($scope.isGroupShown(requests)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = requests;
}
}
$scope.isGroupShown = function (requests) {
return $scope.shownGroup === requests;
}
$scope.goToDetails = function() {
$state.go('requestDetails', {id : 5});
}
//end Accordion function//
};
})();
but the request details is not appeared after clicking on the toggle its just give a blanck page, the html code :
<ion-view ng-controller="RequestDetailsCtrl as vm">
<ion-content class="has-header">
<div class="card">
<div class="item">
<div class="row">
<div class="col">
{{requests.type}}
</div>
<div class="col">
{{requests.unitNb}} Units
</div>
</div>
<div class="row">
<div class="col">
{{requests.HospName}}
</div>
<div class="col">
{{requests.Hosplocation}}
</div>
<div class="col">
4 Km Away
</div>
</div>
<button class="button button-block button-positive">
Yes, I donate <i class="ion-icon ion-thumbsup"></i>
</button>
<label>
4/5 <i class="ion-icon ion-battery-half"></i>
</label>
<div class="title">
<h3>
Last time I'd donated was since<br /> 4 months
<i class="ion-icon ion-checkmark-round"></i>
</h3>
</div>
</div>
</div>
</ion-content>
</ion-view>
the controller:
(function () {
'use strict';
angular.module('BloodDonationApp')
.controller('RequestDetailsCtrl', ['BloodDonationApi', '$stateParams', '$scope', RequestDetailsCtrl]);
function RequestDetailsCtrl(BloodDonationApi, $stateParams, $scope) {
var vm = this;
var data = BloodDonationApi.getRequests();
console.log(data);
vm.requestDetails = data;
console.log("$stateParams", $stateParams.id);
//end Data Binding//
// Get you request
};
})();
am sure that there is an error with the view code, but m not figuring it out, if anybody can help me plz.
You are inside a nested state when you are tying to load requestDetails so change your state to :
.state('requestDetails', {...})
.state('home.requestDetails', {
url: "/feeds/:id",
views: {
'tab-feeds' :{
templateUrl: "templates/requestDetails.html"
}
}
})
and your method to:
$scope.goToDetails = function() {
$state.go('home.requestDetails', {id : 5});
}
and It's working !
I've fork your git so updated working version is here if you want to pull
So I have no idea what is wrong, but im assuming i have a loop running in the background of my code or that im routing incorrectly. But all i know is when i try to go to my index page, my entire browser is taken down, no errors or anything, just crashing. Any help would really be appreciated im just trying to move on from this problem.And in case this changes anything i am using a rails backend.
planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home/nav.html',
authenticate: true
})
.state('home.index', { // our home page
url: '/index',
views: {
"": {templateUrl: 'templates/home/home.html'},
"assembly#index": { templateUrl: "templates/home/assembly.html" },
"client#index": { templateUrl: "templates/home/client.html" },
"photoplan#index": { templateUrl: "templates/home/home_photoplan.html" }
},
authenticate: true
})
Here is the main routes causing problems, the home one is just a nav bar, and when you go to the home tab its supposed to take you to the index page, but no dice. Im not sure how much of my controller i should show, but here a small part.Its the parts that directly effect the routes.
app.run(function ($rootScope,$location, $localStorage){
$localStorage.recent = ""
$rootScope.$on('$routeChangeSuccess', function() {
console.log("working")
recent.push($location.$$path);
});
});
app.run(function ($rootScope, $state, AuthService) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authenticate && !AuthService.isAuthenticated()){
// User isn’t authenticated
console.log(AuthService.isAuthenticated())
$state.transitionTo("login");
event.preventDefault();
}
});
});
// GET request Area
$http.get('client.JSON').success(function(data){
$scope.clients = data;
});
$http.get('photoplan.JSON').success(function(data){
$scope.photoplans = data;
$scope.complete = true;
// if(main.photoplans.plano_order_status === "Complete"){
// console.log()
// $scope.complete = true;
// }else{
// $scope.complete = false;
// }
});
$http.get('assembly.JSON').success(function(data){
// main.assemblys = $filter('filter')(data, function(d){return d.employee_id == mainid});
$scope.assemblys = data;
console.log($scope.assemblys)
});
$http.get('employee.JSON').success(function(data){
$scope.employees = data;
});
}]);
This is the index page, and one of the nested views it has, all the views look roughly the same.
<div class="container" ng-controller="MainCtrl">
<!-- Main Section -->
<div class="home no-subheader container">
<div class="row" >
<!-- left -->
<section name="assembly-queue" class="molding col-md-4" id="assembly">
<div class="gutter" >
<div ui-view="assembly"> </div>
</div>
</section>
<!-- <section name="employee-queue" ng-if="type === 'admin'" class="molding col-md-4" id="employee">
<div class="gutter" id="scrollArea">
<div ui-view=".employee"></div>
</div>
</section> -->
<!-- middle -->
<section name="clients" class="molding col-md-4" id="clients">
<div class="gutter" >
<div ui-view="client"> </div>
</div>
</section>
<!-- right -->
<section name="photoplans" class="molding col-md-4" id="photoplans">
<div class="gutter" >
<div ui-view="photoplan"> </div>
</div>
</section>
</div>
</div>
</div>
This is the assembly page.
<div id="expanding" >
<div class="top row">
<h2> Assembly Queue</h2>
<form class="navbar-form navbar-left default" role="search">
<div class="form-group">
<input type="text" ng-model="searchassembly" class="form-control query" placeholder="Search Assembly Queue">
</div>
</form>
</div>
</div>
<article class="assembly snippet row" ng-repeat="assembly in assemblys|filter:searchassembly" >
<div class="left col-xs-7" >
<address>{{assembly.address_part1}},{{assembly.address_part2}}</address>
<p class="timeline-data"> Due on {{assembly.date_due}}</p>
<p class="timeline-data"> Job Type: {{assembly.job_type}}</p>
<p class="timeline-data"> Delivery Type: {{assembly.delivery_type}}</p>
</div>
<div class="right col-xs-5 text-center">
<div class="corner-ribbon" ng-click="open(assembly.id)" > </div>
<button ng-if="assembly.new_order" class="btn btn-default" ui-sref="photoplans({ id : assembly.photoplan_id })" ><span class="fa fa-pencil-square-o" aria-hidden="true"></span></button>
<button ng-if="assembly.new_order === false" class="btn btn-default" ui-sref="assign({address : assembly.address, realtor: assembly.realtor})" ><span class="fa fa-external-link" aria-hidden="true"></span></button>
</div>
</article>
If anyone has had similar issues or can see red flags in this please let me know, i am really stuck on this issue.
Okay so i actually found the answer myself, and im leaving the solution here for future people who might have this issue. But basically i need to have word of some kind in my home route, so instead of just /, i need /home. Because the browser was trying to load this #//index, and that was causing crashes. When using rails and angular together, make sure to have named routes to prevent this problem. Also make sure your nested views look like this, whatever#parent.child. Heres my new code.
planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home/nav.html',
authenticate: true
})
.state('home.index', { // our home page
url: '/index',
views: {
"": {templateUrl: 'templates/home/home.html'},
"assembly#home.index": { templateUrl: "templates/home/assembly.html" },
"client#home.index": { templateUrl: "templates/home/client.html" },
"photoplan#home.index": { templateUrl: "templates/home/home_photoplan.html" }
},
authenticate: true
})
I have an angular web app that I am trying to get escaped_fragments to work using Mean-seo (under the covers it uses phantomjs headless browser)
I am getting strange behaviour I can't explain.
The non escaped fragment works fine.
With escaped fragments some of the content immediately disappears.
I have an object that I am reading from the mongo db in the resolve section of the routes config like so.
state('view-creator-test', {
url: '/view-creator-test/:creatorId',
templateUrl: 'modules/creators/views/view-creator-test.client.view.html',
resolve: {
creator: function($stateParams, Creators) {
return Creators.get({
creatorId: $stateParams.creatorId
}).$promise;
}
},
controller: function($scope, creator) {
$scope.resolveCreator = creator;
}
}).
then the view template is
<section data-ng-controller="CreatorTestController" >
<!-- !CREATOR PROFILE -->
<section class="profile-header inverse">
<div class="container">
<!-- AVATAR -->
<div class="row">
<!-- NAME / LOCATION -->
<div class="col-sm-8 col-sm-offset-1 col-xs-12 text-center-sm">
<div class="row">
<div class="col-sm-6 col-xs-12">
<h2 class="name">{{creator.name}}</h2>
<h2 class="name" ng-bind="creator.name"></h2>
</div>
<h2 class="name">{{test}}</h2>
<h2 class="name" ng-bind="test"></h2>
</div>
</div>
</div>
</div>
</section>
</section>
then the controller is
'use strict';
angular.module('creators').controller('CreatorTestController', ['$scope',
function($scope) {
$scope.test = 'Leo was Here';
$scope.creator = $scope.resolveCreator;
}]);
the result is that the creator name is filled in for {{creator.name}} but is not filled in for ng-bind="creator.name".
'Leo was here' is filled in for both.
Thanks
Instead of defining controller function in state and then do assign that $scope inside variable through template, you could place the CreatorTestController inside the route, so that you directly inject the dependency inside the CreatorTestController function, Remove ng-controller from the template
.state('view-creator-test', {
url: '/view-creator-test/:creatorId',
templateUrl: 'modules/creators/views/view-creator-test.client.view.html',
resolve: {
creator: function($stateParams, Creators) {
return Creators.get({
creatorId: $stateParams.creatorId
}).$promise;
}
},
controller: 'CreatorTestController'
})
Controller
'use strict';
angular.module('creators').controller('CreatorTestController', ['$scope', 'creator', //<-- injected resolve method here.
function($scope, creator) {
$scope.test = 'Leo was Here';
$scope.creator = creator;
}]);
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.