I found the article from angularcode
and this link is helpful.
But I have some problem with my webpage structure that doesn't want to have the div tag for containing data-ng-view attribute. How do I get data, but no this div tag?
This is some code from the tutorial:
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
I want to separate the structure for each page. What's any method to link to other page instead show like templateURL on data-ng-view but the function of user authentication session still work?
UPDATE
This is my code from my project
Note that I have try templateURL both .html and .php are the same result.
index.php
<div ng-app="myApp" data-ng-view="" id="ng-view"></div>
<toaster-container toaster-options="{'time-out': 3000}"></toaster-container>
<!-- authentification script -->
<script src="/pooh/dist/js/angular.min.js"></script>
<script src="/pooh/dist/js/angular-route.min.js"></script>
<script src="/pooh/dist/js/angular-animate.min.js"></script>
<script src="/pooh/dist/js/toaster.js"></script>
<script src="/pooh/app/app.js"></script>
<script src="/pooh/app/data.js"></script>
<script src="/pooh/app/directives.js"></script>
<script src="/pooh/app/authCtrl.js"></script>
app.js
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/login', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl'
})
.when('/logout', {
title: 'Logout',
templateUrl: '/pooh/login.php',
controller: 'logoutCtrl'
})
.when('/signup', {
title: 'Signup',
templateUrl: 'partials/signup.html',
controller: 'authCtrl'
})
.when('/dashboard', {
title: 'Dashboard',
templateUrl: '/pooh/dashboard.php',
controller: 'authCtrl'
})
.when('/', {
title: 'Login',
templateUrl: '/pooh/login.php',
controller: 'authCtrl',
role: '0'
})
.otherwise({
redirectTo: '/login'
});
}])
.run(function ($rootScope, $location, Data) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
$rootScope.authenticated = false;
Data.get('session').then(function (results) {
if (results.uid) {
$rootScope.authenticated = true;
$rootScope.uid = results.uid;
$rootScope.name = results.name;
$rootScope.email = results.email;
} else {
var nextUrl = next.$$route.originalPath;
if (nextUrl == '/signup' || nextUrl == '/login') {
} else {
$location.path("/login");
}
}
});
});
});
login.php
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/head.php');?>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<b>Pooh</b>Furniture
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form method="post">
<div class="form-group has-feedback">
<input ng-model="login.email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input ng-model="login.password" type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button ng-click="doLogin(login)" data-ng-disabled="loginForm.$invalid" type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<a class="hidden" href="#">I forgot my password</a><br>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.1.4 -->
<script src="/pooh/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/pooh/bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/pooh/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>
dashboard.php
<?php
//check if already logged in move to home page
//if logged in redirect to members page
//if( $user->is_logged_in() ){ header('Location: login.php'); }
?>
<?php $page = 'summary'; ?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/header.php');?>
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/sidebar.php');?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Overall information</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Level</li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php include ($_SERVER['DOCUMENT_ROOT'] . '/pooh/footer.php');?>
some of code from header.php
to show that the body tag has class attribute
<body class="hold-transition fixed skin-blue sidebar-mini">
Related
I want to redirect to another page by clicking a button, but when I click on a button, URL is changed, but it is not redirected, I have to refresh the page with new URL. The same is also happening when I click on link.
locationController.js
angular.module('reservationModule').controller('locationController', function($scope, $location){
$scope.setLocation = function (url) {
$location.path(url);
};
})
reservationModule.js
(function () {
var resModule = angular.module('reservationModule', ['ngRoute']);
resModule.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller
$scope.Message = "Yahoooo! we have successfully done our first part.";
});
resModule.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Index', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Registration', {
templateUrl: '/Home/Registration.cshtml',
controller: 'registerController'
})
.when('/Home/Login', {
templateUrl: '/Home/Login.cshtml',
controller: 'loginController'
})
.otherwise({ redirectTo: '/' });
});
})();
Index.cshtml
#{
// Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Webový rezervační systém";
}
<base href="/">
<div class="container" ng-controller="locationController">
<header class="header">
<div class="headerleft">
<div class="headerlogo">
<img alt="reservation" src="../Content/pics/vetstoria-logo.jpg" width="50" height="50">
</div>
</div>
<div class="headerright">
<p class="headerlogintext">
<a class="btn headerlogin" href="/Home/Login" style="text-decoration:none">Přihlašte se</a>
</p>
</div>
</header>
<div class="content">
<h1 class="content-title">Webový rezervační systém</h1>
<p class="content-title-text">V našem rezervačním systému se můžete rezervovat na cokoliv chcete. Ať už si chcete rezervovat sportoviště, nějaký kurz nebo jiné, u nás to jde snadno.</p>
<p class="content-title-text">Pro začátek vám stačí jediné.</p>
<button class="btn-big" ng-click="setLocation('/Home/Registration')">Registrovat</button>
</div>
<!-- <ul class="menuUl">
<li>#Html.ActionLink("Register", "Registration")</li>
</ul>-->
#section Scripts{
<script src="~/Scripts/Angular_Controllers/locationController.js"></script>
}
I read some topics about this, but I don't know, if an error is in the module, or in the controller.
I had a similar issue. The template url should point to ".html" rather than ".cshtml". When you try to access files inside the Default Folders created by Visual Studio, for some reason you cannot access it. So try changing your path.
I am trying to run the tab in a template, included through ng-view using routes. Unfortunately, when I click on template, it is not working. Please help me to solve the problem. Here is the code:
Index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script></head>
<script src="app.js"></script>
</head>
<body ng-controller="application">
<header>Template 1<br />Template 2</header>
<div ng-view="templateUrl"></div>
</body>
</html>
Template1.html
I am template 1
Template2.html
<div role="presentation" class="text-center" ng-repeat="listitem in patient_tab">
<a href="javascript:void(0)" ng-click="tabClick(clickTab)">
<i class="{{ listitem.patientTab_icon }}" aria-hidden="true"></i> <br />
{{ listitem.patientTab_name }}
</a>
</div>
<ng-include src="patient_template"></ng-include>
I am template 2
ptemplate1.html
I am ptemplate 1
ptemplate2.html
<h2>Patient template 2</h2>
app.js
var medicalapp = angular.module('app', ['ngRoute']);
medicalapp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/template1', {
templateUrl: 'template1.html',
controller: 'template_controller1'
}).
when('/template2', {
templateUrl: 'template2.html',
controller: 'template_controller2'
}).
otherwise({
redirectTo: '/template1'
});
}]);
medicalapp.controller('application', function($scope){
});
medicalapp.controller('template_controller2', function($scope){
$scope.patient_tab= [
{
patientTab_name: 'ptemplate1',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-area-chart'
},
{
patientTab_name: 'ptemplate2',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-file-text'
},
];
$scope.patient_template = 'patient_template1.html';
$scope.tabClick= function(tab){
$scope.patient_template = tab.url;
}
});
thanks Guys.. For help. Answer are:-
Template2.html
<div role="presentation" class="text-center" ng-repeat="listitem in patient_tab">
<a href="javascript:void(0)" ng-click="tabClick(listitem)">
<i class="{{ listitem.patientTab_icon }}" aria-hidden="true"></i> <br />
{{ listitem.patientTab_name }}
</a>
</div>
app.js
var medicalapp = angular.module('app', ['ngRoute']);
medicalapp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/template1', {
templateUrl: 'template1.html',
controller: 'template_controller1'
}).
when('/template2', {
templateUrl: 'template2.html',
controller: 'template_controller2'
}).
otherwise({
redirectTo: '/template1'
});
}]);
medicalapp.controller('application', function($scope){
});
medicalapp.controller('template_controller2', function($scope){
$scope.patient_tab= [
{
patientTab_name: 'ptemplate1',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-area-chart'
},
{
patientTab_name: 'ptemplate2',
url: 'patient_template1.html',
patientTab_icon: 'fa fa-file-text'
},
];
$scope.patient_template = 'patient_template1.html';
$scope.tabClick= function(listitem ){
$scope.patient_template = listitem.url;
}
});
The name or string ng-click="tabClick(listitem)"> i.e listitem should be same for
$scope.tabClick= function(listitem ){
$scope.patient_template = listitem.url;
}
I just started a new app with ionic. my other views are working well but after creating new views since i jump into routing i just see a blank page and i don't get my mistake.
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/vtabs.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/ng-map.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ngstorage/ngStorage.js"></script>
<script src="js/geocode.js"></script>
<script src="js/vtabs.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/angular-local-storage.js"></script>
<script src="js/angular-local-storage.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-messages.min.js"></script>
<!-- <script type="text/javascript">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
// alert("device");
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
alert("image"+imageData);
// Uncomment to view the base64-encoded image data
// console.log(imageData);
alert("photoData");
// Get image handle
// //
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
// alert(smallImage);
// alert(smallImage.src);
// return smallImage.src;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
alert("Photo uri");
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
// //
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
alert("Capture Photo");
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function capturePhotoEdit() {
alert("Capture Edit");
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
alert(source);
alert("get Phot");
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script> -->
</head>
<body ng-app="ionicApp">
<!--
The nav bar that will be updated as we navigate between views.
-->
<!-- <ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar> -->
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<!-- <ion-nav-view></ion-nav-view> -->
</body>
</html>
this is ma app.js file:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('ionicApp', ['ionic', 'ionicApp.controllers','ionicApp.directives', 'ionicApp.services','LocalStorageModule','ngAnimate', 'vTabs','ngCordova','ngMap','geolocate','ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider,localStorageServiceProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('registration', {
url: '/registration',
templateUrl: "templates/registration.html",
controller: 'RegisterCtrl'
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('setting', {
parent: 'app',
url: '^/setting',
views: {
'menuContent': {
templateUrl: "templates/setting.html",
controller: 'SettingCtrl'
}
}
})
.state('app.tasks', {
url: '/tasks',
views: {
'menuContent': {
templateUrl: 'templates/tasks.html',
controller: 'TasksCtrl'
}
}
})
.state('app.task', {
url: '/task/:id',
views: {
'menuContent': {
templateUrl: 'templates/task.html',
controller: 'TaskCtrl'
}
}
// views: {
// 'menuContent': {
// templateUrl: 'templates/task.html',
// controller: 'TaskCtrl'
// },
// 'detail': {
// templateUrl: 'report-table.html',
// controller: function($scope){ console.log("... controller stuff just for detail view ..."); }
// },
// 'note': {
// templateUrl: 'report-graph.html',
// controller: function($scope){ console.log("... controller stuff just for note view ..."); }
// }
// }
})
.state('app.newtask',{
url:'/newtask',
views: {
templateUrl: 'templates/newTask.html',
controller: 'newTaskCtrl'
}
})
.state('app.project', {
url: '/project',
views: {
'menuContent': {
templateUrl: 'templates/project.html',
controller: 'projectCtrl'
}
}
})
.state('app.saleOrder',{
url:'/saleOrder',
views:{
templateUrl:'templates/saleOrder.html',
controller:'saleOrderCtrl'
}
})
.state('app.maps', {
url: '/maps',
views: {
'menuContent': {
templateUrl: 'templates/maps.html',
controller: 'MapsCtrl'
}
}
})
.state('app.map', {
url: '/map/:id',
views: {
'menuContent': {
templateUrl: 'templates/maps.html',
controller: 'MapsCtrl'
}
}
})
.state('app.direction', {
url: '/direction/:id',
views: {
'menuContent': {
templateUrl: 'templates/directions.html',
controller: 'NavigationCtrl'
}
}
})
.state('app.customers', {
url: '/customers',
views: {
'menuContent': {
templateUrl: 'templates/customers.html',
controller: 'CustomersCtrl'
}
}
})
.state('app.customer', {
url: '/customer/:id',
views: {
'menuContent': {
templateUrl: 'templates/customer.html',
controller: 'CustomerCtrl'
}
}
})
.state('app.quotations', {
url: '/quotations',
views: {
'menuContent': {
templateUrl: 'templates/quotations.html',
controller: 'QuotationsCtrl'
}
}
})
.state('app.quotation', {
url: '/quotation/:id',
views: {
'menuContent': {
templateUrl: 'templates/quotation.html',
controller: 'QuotationCtrl'
}
}
})
.state('app.addquotation', {
url: '/addquotation',
views: {
'menuContent': {
templateUrl: 'templates/AddQuotation.html',
controller: 'AddQuotationCtrl'
}
}
})
.state('app.products', {
url: '/products',
views: {
'menuContent': {
templateUrl: 'templates/products.html',
controller: 'ProductsCtrl'
}
}
})
.state('app.product', {
url: '/product/:id',
views: {
'menuContent': {
templateUrl: 'templates/product.html',
controller: 'ProductCtrl'
}
}
})
.state('app.user', {
url: '/user/:id',
views: {
'menuContent': {
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
}
}
})
.state('app.note', {
url: '/note/:id',
views: {
'menuContent': {
templateUrl: 'templates/note.html',
controller: 'AddNoteCtrl'
}
}
})
.state('app.material', {
url: '/material',
views: {
'menuContent': {
templateUrl: 'templates/AddMaterial.html',
controller: 'AddMaterialCtrl'
}
}
})
.state('app.login-into-menucontent', {
url: "/login-into-menucontent",
views: {
'menuContent' :{
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
localStorageServiceProvider
.setPrefix('odoo')
.setStorageType('localStorage')
.setNotify(true, true)
});
and this should be my template (setting.html)
<ion-view view-title="Setting">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<ion-list class="list">
<ion-item class="item item-icon-right" href="#/app/project">
<i class="icon ion-edit"></i>
Add Project
</ion-item>
<ion-item class="item item-icon-right" href="#/app/project">
<i class="icon-remove-sign"></i>
Delete Project
</ion-item>
</ion-list>
</ion-content>
</ion-view>
newTask.html
<ion-view view-title="New task">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- <ion-nav-buttons side="right" >
<button class="button button-icon fa fa-map-marker" ui-sref="app.maps">
</button>
</ion-nav-buttons> -->
</ion-nav-bar>
<ion-content >
<div ng-controller="newTaskCtrl">
<form name="newTaskForm" novalidate="true">
<label class="item item-input ">
<span class="input-label">Task Name</span>
</label>
<input type="text" name="tasknm" ng-model="user.tasknm"></input>
<!-- <h1>{{user.tasknm}}</h1> -->
<label class="item item-input item-select item-light">
<span class="input-label">Employee</span>
<select ng-model="user.selectedItem" ng-options="item.name for item in users">
<option value="">Add New Employee</option>
</select>
</label>
<input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_category" ng-show="!user.selectedItem" type="text" placeholder="new employee name">
<label class="item item-input item-select item-light">
<div class="input-label">Customer</div>
<select ng-model="user.id" ng-options="s as s.name for s in customer" ng-change="changeCust(customer.name)">
<option value="">Add New Company</option>
</select>
</label>
<input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_company" ng-show="!user.id" type="text" placeholder="new employee name">
<button class="button button-calm" ng-disabled="newTaskForm.$invalid" ng-click="save(newTaskForm.$valid)">Save</button>
<button class="button button-stable" ng-click="cancel()">Cancel
</button>
</form>
</div>
</ion-content>
</ion-view>
Your states should be nested states of you main "abstract" state.
.state('app.registration', {
url: '/registration',
templateUrl: "templates/registration.html",
controller: 'RegisterCtrl'
})
I have this AngularJS project where I use ui-router for my routing.
When I run the project through a NodeJS server it all works fine, however I need to move it all to an IIS server, which have more than one application running on it.
Here's my problem: After moving the project to the IIS I can only load one page, whenever I try to go to one of the other pages it returns to the initial one.
This is my setup:
index.html
<!doctype html>
<html ng-app="SimPlannerApp">
<head>
<base href="/simplanner/">
...
<!-- Load AngularJS modules -->
<script src="lib/Angular-1.4.7/angular.min.js"></script>
<script src="lib/Angular-1.4.7/angular-ui-router.min.js"></script>
<!-- Load AngularJS Application -->
<script src="core.js"></script>
...
</head>
<body>
<nav ng-controller="navController">
<div class="col-md-8">
<span class="menu">
<i class="glyphicon glyphicon-menu-hamburger"></i> <span class="hidden-xs">Menu</span>
</span>
<ul>
<li ng-repeat="view in nav">
{{ view.route | capitalize }}
</li>
</ul>
</div>
<span class="clearfix"></span>
</nav>
<!-- This is where page content is inserted to -->
<div class="col-md-8">
<div ui-view></div>
</div>
</body>
</html>
core.js
...
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
var urlBase = '/' + config.IISProjectName;
// For any unmatched url, redirect to '/'
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: "/login",
templateUrl: urlBase + '/views/login.html',
controller: 'loginController'
})
.state('view', {
url: '/view/:view',
templateUrl: urlBase + '/views/view.html',
controller: 'viewController',
resolve: {
view: function ($stateParams, configService) {
for (var i = 0; i < config.views.length; i++) {
if (config.views[i].route === $stateParams.view) {
return config.views[i];
}
}
return undefined;
}
}
})
.state('404', {
url: '{path:.*}',
templateUrl: urlBase + '/views/404.html',
controller: 'errorController'
});
$locationProvider.html5Mode(true);
});
...
I have a situation, I want to redirect user to next page if login is successful.
Else it should stay on login page.
Here is my code where I have set the routing and routeChangeStart listener.
function () {
"use strict";
angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap", "easypiechart", "mgo-angular-wizard", "textAngular", "ui.tree", "ngMap", "app.ui.ctrls", "app.ui.directives", "app.ui.services", "app.controllers", "app.directives", "app.form.validation", "app.ui.form.ctrls", "app.ui.form.directives", "app.tables", "app.map", "app.task", "app.localization", "app.chart.ctrls", "app.chart.directives", "app.tekcapital.authModule"]).config(["$routeProvider", function ($routeProvider) {
return $routeProvider.when("/", {
templateUrl: "web-view/dashboard.html"
}).when("/dashboard", {
templateUrl: "web-view/dashboard.html"
}).when("/pages/features", {
templateUrl: "web-view/pages/features.html"
}).when("/pages/login", {
templateUrl: "web-view/pages/login.html"
}).when("/pages/login_fail", {
templateUrl: "web-view/pages/login_fail.html"
}).when("/pages/create_idn_1", {
templateUrl: "web-view/pages/create_idn_1.html"
}).when("/pages/create_idn_2", {
templateUrl: "web-view/pages/create_idn_2.html"
}).when("/pages/create_idn_3", {
templateUrl: "web-view/pages/create_idn_3.html"
}).when("/pages/create_idn_4", {
templateUrl: "web-view/pages/create_idn_4.html"
}).when("/pages/create_idn_5", {
templateUrl: "web-view/pages/create_idn_5.html"
}).when("/pages/create_idn_6", {
templateUrl: "web-view/pages/create_idn_6.html"
}).when("/pages/create_idn_7", {
templateUrl: "web-view/pages/create_idn_7.html"
}).when("/pages/signin", {
templateUrl: "web-view/pages/signin.html"
}).when("/pages/signup", {
templateUrl: "web-view/pages/signup.html"
}).when("/pages/lock-screen", {
templateUrl: "web-view/pages/lock-screen.html"
}).when("/pages/profile", {
templateUrl: "web-view/pages/profile.html"
}).when("/404", {
templateUrl: "web-view/pages/404.html"
}).when("/pages/500", {
templateUrl: "web-view/pages/500.html"
}).when("/pages/blank", {
templateUrl: "web-view/pages/blank.html"
}).when("/pages/invoice", {
templateUrl: "web-view/pages/invoice.html"
}).when("/pages/services", {
templateUrl: "web-view/pages/services.html"
}).when("/pages/about", {
templateUrl: "web-view/pages/about.html"
}).when("/pages/contact", {
templateUrl: "web-view/pages/contact.html"
}).when("/tasks", {
templateUrl: "web-view/tasks/tasks.html"
}).otherwise({
redirectTo: "/404"
})
}]).run(function($rootScope,$location,UserService){
$rootScope.$on("$routeChangeStart", function(event,next, current){
if(UserService.isLogged == null || !UserService.isLogged){
if(next.templateUrl === "web-view/pages/login.html"){
}else{
$location.path("/pages/login");
}
}
});
});
}.call(this)
Below is my login page
<div class="page page-general" ng-controller="AuthController">
<div class="signin-header">
<div class="container text-center">
<section class="logo">
<span class="logo-icon "><img src="images/assets/logo_RS.png" width="262" height="48" alt="tekcapital" /></span>
</section>
</div>
</div>
<div class="signup-body">
<div class="container">
<div class="form-container">
<section class="row signin-social text-center bg-info" style="padding: 12px 0">
Sign In To Tekcapital IDN
</section>
<span class="line-thru"></span>
<form class="form-horizontal" name="loginForm" novalidate>
<fieldset>
<div class="form-group">
<div class="input-group input-group-lg" style="width:100%;">
<input type="username" class="form-control" placeholder="username" ng-model="loginForm.userName" required>
</div>
</div>
<div class="form-group">
<div class="input-group input-group-lg" style="width:100%;">
<input type="password" class="form-control" placeholder="password" ng-model="loginForm.password" required>
</div>
</div>
<div>{{loginForm.$valid}}</div>
<div class="form-group">
Login
</div>
</div>
</div>
</div>
</div>
And here is my code for service and controller
function () {
"use strict";
angular.module("app.tekcapital.authModule", []).factory("UserService", [function () {
var sdo = {
isLogged: false,
username: ''
};
return sdo;
}]).controller("AuthController", ["$scope", "$http", "UserService", function ($scope, $http, UserService) {
$scope.validUser = "";
$scope.loginForm = {};
$scope.getData = function () {
$http.post("http://localhost:8191/authenticate",{"userName":$scope.loginForm.userName,"password":$scope.loginForm.password})
.success(function(dataFromServer, status, header, config){
console.log("data from server " + dataFromServer);
console.log("User Service " + UserService.isLogged)
if(dataFromServer == "true"){
UserService.isLogged = true;
UserService.username = "Test User Name";
}else{
UserService.isLogged = false;
UserService.username = "";
}
console.log("User Service 2 " + UserService.isLogged)
});
};
}])
}.call(this);
Now the issue is that when I validate for the first time it stays on the login page. And on second successful attempt it redirects to another page.
In case of wrong credentials it is working fine. It stays on login page.
And even when I use $location.path('after/login/page') it moves me to that login page.
But when I open a new tab with "localhost:8191/#/pages/success/ it again takes me to login page.
If I have logged in once then it should not take me to login page.
Need help in this regard.
Regards