I build a simple app with an index.jsp (as a welcome page) and after a form-login submission directly to spring controller, i return either index.jsp or homePage.jsp (when user credentials are valid). So angular (routes, components, etc) loads for the first time at homePage.jsp.
I chose this implementation due to the fact that i am allowed to use only one ng-view and i wanted to do this only at my homePage from the time that is my main content.I would like some suggestions without using a 3d party routing such as ui-router.
First submit you from from JSP page to Spring Controller
<form action = "/checkUser">
[Your input tags]
</form>
In Spring
#Controller
public class Login{
#RequestMapping("checkUser")
public String checkUser(#RequestBody Map<String,Object>){
[Check your user is Valid or not]
[If valid]
return "homePage.jsp"
[else]
return "Index.jsp"
}
}
But rather than this i personally prefer Spring Security.
Once you got on your homePage you can load all your necessary js file including the annular js files
And load your views using ng-Route
var app = angular.module('tester',
['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/tests', {
templateUrl: 'tests.html',
controller: 'TestCtrl'
});
});
app.controller('TestCtrl', ['$scope', function($scope){
$scope.title = "This is a Test Page";
}]);
When You click on Tests link
<div ng-view></div>
Test
tests.html will directly load in ng-view part
For ng-view Plunker
Related
This question might sound very generic to some of you but as a newbie i am having trouble in this. Its evident to use ng-view within the home page in order to display other html files within the page but how should i redirect to a new page present in the web app. I mean how to route to completely different web page in a multipage web application.
Import AngularJs-Route File
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
Then you must add the ngRoute as a dependency in the application module:
var app = angular.module("myApp", ["ngRoute"]);
Use the $routeProvider to configure different routes in your application:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
STructure Your HTML
<body ng-app="myApp">
<p>Home</p>
Red
Green
Blue
<div ng-view></div>
</body>
For nested views you can use https://github.com/angular-ui/ui-router
Follow https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views for reference
Try searching angular ui-roter how its works and its mechanism . Since angular is a single page application your app needs to be on one base template then expand from their. From base template route in different page but if you want to route to different application use normal hyper link or ui-serf . Go though u-router basic. Also look into ui-serf .
I am working on Symfony3 and Angular 1.5.8 integration, the api part is all ready and now I am trying to display the result in partials using angular js which I am not having any success with.
This is my factory which is responsible for fetching data from symfony
jobs.fac.js
(function () {
"use strict";
angular
.module("ngListings")
.factory("jobFactory", function ($http) {
console.log('inside the factory');
function getJobs() {
return $http.get(Routing.generate("get_jobs"));
}
return {
getJobs: getJobs
}
})
})();
This is my controller jobs.ctrl.js
(function () {
"use strict";
angular
.module("ngListings")
.controller("jobsCtrl", function ($scope, $state, $http, jobFactory) {
var vm = this;
$scope.$on
vm.jobs;
jobFactory.getJobs().then(function (jobs) {
vm.jobs = jobs.data;
});
});
})();
this is my main.js where i am setting up the states and the controllers that are linked with the states
angular
.module("ngListings", ["ui.router"])
.config(function ( $stateProvider) {
$stateProvider
.state('jobs',{
url: '/listings/jobs',
templateURL: '/partials/home.html',
controller: 'jobsCtrl as vm'
})
;
});
Now this is my index where i am adding ui-view
{% extends 'base.html.twig' %}
{% block body %}
<ui-view></ui-view>
{% endblock %}
Now as I mentioned I am using Symfony so I have tried adding the partials inside the web directory and also inside the AppBundle/Resources/views/jobs/template-name in both cases the partial does not appear and there is no error in console either.
In console I can see the call being made to the URL and data being returned but its not being displayed in browser.
I will really appreciate if someone can tell me what am i missing here?
Note: Symfony and Angular are not setup separated, angular js files are kept in AppBundle and then being dumped in web directory, this is just for symfony users ofcourse any non symfony user who can see what i am doing wrong is also welcome to comment
To serve a template through Symfony you need a route/controller to access it via url ("partials/home.html" in your example). Elegant solution is to have one controller which is taking name of the partial as variable, and render that twig file as response. Take a look at this slide http://www.slideshare.net/mladenplavsic/symfony-angularjs-dafed26/19 as example of Template contoller.
With this you could change your templateUrl to something like "/template/home.html" where "home" is "$name" value for Symfony controller.
I have a sample MVC6 single page app with one view in which I want to load 2 Angular partials using ngRoute. You can have a look at it at GitHub
There are 3 URLs in the app:
localhost - Index.cshtml
localhost/games - Index.cshtml with Angular's gamelist.html partial
localhost/games/2 - Index.cshtml with Angular's game.html partial
The routes config is the following:
MVC:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}");
routes.MapRoute("gamelist", "games", new { controller = "Home", action = "Index"});
routes.MapRoute("gameWithId", "games/2", new { controller = "Home", action = "Index" });
});
Angular:
myApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/games', {
templateUrl: 'partials/gameslist.html',
controller: 'GameController',
controllerAs: 'ctrl'
})
.when('/games/:gameId', {
templateUrl: 'partials/game.html',
controller: 'GameController',
controllerAs: 'ctrl'
});
$locationProvider.html5Mode(true);
}]);
It all works perfectly fine as long as I start the app from the home page '/' and then navigate to the partials using the links on the page. The problem is that the URL #3 (localhost/games/2) does not work if I start the app from it, by typing it in the address bar. The URL #2 (/games/) does work.
The reason why #3 does not work is that MVC removes '/games' part from the URL and what Angular gets is just '/2'. If you run the sample app, you will see that '$location.path = /2'. Of course Angular cannot map using that path and no partial is rendered. So my question is - how to make MVC return the full path to the client so that Angular can map it?
You can get it to work with HTML5 mode, you just need to ensure that every request maps back to your Index.cshtml view. At that point the AngularJS framework loads, client-side routing kicks in and evaluates the request URI and loads the appropriate controller and view.
We've done this with multiple Angular apps inside MVC with different .cshtml pages, though we use attribute routing with the wildcard character, e.g.
[Route("{*anything}")]
public ActionResult Index()
{
return View("Index");
}
The wildcard operator (*) tells the routing engine that the rest of the URI should be matched to the anything parameter.
I haven't had chance to get to grips with MVC6 yet but I think you can do something like this with the "new" version of attribute routing?
[HttpGet("{*anything:regex(^(.*)?$)}"]
public ActionResult Index()
{
return View("Index");
}
To make link #3 work from the browser's address bar, I turned off "html5Mode" in Angular and made links #-based.
kudos to this blog
I think it is a better solution.
His solution is rewriting the request that doesn't fit to any route and doesn't have any extension to the landing page of angular.
Here is the code.
public class Startup
{
public void Configure(IApplicationBuilder app, IApplicationEnvironment environment)
{
// Route all unknown requests to app root
app.Use(async (context, next) =>
{
await next();
// If there's no available file and the request doesn't contain an extension, we're probably trying to access a page.
// Rewrite request to use app root
if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
{
context.Request.Path = "/app/index.html"; // Put your Angular root page here
await next();
}
});
// Serve wwwroot as root
app.UseFileServer();
// Serve /node_modules as a separate root (for packages that use other npm modules client side)
app.UseFileServer(new FileServerOptions()
{
// Set root of file server
FileProvider = new PhysicalFileProvider(Path.Combine(environment.ApplicationBasePath, "node_modules")),
// Only react to requests that match this path
RequestPath = "/node_modules",
// Don't expose file system
EnableDirectoryBrowsing = false
});
}
}
I am trying to get ng-route working with a google-apps-script web app. I have managed to get basic angular.js functionality working with google-apps-script, but I can't seem to get ng-route to work. I have placed ng-view tags inside a page and have included a separate JavaScript page that contains the routeProvider function.
The ng-view never gets rendered and as far as I can make out the routeProvider does not get called.
Can anyone offer any advice on using ng-route with google-apps-script or suggest another way of rendering a partial html page with google-apps-script
Any answers greatly appreciated.
Have simplified my code and added below:
Code.gs
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Index');
// Build and return HTML in IFRAME sandbox mode.
return template.evaluate()
.setTitle('Web App Window Title')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
index.html
<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html>
<body ng-app="myApp">
<h1>NG View</h1>
<ng-view></ng-view>
<p>angular check {{'is' + 'working!'}}</p>
<? var url = getScriptUrl();?>
<p id="urlid"><?=url?></p>
</body>
</html>
<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
Javascript.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-route.js"> </script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script>
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider){
console.log('routeProvider config');
var url = document.getElementById("urlid").innerHTML;
console.log('routeProvider config->' +url);
$routeProvider.when("/",
{
templateUrl: url+"?page=_app.html",
controller: "AppCtrl",
controllerAs: "app"
}
);
})
.controller('AppCtrl', function() {
var self = this;
self.message = "The app routing is working!";
});
</script>
_app.html
<div>
<h1>{{ app.message }}</h1>
</div>
When this runs angular check {{'is' + 'working!'}} works fine, but the ng-view does not get rendered the java console shows:
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.
The first obstacle is "sce"
$sce is a service that provides Strict Contextual Escaping services to AngularJS.
Refer link https://docs.angularjs.org/api/ng/service/$sce#trustAsResourceUrl
For the purpose of investigation, I disabled sce (this is not recommended, though)
$sceProvider.enabled(false);
Now the error is shifted to XMLHttpRequest cannot load... No 'Access-Control-Allow-Origin' header is present on the requested resource.
XHR requests to the Google Apps Script server are forbidden
Refer link https://developers.google.com/apps-script/guides/html/restrictions
Google Apps is delivering the files from a different origin than the scripts.google.com and angular js client code is not able to fetch the partial htmls from the same origin.
I guess approach of ng-view is not feasible given the restrictions placed by google apps.
Here is the final modified code
<script>
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider,$sceProvider){
$sceProvider.enabled(false);
console.log('routeProvider config');
var url = document.getElementById("urlid").innerHTML;
console.log('routeProvider config->' +url);
$routeProvider.when("/",
{
templateUrl: url+"?page=_app.html",
controller: "AppCtrl",
controllerAs: "app"
}
);
})
.controller('AppCtrl', function() {
var self = this;
self.message = "The app routing is working!";
});
</script>
There has been some time since the question, but I'll post a reply either way.
If your partial html page is not too complicated and big, you can use template instead of templateUrl in the routeProvider, plus create a variable with the html you want to show. Something like this below:
var partial_page = "<span>partial page</span>"
$routeProvider.when("/",
{
template: partial_page,
controller: "AppCtrl",
controllerAs: "app"
}
It worked for me, but I wouldn't advise doing so for a complicated partial page as it may become difficult to read the code
I'm looking for a good approach to render 404 page instead of redirecting 404 page in angularjs. Many solutions I have found is all about redirecting to another page. It will create a problem that if the user click on browser's back button I will create another redirect to 404 page. So I am looking for a solution that renders 404 page instead.
Thanks for reading, I hope it's understandable for you guys.
Usage of otherwise might be what are you looking for.
angular.module('MyApp', [])
.config(function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'/home.html'}).
// add as many as you want here...
otherwise({templateUrl:'/404.html'}); // Render 404 view
});
Update: After reading more carefully the OP question (sorry, quite early around here), I think I have an alternate solution (actually two):
1) A $scope variable to the main UI of your ng-view that hides the content
This requires ng-show in your view and resolve in your params, then do a $emit to the other controllers in order to tell "Hey, this guy hit a 404, don't display your view"
$routeProvider.otherwise({
controller: 'masterController',
resolve: {
404: function(){
return true;
};
});
angular.module('MyApp', [])
.controller('masterController', function($scope, 404) {
$scope.isOn404 = 404
...
})
// In the view
<div ng-controller="masterController">
<div ng-hide="isOn404">
<!-- Actual content -->
</div>
<div ng-show="isOn404">
<!-- 404 Page -->
</div>
</div>
Now, this requires that you have a master controller that helps you to manage the rest of your UI. Also, you most likely would need to do some coding to handling the rest of the page instead of just using ng-view (e.g. some controllers that show the current header, body, etc).
2) A custom routing system
I actually have done this for a specific project: you have a service that sets up a "BackURL" and "FordwardURL"; each $onRouteChange you store where do you go and where do you come from; if the user is about to hit a 404, you can still render it through my original example, but when the user hits back, catch that through AngularJS and render the actual "Back" page. In this case I'm using a library that helps me with the routing on mobile devices called Lungo and a library that the company I work for uses, the L.A.B (Lungo Angular Bridge).
I'm new to AngularJS, so this may not be an ideal solution, but it works for showing a 404 page, or similar uses such as a login page:
See Working Example
Redirect everything to the same master template:
$routeProvider
.when('/', {
controller: 'homeController',
templateUrl: 'partial.master.html'
})
.when('/cust/:custid', {
controller: 'custController',
templateUrl: 'partial.master.html'
})
master.html template refers to the masterController and has a subpage:
<div ng-controller="masterController">
<h2>{{title}} - Header</h2>
<hr>
<div ng-include="subPage"></div>
<hr>
<h3>{{title}} - Footer</h3>
</div>
masterController has conditional sub-page logic:
controllers.custController = function($scope, $rootScope, $routeParams){
$rootScope.subpage = 'cust';
$scope.cust = getCustomer( $routeParams.custid );
};
controllers.masterController = function($scope, $rootScope) {
switch($rootScope.subpage) {
case 'home':
$scope.subPage = 'partial.home.html';
break;
case 'cust':
if($scope.cust) {
$scope.subPage = 'partial.cust.html';
} else {
$scope.subPage = 'partial.404notfound.html';
}
break;
You could also use ui-router as previously answered here: https://stackoverflow.com/a/23290818/2723184. IMHO, you not only get an awesome library but you get a better solution.