Having an login.html it has SignUp Button while click on it its not opening the signup.html page
index.html
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-calm">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
login.html
<ion-view view-title="Sign-In" name="login-view">
<ion-content class="padding">
<button class="button button-block button-positive" ng-click="signup()">SignUp</button>
</ion-content>
</ion-view>
app.js
angular.module('starter', ['ionic', 'ngMockE2E','ui.router'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider, USER_ROLES) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
})
$urlRouterProvider.otherwise('/login');
})
controller.js
.controller('AppCtrl', function ($scope, $state, $ionicPopup, AuthService, AUTH_EVENTS) {
$scope.username = AuthService.username();
$scope.$on(AUTH_EVENTS.notAuthorized, function (event) {
var alertPopup = $ionicPopup.alert({
title: 'Unauthorized!',
template: 'You are not allowed to access this resource.'
});
});
$scope.$on(AUTH_EVENTS.notAuthenticated, function (event) {
AuthService.logout();
$state.go('login');
var alertPopup = $ionicPopup.alert({
title: 'Session Lost!',
template: 'Sorry, You have to login again.'
});
});
$scope.setCurrentUsername = function (name) {
$scope.username = name;
};
})
.controller("SignupCtrl", function ($scope, $state, $ionicPopup, AuthService) {
$scope.data = {};
$scope.signup = function () {
$state.go('singup');
};
})
.controller('LoginCtrl', function ($scope, $state, $ionicPopup, AuthService) {
$scope.data = {};
$scope.login = function (data) {
AuthService.login(data.username, data.password).then(function (authenticated) {
$state.go('main.dash', {}, { reload: true });
$scope.setCurrentUsername(data.username);
}
};
})
and inside the templates folder is having signup.html
<ion-view view-title="Signup" name="Signup-view">
<ion-content padding="true" class="has-header">
<form id="signup-form2" class="list ">
// sign up fields goes here.....
<a ui-sref="login" id="signup-button5" style="border-radius:15px 15px 15px 15px;" class="button button-calm button-block" ng-click="signupEmail(data)">Sign up</a>
</form>
</ion-content>
</ion-view>
I think you are missing the state change function in your LoginCtrl. So you should have it declared in the LoginCtrl because that controller is used in the login.html.
.controller("LoginCtrl", function ($scope, $state) {
$scope.signup = function () {
$state.go('signup');
};
})
Also consider that in your example code you had a typo in the $state.go function. Your state name is singup when it should be signup.
Related
I am trying to access an http get response called during route change using ui route. The resolve itself happens but i am unable to access the response. I have tried some approaches in "listcontroller" which is shown. I am using a sample httpget url found in the internet for test. Angular version: v1.2.32. ui-route: 1.0.15.
script.js
var app = angular.module("Rasp", ["ui.router"])
.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("ipList", {
url: "/ipList",
templateUrl: "templates/list.html",
controller: "listController",
resolve: {
SensorIP : function($http){
$http.get('https://httpbin.org/ip')
.then(function(response){
console.log('res');
console.log(response);
return response.data.origin;
});
}
}
})
.state("home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "homeController"
});
}])
.controller("RaspController", ['$scope', '$http', function ($scope, $http) {
$scope.getDetails = function () {
// $http.get('https://httpbin.org/ip')
// .then(function (response) {
// console.log(response);
// $scope.response = response;
// },
// function (error) { console.log(error); }
// );
// };
}])
.controller("homeController", ['$scope', function ($scope) {
}])
.controller("listController", ['$scope','SensorIP',function ($scope,SensorIP) {
$scope.sensorList = SensorIP;
var vm = this;
this.list1 = SensorIP;
var logfunc = function() {console.log($scope.sensorlist)};
}])
list.html
<div>
{{list1}}
{{sensorlist}}
<button class="btn btn-danger navbar-btn" ng-click="logfunc()">click</button>
</div>
home.html
<h4>Click on "Get IP List" to get the list of IPs</h4>
<a ui-sref="ipList"><button id="button" >Get IP List</button></a>
index.html
<!DOCTYPE html>
<head>
<title>Title(To be changed)</title>
<!--JS-->
<script type="text/javascript" src="../node_modules/angular/angular.js"></script>
<script type="text/javascript" src="../node_modules/#uirouter/angularjs/release/angular-ui-router.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- -->
<!--CSS-->
<link rel="stylesheet" href="../css/style.css">
<!-- -->
</head>
<body>
<div ng-app="Rasp">
<div ng-controller="RaspController">
<div class="sidenav">
<!--
<a ui-sref="home" id="dot-button"><button class="btn btn-danger navbar-btn" >Home</button></a>
<a ui-sref="ipList" id="dot-button"><button class="btn btn-danger navbar-btn" >IP List</button></a>
-->
<a ui-sref="home">home</a>
<a ui-sref="ipList" >ipList</a>
</div>
<div>
<ui-view id="uiview"></ui-view>
</div>
</div>
</div>
</body>
I would like to add link with controller to route but controller does not work.
I get this:
{{title}}
{{shortTitle}}
{{text}}
If I will put controller only to html also does not work
but when I added script to main controller in Default.html controller working correct
Where I made mistake?
#SSH this not work
$stateProvider
.state('home', {
url: '/',
template: '<div data-ng-include="'Scripts/js_angular_project/website/home/homePage.html'"></div>',
controller: 'homeCtrl'
})
homePage.html
<div>
<h2>{{title}}</h2>
<h3>{{shortTitle}}</h3>
<p>{{text}}</p>
</div>
<script>
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
</script>
#SSH this also does not work
$stateProvider
.state('home', {
url: '/',
templateURL: '/Scripts/js_angular_project/website/home/homePage.html',
controller: 'homeCtrl'
})
homePage.HTML - I remove ng-controller
<div>
<h2>{{title}}</h2>
<h3>{{shortTitle}}</h3>
<p>{{text}}</p>
</div>
<script>
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
</script>
#SSH this not work when I put my code
.html
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
controller:'homeCtrl'
})
.state('about', {
url: '/about',
template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
controller:'aboutCtrl'
})
});
routerApp.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
routerApp.controller('aboutCtrl', function ($scope) {
$scope.title = "Volvo2";
$scope.shortTitle = "Volvo2";
$scope.text = "example2";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
</div>
you should put controller name in router and also remove ng-controller = "homeCtrl" from template.
state('home' ,{
url : '/',
templateUrl:'/yourTempalteAddress',
controller:'homeCtrl'
})
and define your app in controller.
var app = angular.module("yourApp",[]);
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
This is the first time I tried AngularUI Modal.
There is a constant error: controller as vm is not a function, got undefined.
Here is my Partial:
<div class="container" ng-controller="controller as vm">
<script type="text/ng-template" id="hello.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
hello
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="vm.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="vm.cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="vm.open()">Open me!</button>
Controller:
app.controller('controller',[function($uibModal,$log)
{
var vm = this;
vm.animationsEnabled = true;
vm.open = function () {
var modalInstance = $uibModal.open({
animation: vm.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'hello.html',
controller: 'Modalcontroller',
//controllerAs: 'vm',
})
};
}]);
app.js
var app=angular.module("myapp",['ui.router', 'ui.bootstrap']);
...
.state("user", {
url: "/user",
views: {
"main": {
templateUrl: "partials/user.html",
controller: "controller",
controllerAs: "vm",
}
}
});
i have created the plunkr. Please have a look
(https://plnkr.co/edit/6fx26BVrXu0ud8TkvrMq?p=preview)
myApp.controller('ModalController', ['$scope', '$uibModalInstance', '$uibModal', '$state', function($scope, $uibModalInstance, $uibModal, $state) {
var self = this;
self.cancel = function(){
$uibModalInstance.dismiss();
};
}]);
myApp.controller('userController', ['$scope', '$uibModal', '$state', function($scope, $uibModal, $state) {
var self = this;
self.animationsEnabled = true;
self.open = function(){
var modalInstance = $uibModal.open({
animation: self.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'hello.html',
controller: 'ModalController',
controllerAs: 'vm'
});
};
}]);
In my angular-message application I have an option to choose message from template.
I need open the template list as modal.
My problem is that I have a template list as controller + view
How can I open the view without to duplicate my template list code.
$stateProvider
.state('app', {})
.state('app.email', {
}).state('app.email.compose', {
url: '/compose',
data: {
pageTitle: 'Email Compose'
},
templateUrl: 'Assets/app/templates/email_compose.html'
})
.state('app.manage', {
})
.state('app.manage.templates', {
template: '<div ui-view></div>',
url: '/templates',
abstract: true
})
.state('app.manage.templates.list', {
url: '/',
data: {
pageTitle: 'Email List'
},
templateUrl: 'Assets/app/templates/tamplate_list.html'
});
In my app route I want to open the app.manage.template.list
from app.email.compose as modal
How can I do it?
This can easily be done using UI-Bootstrap: https://angular-ui.github.io/bootstrap/ A walkthrough:
Load the Bootstrap CSS asset, note you don't need the JS and jQuery:
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
Load the UI-Bootstrap asset:
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
Inject the ui.bootstrap module in your application:
angular.module('app', [
'ui.router',
'ui.bootstrap'
]);
Use the onEnter method of your state definition to open a new modal:
.state('myModalState', {
'url': '/myModalUrl',
'onEnter': [
'$uibModal',
function ($uibModal) {
$uibModal.open({
'controller': 'myModalController',
'templateUrl': 'myModalTemplate.html'
}).result.then(
function closed (item) {
// Executed when uibModalInstance is closed, returns value
},
function dismissed () {
// Executed when modal is dismissed/canceled
}
);
}
]
});
Create a controller for your modal and inject $uibModalInstance:
.controller('myModalController', [
'$scope', '$uibModalInstance',
function ($scope, $uibModalInstance) {
$scope.item = 'foobar';
$scope.ok = function () {
$uibModalInstance.close($scope.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
]);
And finally a template for the modal:
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div><!-- /.modal-header -->
<div class="modal-body">
{{item}}
</div><!-- /.modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="cancel()">
Cancel
</button>
<button type="button" class="btn btn-success" ng-click="ok()">
Ok
</button>
</div><!-- /.modal-footer -->
Now everytime you visit /myModalUrl or ui-sref or state.go to myModalState the modal automaticly opens.
Stacksnippet:
angular.module('app', [
'ui.router',
'ui.bootstrap'
]);
angular.module('app').config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('root', {
url: '/',
templateUrl: 'root.html',
});
$stateProvider.state('modal', {
url: '/modal',
onEnter: [
'$uibModal', '$state',
function ($uibModal, $state) {
$uibModal.open({
'controller': 'modal',
'templateUrl': 'modal.html',
}).result.then(
function closed (item) {
// Executed when uibModalInstance is closed, returns value
$state.go('root');
},
function dismissed () {
// Executed when modal is dismissed/canceled
$state.go('root');
}
);
}
]
});
}
]);
angular.module('app').controller('modal', [
'$scope', '$uibModalInstance',
function ($scope, $uibModalInstance) {
$scope.item = 'foobar';
$scope.ok = function () {
$uibModalInstance.close($scope.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" />
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script type="text/ng-template" id="root.html">
<a ui-sref="modal">Open route in modal</a>
</script>
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
{{item}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="cancel()">
Cancel
</button>
<button type="button" class="btn btn-success" ng-click="ok()">
Ok
</button>
</div>
</script>
</head>
<body ui-view></body>
</html>
Plunker: http://plnkr.co/edit/5qrD7hB6i8vQEqa8jZ1G?p=preview
UI-Router FAQ on opening a modal when entering a state (mind you it's outdated because of some changes to the UI bootstrap modal directive):
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state
And here's the reference for UI-Bootstrap's modal directive:
https://angular-ui.github.io/bootstrap/#/modal
I resolve it by adding route as "child" from another state, that refer to same templateUrl templateUrl: 'Assets/app/templates/tamplate_list.html'
$stateProvider
.state('app.email.compose', {
url: '/compose',
data: { pageTitle: 'Email Compose' },
templateUrl: 'Assets/app/templates/email_compose.html'
}).state('app.email.compose.template', {
url: '/template',
data: { pageTitle: 'Email Compose', modal: true },
parent: 'app.email.compose',
templateUrl: 'Assets/app/templates/tamplate_list.html'
}).state('app.manage.templates.list', {
url: '/',
data: { pageTitle: 'Email List' },
templateUrl: 'Assets/app/templates/tamplate_list.html'
});
My controller gets called twice when I am using angular material tabs.
The tabs:
<div layout="column" flex="">
<md-content id="content">
<md-tabs md-dynamic-height="" md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
<md-tab label="Home" ui-sref="home">
<div ui-view=""></div>
</md-tab>
<md-tab label="Contact" ui-sref="contact">
<div ui-view=""></div>
</md-tab>
</md-tabs>
</md-content>
</div>
The controllers:
(function () {
'use strict';
angular
.module('app.contact')
.controller('ContactController', ContactController);
function ContactController() {
var vm = this;
activate();
function activate() {
console.log('Contact Controller');
}
}
})();
(function () {
'use strict';
angular
.module('app.home')
.controller('HomeController', HomeController);
function HomeController() {
var vm = this;
activate();
function activate() {
console.log('Home Controller');
}
}
})();
The states:
(function () {
'use strict';
angular.module('app', [
])
.config(configBlock);
function configBlock($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.html",
controller: 'HomeController',
controllerAs: 'vm'
})
.state('contact', {
url: "/contact",
templateUrl: "contact.html",
controller: 'ContactController',
controllerAs: 'vm'
});
}
})();
Plunker
This is, because you are using ui-view two times.
i also hav the same issue
use the ng-include instead of the ng-view
<md-tab label="Issues" >
<ng-include src="'/app/src/project/task/task.tpl.html'"></ng-include>
<!-- <div ui-view></div> -->
</md-tab>