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 .
Related
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
I created an html file and make an anchor tag. product
I want to make the angular app open in http://localhost:8888/#/product but it reloads to http://localhost:8888/#/.
What can I fix in my angular app to allow that kind of url opening in new tab? Thank you.
with ui-router you can use ui-sref="stateName" to change view.
Here's an example:
<a ui-sref="routeHere" target="_blank">A Link</a>
Note: you can only open a new tab with:
target="_blank"
only if you use an anchor tag along with ui-sref.
more info here: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
Use AngularJS Routing to accomplish it.
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire application.
Example:
Navigate to "red.htm", "green.htm", and "blue.htm":
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
To make your applications ready for routing, you must include the AngularJS Route module:
<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"]);
I have routing set up to direct the user to various pages. Pretty standard stuff. On one of those pages however, I use ng-switch to show/hide 5 different sections. What I am looking to do, and I cant seem to find any info on it, Is I want to link to 1 of those 5 sections from a different page. Very similar to anchor tags in html.
So the question is, if i use routing from one page to another, how do i route to a specific section of that page?
In short, you can't with ngRouter.
You can with ui-Router.
This SO question lists the main differences between ngRouter and ui-Router : AngularJS : Difference between angular-route and angular-ui-router
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire application.
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script
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 have to build an app for an existing website, but unfortunately the website (outside of my control) detects the user device and redirects to a mobile version.
I am trying to reuse the same js file but different html files.
So I have:
index.html for desktop
mobile.html for mobile
both call init.js where I want to handle my logic, my problem is that for some reason the routing is not working as I expected and I cannot figure out why.
Desktop:
I go to example.com
get redirect to example.com/#/steps/age/0
Refresh the page and it stays in example.com/#/steps/age/0
This works as expected
Mobile:
I go to example.com/mobile.html
get redirect to example.com/mobile.html#/steps/age/0
Refresh the page and instead of staying in the same url, it goes to example.com/steps/age/0#/steps/age/0
This does not work as expected (expected to stay in the same url once refreshing as in the step number 2)
Code below:
angular
.module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/steps/age/0'
});
})
.controller('example', function($scope, $routeParams, $resource, $location){
console.log("example controller");
});
Can anyone please advise?
Thanks.
Angular is examining the entire path to see where it should route to. So when you have example.com/mobile.html#/steps/age/0 There is no matching route, so it substitutes the route for you, in place of mobile.html so you get /steps/age/0#/steps/age/0 from your otherwise. The fundamental problem is that angular has no sense of what mobile.html means, and takes it as a parameter.
One solution is to use routes to separate your pages.
$routeProvider
.when('/', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/', {
templateUrl : 'mobile.html',
controller : 'example'
})
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.when('/mobile/steps/:steps*', {
templateUrl : 'mobile-profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/'
});
})
Controllers may vary as needed.
Alternatives to this are to have mobile.html use its own angular App and routing, which may be beneficial since you won't run into desktop directives leaking into mobile. You can inject all of your directives and controllers into it, but still have a nice separation of index and mobile. You can take that a step further and have a redirect to m.example.com, but that's a different topic.
EDIT I made a mistake. Having templateUrl be index.html is a bit wrong. index.html should contain your ng-app and your ng-view directives, possibly a controller. Any common html should reside there. desktop.html and mobile.html should contain the specific HTML for those platforms.
As an afterthought, Within those you could have a directive called profile that does all of your profile work, and with a bit of ng-switch you can have that appear if steps is defined in the scope, and use:
$routeProvider
.when('/steps?/:steps?', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/steps?/:steps?', {
templateUrl : 'mobile.html',
controller : 'example'
})
But now I'm rambling, I'm not 100% sure that will work tbh. END EDIT