I am working on angularjs app. Project multiple partials that loads in ng-view. App is working correctly.
I am trying to optimize app's performance and want to keep once loaded partials in dom. So that everytime these partials are revisited it should not be reloaded.
HTML:
<div ng-view></div>
routejs:
$routeProvider.when('route1', {
template: '1.html',
controller: '1controller'
}).when('route2', {
template: '2.html',
controller: '2controller'
})
How to prohibit 1html to reload when it was once visited like user visits-
route1-> route2-> route1
So next time users visits route1, html should not reload. Reloading of simple htmls are not costly however html with some images re-loading is costly.
How to prohibit angular to reload partials everytime?
Thanks in advance!!
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 .
Imagine we have an AngularJs app (witten in multiple controllers, services, directive and run method) for multiple routes using $routeProvider. and now we need to use the same application in a single page. meaning that templates of different routes should now be visible in one page at the same time.
I can't use different iframes because then it's hard to access the $scopes of those controllers from the wrapper application.
Is this possible without the use of iframes?
What you are looking for is ng-include and ng-controller. Using ng-include, You can insert a html into the block containing it and using ng-controller, you can insert a controller for the same block. I would prefer not to use iframes as it is a bad practice and you will not be able to access scope and a lot of features that are native to angular.
EDIT : Since, you are using the run() function you can try the below approach :
Keeping the routeProvider same, you can move the contents of you html template files into script tags on you index.html like so :
<script type="text/ng-template" id="one.tpl.html">
//Your html template code goes here
</script>
<script type="text/ng-template" id="two.tpl.html">
//Your html template code goes here
</script>
In you app.js :
$routeProvider.
when('/', {
templateUrl: 'one.tpl.html', //points to the content of the script tag in your index.html file
controller: 'onetplCtrl'
}).
when('/edit',{
templateUrl:'two.tpl.html', //points to the content of the script tag in your index.html file
controller:'twotplCtrl'
}).
otherwise({
redirectTo: '/'
});
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'm fairly new to Angular and still figuring stuff out.
What i want to do is i have an app that uses an index.html and then inside it's body the ng-view.
Now i need to ignore that for a specific route /game in my application and use a different one. Basically i wanna do an iframe 100% in that new view but all the CSS and sidebars etc from the index.html file screws up the whole thing.
app.config(function($routeProvider){
.when('/game',{
templateUrl: 'game.html'
}),
.when('/home',{
templateUrl: 'views/home.html'
})
});
How should i approach this ?
Thanks
I have an Angular project that has some parts (specifically the top nav) broken when pages are accessed directly/reloaded. The rest of the page works fine. Only topnav having things like ui-sref not expanding to href and data not loading. I also noticed the topnav controller is not run at all when I reload/access the page directly.
In the ui-router config there is this app abstract route
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: helper.basepath('app.html'),
resolve: helper.resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'whirl', 'spinkit', 'akoenig.deckgrid')
})
It probably came with the theme the project is using. Anyways, in the app.html file
<!-- top navbar-->
<header ng-include="'app/views/partials/top-navbar.html'" class="topnavbar-wrapper"></header>
Then in top-navbar.html
{{'OUTSIDE'}}
<nav ng-controller="TopNavBarController" role="navigation" class="navbar topnavbar" style="background-color:#1663DE;">
{{'INSIDE'}}
The outside and inside are for debugging. I noticed on reload or when page is accessed directly, angular prints the OUTSIDE correctly in HTML but fails to print inside correctly. It appears on page as {{'INSIDE'}}. Which makes me think there is something wrong with the ng-controller. Removing ng-controller fixes this particular problem.
I added a log right after the controller function:
function TopNavBarController($scope, $state, SweetAlert) {
console.log('in TopNavBarController')
It appears the controller function is not even run? Whats wrong?
Only topbar is failing, the rest of the controller/application works fine. Data can be loaded, ui-sref expanding correctly.