Trying to implement a user authentication with simple http session using angular and spring.
In index.jsp(my home page), a ng-view is being used.
But since the $routeProvider is not able to find the template from templateUrl for url /login(which i think is the reason for the errors), hence only index.jsp page is getting rendered, and ng-view is not rendering and errors are also occuring.
Error and relevant codes are attached below along with a snapshot of my folder structure.
According to my limited knowledge, it is the way i am referring to my templates through templateUrl that is causing the error
error snippet
Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
index.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="PMApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AUTH</title>
<script data-require="angular.js#*" data-semver="1.2.13"
src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.js"> </script>
<script type="text/javascript" src="<c:url value="/resources/js/app.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/LoginController.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/MainController.js" />"></script>
</head>
<body>
<h2>Hello World!Just trying the AUTHENTICATION . . .</h2>
<div ng-view></div>
</body>
</html>
app.js
var PMApp = {};
var App = angular.module('PMApp', ['ngRoute']);
App.config(['$routeProvider', function($routeProvider) {
console.log("in routeprovider");
$routeProvider.when('/login', {
templateUrl: '/resources/views/loginLayout.html',
controller: LoginController
});
$routeProvider.when('/main', {
templateUrl: 'resources/views/mainLayout.html',
controller: MainController
});
$routeProvider.otherwise({redirectTo: '/login'});
}]);
App.run(function($rootScope, $location) {
// register listener to watch route changes
$rootScope.$on("$routeChangeStart", function(event, next, current) {
console.log("Routechanged sessionId="+$rootScope.SessionId);
if ($rootScope.SessionId == '' || $rootScope.SessionId == null) {
// no logged user, we should be going to #login
if (next.templateUrl == "resources/views/loginLayout.html") {
// already going to #login, no redirect needed
} else {
// not going to #login, we should redirect now
$location.path("/login");
}
}
});
});
Do ask for more details if required.
Thanks in advance.
It was the version that was creating the problem. update it to 1.3.1 and everything works like a gem......
Related
Below is my Angularjs routing code, but unfortunately i am getting error when i am running code.
<!DOCTYPE html>
<html ng-app="routeApp">
<head>
<title>Routing - RouteParams</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<div ng-view></div>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</body>
<script type="text/javascript">
var app = angular.module('routeApp',['ngRoute','ngSanitize']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login',
{
templateUrl:'loginformroute.html',
controller:'LoginController'
})
.otherwise({ redirectTo: '/login' });
// $locationProvider.html5Mode(true);
}]);
app.controller("LoginController", function($scope) {
$scope.login = function () {
alert(1);
};
});
</script>
</html>
and i am getting below error
$sce is included by default in angular 1.2+so you don't need sanitize anymore in order to get $sce. So use angular 1.2 or further version and remove sanitize script. Hope it will solve your problem
Move your scripts in header tag
<head>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</head>
Also consider the angular.route and angular version should be the same. So use this version ( you can get it from code.angularjs.org) instead of your version
I'm new to angularJS and have been working on a tutorial in visual studio on angularjs routing, but even though I change the url link, the ng-view doesn't change.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="mainApp">
home
another page
<div ng-view></div>
</body>
</html>
This is my controller.js
var app = angular.module('mainApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
template: 'Home'
})
.when('/anotherpage', {
template: 'another page'
})
.otherwise({
template: 'index'
});
});
Even though I change the url to /index.html#/home, the content in the div is always 'index'. can anyone suggest any solutions for this.
change the html as below it should work.
home
another page
<div ng-view></div>
I am trying to build an app with RatchetJS (the mobile framework, not the websocket server, ie. goratchet.com !!) and AngularJS (v1.5.8). My question relates to project organization, routing and page loading.
What should handle routing if i want ratchet transitions to play nicely with angular js routing and controllers ? Here is what i have so far.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="Application">
<head>
<meta charset="utf-8">
<title>MyApplication</title>
<base href="/">
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<!-- <link href="css/ratchet-theme-ios.css" rel="stylesheet"> -->
<!-- <link href="css/ratchet-theme-android.css" rel="stylesheet"> -->
<!-- Include the compiled Ratchet JS -->
<script src="js/ratchet.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<div class="view" ng-view></div>
</body>
</html>
The angular JS app file.
'use strict';
(function() {
var Application = angular.module('Application', ['ngRoute']);
Application.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'DefaultController',
templateUrl: 'pages/home.html',
})
.when('/pages/chat.html', {
controller: 'ChatController',
templateUrl: '/pages/chat.html',
})
.otherwise({ redirectUrl: '/' })
;
$locationProvider.html5Mode(true);
}]);
Application.controller('DefaultController', ['$scope', '$route', function($scope, $route) {
$scope.title = "Grettings";
}]);
Application.controller('ChatController', ['$scope', function($scope) {
$scope.title = "Chat view";
}]);
})();
There are also two files in /pages/... folder (home.html and chat.html). The home.html contains a link looking like:
<a data-ignore="push" href="/pages/chat.html">Go to chat</a>
If i use data-ignore="push" the page gets loaded, but by angular (so no ratchet transitions. Without it, of course, the page gets loaded by Ratchet but AngularJS does not catch the route and the controller is never called...
Providing i want to use ratchet for transitions. How should i handle my architecture / routing ?
Ratchet is not meant for transitions or what you are refering to.
It is meant as a WebSocket for PHP the problem that you are having is clientside pageloading, so try adding more information about your angular install.
i have a sub web and this no have head, body etc, contain only the content and im calling with ng-route and show with ng-view, but if i call the web without route eq. localhost/secondtab.html all work fine, but if i call with route and ngview, the script dont work here i put the code.
var myApp = angular.module("myApp",['ngRoute']);
$url ="/load.php?stundent=<? echo $_GET["all"]; ?>";
myApp.factory('myService',function($http){
var getData = function() {
return $http({method:"GET", url:$url}).then(function(result){
return result.data;
});
};
return { getData: getData };
});
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'ItemsController'
})
// route for the home page
.when('/one', {
templateUrl : 'one.html',
controller : 'ItemsController'
})
// route for the about page
.when('/two', {
templateUrl : 'p/two.html',
controller : 'othercontroller'
});
});
myApp.controller('othercontroller', function othercontroller($scope,$http) {
...
});
myApp.controller('ItemsController', function ItemsController($scope,myService,$timeout,$http) {
...
}
extract main.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<head>
//load css
//load script(angularjs, routejs, jquery)
</head>
<body>
one
two
</body>
the one.html(this fail)
<script type="text/javascript">
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "webpro.js", "musewpslideshow.js", "jquery.museoverlay.js", "touchswipe.js", "jquery.musepolyfill.bgsize.js", "jquery.watch.js", "musewpdisclosure.js", "jquery.musemenu.js", "index.css"], "outOfDate":[]};
</script>
<!-- CSS -->
.....
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
</script>
<!-- JS includes -->
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js?4241844378" type="text/javascript"></script>
<![endif]-->
//content
.......
here a accordion menu
//content
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="p/scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
please help me
Can I have loading some data once in angular module? I tried to use .run() but it gets called whenever page is accessed. For Example: say there are 2 html pages belonging to same module:
TestPage1.html:
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<p><a ng-href="TestPage2.html">Go to Page2</a></p>
</body>
</html>
TestPage2.html:
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<p><a ng-href="TestPage1.html">Go to Page1</a></p>
</body>
</html>
app.js:
var myApp = angular.module('myApp', []);
var cnt = 0;
myApp.run(['$rootScope', '$http', function(scope, $http) {
if(scope.loggedIn == undefined || scope.loggedIn == null) {
$http.get('rest/userData').success(function(data) {
cnt++;
alert(cnt);
scope.loggedIn = true;
});
}
}]);
When I navigate from one page to another this .run() is getting called again and again with cnt as 1. Is it possible to have it called once in life- time of module getting initialized? Or what is the other way?
It seems you are missing some basics such as a controller. The typical angular setup is having an ng-view for your app and loading the other pages via routing. Here is a simple example:
http://beta.plnkr.co/edit/RnZWeWxTJFri49Bvw50v?p=preview
app.js
var app = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'TestPage1.html', controller: Page1Ctrl});
$routeProvider.when('/view2', {templateUrl: 'TestPage2.html', controller: Page2Ctrl});
$routeProvider.otherwise({redirectTo: '/view1'});
}]).run(function () { // instance-injector
alert('only run on first page load this is where you load data or whatever ONE time'); // this only runs ONE time
})
function MainCtrl($scope) {
$scope.name = 'main';
}
function Page1Ctrl($scope) {
$scope.name = 'page 1';
}
function Page2Ctrl($scope) {
$scope.name = 'page 2';
}
HTML:
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
This is the main page. Main nav:
<a ng-href="#/view1">Go to Page1</a>
<a ng-href="#/view2">Go to Page2</a>
<div ng-view></div>
</body>
</html>
You will notice in the html there is an ng-view, when a route is encountered such as #/view the routeprovider looks it up and provides the correct template and calls the appropriate controller. I believe this is the kind of setup you are trying to achieve.