var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/success', {
templateUrl: 'success.html',
controller: 'sucCtrl'
}).
otherwise({
redirectTo: '/index'
})
}])
app.controller('validateCtrl', function($scope, $http, $location) {
$scope.submit = function(user,password) {
//for local storage validation
$http.get('credentials.json').then(function(response) {
$scope.credentials = response.data;
if((user === $scope.credentials.username) && (password === $scope.credentials.password)){
alert("ok");
$location.path('/success');
}
else{
alert("nit "); }
});
};
})
app.controller('sucCtrl',['$scope', function($scope) {
alert("succs");
}]);
This might be well a beginner question. I am trying to validate my login form and redirect to success.html on success. But I am unable to navigate to next page. I tried using $location.path('/success').
here is the working sample in plunker..
http://plnkr.co/edit/0v7njznHdtwgpaG2NfwA?p=preview
You missed to write ng-view directive to get route changes to displayed on the view. Also you are messed up with the structuring of your page html. Refer below comments that will help you to make it working and improve it.
You should put that ng-view directive in body so that all the view will get loaded on basis of route changes.
Also you should load your form html from the route only, I'd suggest you to add one more route to your config that will say on /login show the form.html(login form)
Config
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/success', {
templateUrl: 'success.html',
controller: 'sucCtrl'
})
.when('/login', {
templateUrl: 'form.html',
controller: 'validateCtrl'
}).
otherwise({
redirectTo: '/login'
})
}])
Markup
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="login.controller.js"></script>
</body>
Your success.html should be partial, it shouldn't have the script references again to it they have been loaded from the index page only
success.html
<div>
Success Message
</div>
Working Demo
Related
This is my app.js
var mainApp = angular.module("myapp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/search/login.html'
}).
when('/dashboard', {
templateUrl: 'admin/index.html'
}).
otherwise({
redirectTo: '/'
});
}]);
mainApp.controller('logincntrl',function($scope,$location){
$scope.submit=function(){
var uname=$scope.username;
var upass=$scope.password;
if($scope.username=="admin" && $scope.password=="admin"){
$location.path('/dashboard');
}
};
});`
After clicking on submit.It will redirect to dashboad..That is seperate folder with index.But as i have given view on the first page ..my dashboard contain coming on the first page even with styling..how to make seperate view for dashboard page
You can use <ng-view><ng-view> to have load different
partials. You can have a look into this to have an ideahttp://codepen.io/dhanrajjay/pen/dOjmxL/
I am making an angularjs app but my routing part is not working.
Once I login into application using Login.html,it should route to index.html but it is not working.
app.js
/**
* Created by gupta_000 on 7/19/2016.
*/
'use strict';
var myApp = angular.module('myApp',[
'Controllers','ngRoute'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'Login.html',
controller: 'LoginCtrl'
}).
when('/home/student', {
templateUrl: 'index.html',
controller: 'DictionaryController'
}).
otherwise({
redirectTo: '/main'
});
}]);
I uploaded all my custom files at below location.
http://plnkr.co/edit/mi2JS4y2FfMD9kIl58qk?p=catalogue
I have already included all the dependency files like angular.js and angular-route.js etc..
Thanks in advance.
Here is a working plunker based on your code. You are missing the ng-view that the ngRoute will replace based on your config. So, the index.html looks like:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<ng-view></ng-view>
</body>
ng-view is an Angular directive that will include the template of the current route (/main or /home/student) in the main layout file. In plain words, it takes the file based on the route and injects it into the main layout (index.html).
In the config, ng-view will be replace by 'main' that points to Login.html. I change the '/home/student/' to point to a new page 'dic.html' to avoid infinite loop as it used to point to index.html
var app = angular.module('plunker', ['ngRoute', 'Controllers']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'Login.html',
controller: 'LoginCtrl'
}).
when('/home/student', {
templateUrl: 'dic.html',
controller: 'DictionaryController'
}).
otherwise({
redirectTo: '/main'
});
}
]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
Like your example, if one logs in with 'harish' as an e-mail and 'harish' as a password, the successCallback is called and goes to '/home/student' that replaces ng-view by dic.html:
$scope.validate = function() {
$http.get('credentials.json').then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log('Data: ' + JSON.stringify(response));
$scope.users = response.data;
var count = 0;
for (var i = 0, len = $scope.users.length; i < len; i++) {
if ($scope.username === $scope.users[i].username && $scope.password === $scope.users[i].password) {
alert("login successful");
count = count + 1;
if ($scope.users[i].role === "student") {
$location.path('/home/student');
break;
}
}
}
if (count != 1) {
alert("Please provide valid login credentials");
$location.path("/main")
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("Error: " + JSON.stringify(response));
alert(JSON.stringify(response));
});
};
Let us know if that helps.
You need to add ng-view in the index.html inside the ng-app.
Something like..
<body ng-app="myApp">
<ng-view></ng-view>
</body>
Now, the angular app would assign the view template and controller as defined by your routes configuration, INSIDE the ng-view directive.
Also, should have a generic index.html where all dependencies are included, and render the templates & assign them controllers in accordance with routes configurations. No need to create separate files which includes the dependencies all over again, like you did with index.html and login.html.
You have not injected $location in your controller.
app.controller('MainCtrl', function($scope, $http, $location) {
$scope.name = 'World';
});
Am creating a simple angularjs application with ng-route, the index.html page have a bootstrap carousel which have next and previous button when click on that button am being navigated to the next Html page below is my plunkr link as well as my script.js file please do corrections if am wrong, I have searched a lot but didn't find a proper solutions for this issue
Working Link
var appname = angular.module('appname', ['ngRoute', 'ngAnimate']);
appname.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'indexView.html',
controller: 'indexController'
}).
when('/about', {
templateUrl: 'about.html',
}).
when('/contact', {
templateUrl: 'contact.html',
}).
otherwise({
redirectTo: '/'
});
}]).controller('MainCtrl', function($scope, $location) {
$scope.isIndexPage = function() {
return $location.path() === '/';
}
});
Check this, everything works nicely now.
http://plnkr.co/edit/JcInw9ZUz6vfFO5InV7N?p=preview
Rewrote the MainCtrl part, before the MainCtrl was created once and never updated, but now it listens to route change and hides the carousel accordingly.
$scope.$on('$routeChangeSuccess', function () {
$scope.isIndexPage = $location.path() === '/';
});
I have this simple Angular app with ngRoute, a single route defined and the default redirecting to the same (in index.html):
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.run(function($rootScope) {
$rootScope.location = window.location.href.substring(0, window.location.href.lastIndexOf('#'));
});
app.config(function ($routeProvider) {
$routeProvider
.when('/page', {
controller: 'PageController',
templateUrl: 'page.html'
})
.otherwise({
redirectTo: '/page'
});
});
app.controller('PageController', function ($scope, $rootScope) {
});
</script>
<div ng-app="myApp">
<div ng-view></div>
</div>
The page.html displays the $rootScope.location:
{{$root.location}}
When I access the page with by using directly index.html#/page, it shows the location as expected, but when accessing it by just index.html and then it redirecting me to index.html#/page, the $rootScope.location remains empty.
Can someone explain me why?
Meanwhile, I find it.
window.location.href.lastIndexOf('#') returned -1 while accessing it via index.html and the statement returned a substring from 0 to -1 which is empty.
I'm trying to create a simple website using angular as front-end.
Is there a way to create partial views and routing without having a webserver?
I've been trying to do so, but I keep getting this error:
Uncaught Error: [$injector:modulerr]
Here's my code: index.html
<!DOCTYPE html>
<html lang="en" ng-app="cerrajero">
<head>
<meta charset="UTF-8">
<title>Cerrajero</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-controller="MainCtrl">
<div ng-view></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/ng-template" id="partials/contact.html" src="partials/contact.html"></script>
<script type="text/ng-template" id="partials/services.html" src="partials/services.html"></script>
<script type="text/ng-template" id="partials/home.html" src="partials/home.html"></script>
</body>
</html>
and the app.js:
var app = angular.module('cerrajero', []);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
What am I doing wrong?
edit
I've added the ngRoute but I still get the same error when I open the index.html file in the browser.
var app = angular.module('cerrajero', ['ngRoute']);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
edit 2
Here's the files on github:
https://github.com/jsantana90/cerrajero
and here's the website when it loads:
http://jsantana90.github.io/cerrajero/
edit 3
I've manage to get rid of the error by having the following code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(false);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I added this app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
But now my page is blank. It doesn't redirects or anything.
Have I placed everything how it's suppose to go?
edit 4
I forgot to change ui-view to ng-view. Now it works but it's showing in the view: partials/home.html instead of the actual view.
edit 5
Ok so, after having this final code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.
when('/services', {
templateUrl: './partials/services.html'
}).
when('/contact', {
templateUrl: './partials/contact.html'
}).
when('/home', {
templateUrl: './partials/home.html'
}).
otherwise({
redirectTo: '/home'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I get this error:
XMLHttpRequest cannot load file:///partials/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Now I'm guessing this is because I don't have a webserver running. How do I get it to work without a webserver?
solution
When I uploaded the files to github it seems to work there, but not locally.
Looks like you are using ngRoute and forgot to include it!
First load angular-route.js after loading angular.js. The inject ngRoute as a module:
var app = angular.module('cerrajero', ['ngRoute']);
Try removing the array syntax brackets from inside your config function. I believe there are two different ways of invoking these functions, either with a standalone function or with an array for any minification processes.
You should either one of the following:
app.config(function ($locationProvider, $routeProvider) {
// your code here
});
Or define the variable names with the array syntax for use in minifiers
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
// your code here
}]);
When you pass in an array to the config function, I believe Angular is expecting the first parameters to be a string value.
You should use ui-router instead of ng-route. It will allow you to nest views. Most current Angular projects use ui-router. ui-router scotch.io
Also, for your controller try app.controller('MainCtrl', function($scope){...});
Replace
var app = angular.module('cerrajero', []);
with
var app = angular.module('cerrajero', ['ngRoute']);