I am having an issue with angular-ui-router. I'm not getting any errors and still I'm not able to see partials template. Moreover, it's not redirecting to '/' as well as if I change to '/home', its not working.
Below is piece of my code,
angular.module('SampleApp', ['ui.router']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/partial-home.html'
})
.state('about', {
// about page
});});
here is the html code of main page
<div id="container">
<div id="header">
<img src="images/logo.png" height="40" />
<div id="header_left">
<img src="images/browse.png" />Categories
</div>
<div id="categories_menu"><p>Mobiles</p><p>Tablets</p>
</div>
<div id="search">
<input type="text" id="searchbox" name="searchbox" placeholder="Search" />
<input type="submit" id="inputsearchbox" name="inputsearchbox" value="" />
</div>
</div>
<div ui-view></div></div>
and my partial page is
<div class="wrapperwide">
<div class="home-featured card"></div>
<a target="_blank" href="#" class="home-sidebox card">test </a>
</div>
Could someone please help me out. Thanks in advance !
Related
I am working with Angular JS and created a simple login form and also implemented routing to route to next page after successful login.
But when I am trying to implement conditional routing, after login I am able to route to next page in my app but the page contents are not being displayed.
Below shown is my application structure.
I have created a controller.js file , a login.html and dashboard.html files
controller.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : "login.html"
})
.when('/dashboard', {
resolve: {
"check" : function($location, $rootScope) {
if(!$rootScope.loggedIn) {
$location.path('/');
} else{
templateUrl : "dashboard.html"
}
}
}
})
.otherwise({
redirectTo : '/'
});
});
app.controller('loginCtrl', function($scope ,$location , $rootScope) {
$scope.submit = function(){
if($scope.username == 'asd' && $scope.password == 'asd' ){
$rootScope.loggedIn = true;
$location.path('/dashboard');
}
else
{
alert("Invalid username and password")
}
};
});
login.html:
<div class="col-sm-8 col-sm-push-4">
</div>
<div class="col-sm-4 col-sm-pull-4">
<div ng-controller="loginCtrl">
<br><br><br><br><br><br>
<h3>Login </h3><hr>
<form action="/" id="myLogin">
<div class="form-group">
<label for="username">UserName:</label>
<input type="text" class="form-control" id="username" placeholder="Enter UserName" ng-model="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="password">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="button" class="btn btn-default" ng-click="submit()">Login</button>
</form>
</div>
</div>
dashboard.html:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MY APP</a>
</div>
</div>
</nav>
<br/>
<nav class="navbar navbar-inverse" style="margin: auto;">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
This is my output window
can anybody help me in resolving this error...!
Try:
.when('/dashboard', {
templateUrl: 'dashboard.html',
resolve: {
"check" : function($location, $rootScope) {
if(!$rootScope.loggedIn) {
$location.path('/');
}
}
}
})
Here is the working plunkr
Few other points to consider in your code:
use controller name in config phase itself rather than writing inside html as ng-controller
Ex:
.when('/', {
templateUrl : "login.html",
controller : 'loginCtrl'
})
Remove action from <form> tag because you are handling via angularJS & use ng-submit.
ex:
<form id="myLogin" ng-submit="submit()">
Remove $rootScope.loggedIn, as rootScope variables are discouraged, rather use factories
I have this .cshtml page to login
<main id="login" ng-controller="loginCtrl">
<div id="page" class="full-screen min-height">
<div id="page-inner">
<div id="login-page-content" class="min-height-inner container-padding">
<div class="container center text-center">
<h1>
<label>Login</label>
</h1>
<div id="login-form">
<div>
<input type="email" id="Username" placeholder="UserName/Email" class="login-input" required="required" />
</div>
<div>
<input type="password" id="Username" placeholder="Password" class="login-input" required="required" />
</div>
<div>
</div>
<div class="cf">
<input type="submit" value="Login" class="login-submit" ng-click="clicked()"/>
</div>
</div>
Forgot Details ?
</div>
</div>
</div>
</div>
and this is my controller.js
angular.module('userManagement')
.controller('loginCtrl', ['$scope', '$http','$window', function ($scope, $http,$window) {
$scope.clicked = function () {
window.location = '#/join';
}
}
]);
and also my app.js
$routeProvider.caseInsensitiveMatch = true;
$routeProvider.when('/login', {
templateUrl: 'Account/login',
controller: 'loginCtrl'
});
I want to be able to go to another page when i click the button, vallidations are not important for now I just want the buttons to go to the page when i click a button, with the above code it takes me to
http://localhost:52653/Account#!/login#%2Fjoin
You should use the angular route system or ui.router :
ngRoute and location
$location.path( "#/join" );
ui.router
$state.go(path_to_join_state);
I am trying to setup these routes below, but when I test they are not working, can someone please assist me with this. When I click on any of the links below, they do not work
'use strict'
var myApp = angular.module("myApp", ["ngRoute", 'firebase']);
myApp.constant('FIREBASE_URL', 'myfirebase Url' );
myApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/',
{templateUrl:'partials/home.html',
controller: 'mainController'
})
.when('/login', {
templateUrl:'partials/login.html',
controller: 'loginSignupController'
})
.when('/signup', {
templateUrl:'partials/signup.html',
controller:'loginSignupController'
} )
.when('/dash', {
templateUrl:'partials/dashboard.html',
controller:'mainController'
} ).
otherwise({
redirectTo:'/'
});
$locationProvider.html5Mode(true);
}]);
Signup.html
<h1>Welcome to Signup</h1>
<a class="" ng-href="/">Go Home</a>
<form class="ui form">
<div class="field">
<label>Username </label>
<input type="text" name="username" placeholder="Username">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="username" placeholder="password">
</div>
<button class="ui button" type="submit" ng-submit="">Signup</button>
</form>
login.html
This is the login page
Go Home
Username
Password
</div>
<button class="ui button" type="submit">Login</button>
</form>
home.html
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<a class="active item">Home</a>
<a class="item">About Us</a>
<a class="item">Send</a>
<a class="item">Request</a>
<a class="item">How it Works</a>
<div class="right item">
<a class="ui inverted button" ng-href="partials/login">Log in</a>
<a class="ui inverted button" ng-href="partials/signup">Sign Up</a>
</div>
</div>
</div>
var App = angular.module("MyApp", ["ui.router"]);
MetronicApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
// Redirect any unmatched url
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
// Dashboard
.state('dashboard', {
url: "/dashboard",
templateUrl: "views/dashboard.html",
data: {pageTitle: 'Dashboard'},
controller: "DashboardController",
})
home.html
<a href="#/dashboard">
I have below controller
angular.module("test")
.controller("AnyCtrl", ["$scope", "$state","$timeout", AnyCtrl]);
function AnyCtrl($scope,$state,$timeout) {
$scope.jumpOutNotes="test";
}
and below is my view
<!-- start of Jump out reason window -->
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-body">
<div class="form-group row">
<label class="col-md-3 control-label" for="jumpOutNotes">Notes</label>
<div class="col-md-6">
<textarea class="form-control"
id="jumpOutNotes"
name="jumpOutNotes"
type="text"
rows="4"
cols="200"
placeholder="Notes"
ng-model="jumpOutNotes"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<button ng-click="saveJump(jumpOutNotes);" class="btn btn-primary btn-sm">Save Jump Out</button>
</div>
</div>
</div>
</div>
</div>
When i call saveJump function, i re-initate the value of ng-model variable it is not reflected in ui and similarly i try to access this value in that function it shows me last value
$scope.saveJump= function(jumpOutNotes){
alert($scope.jumpOutNotes+ " : "+jumpOutNotes);
$scope.jumpOutNotes="";
}
The value passed in function as argument is the latest value in view but the scope value in alert will always remain "test". Not sure what is causing this issue. I am using UI-Router for views.
Below is code for my stateprovider
angular.module("test").config(["$stateProvider", "$urlRouterProvider", "$locationProvider", "$provide",
function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$stateProvider
.state("serviceMain", {
url: "/main",
templateUrl: "../resources/app/service.html",
controller: "AnyCtrl"
})
});
I know i have already asked the same question but i am getting nowhere with this problem..I am trying to navigate from login page to next page...
login.html
<body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
</br></br>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b></button>
</form>
</div> <!-- /container -->
</div>
</body>
my app file is
'use strict';
//Define Routing for app
var applog = angular.module('myApp',['ngRoute']);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'html/navAng.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: 'html/navAng.html'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
and the controller is
applog.controller("LoginController", function($scope, $location){
$scope.login=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin")
{
$location.path( "html/navAng.html" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
now when i click on the login button the url is getting generated but it just changes the url in the url tab and nothing happens i.e the page is not getting refreshed or navigating to the next page....can someone help plz...
just enter the path not with .html, like this
$location.path( "/login" );