I'm creating a single page home site and would like to reduce initial page load time and save user bandwidth by lazy loading views that are below what is currently visible. The home page will be rather long, with a nav, header, several content sections, and a footer. My goal is to initially loading a static layout container with the nav and sticky footer along with the 'root' angular app. Scrolling or clicking on a nav link will cause the next viewable view to load (clicking a nav link that jumps down past several views should load all the views a user will jump past). I know there is a jQuery lib for this task, but I'd like to stick to Angular.
Is there an easy way to conditionally load views this way in Angular?
Here's what I came up with, just as a quick example. There are many ways you could accomplish this. If you want more fine tuning, you could even write your own directive instead of using ng-include/ng-repeat.
Live demo here
Hmm, plnkr is having some issue right now. If the page will even load, it seems to sometimes have trouble finding the templates (see the console log..it is trying to load them, so the code is working fine). Here's a jsbin demo also, but the templates are just going to load nothing (empty).
<div ng-repeat="lazy in loaded">
{{lazy}}
<div ng-include="lazy"></div>
</div>
<button ng-click="loadNext()">Load Next</button>
<button ng-click="unload()">Reset</button>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var toLoad = [ //list the templates to be loaded
'tmpl.html',
'tmpl2.html',
'tmpl3.html'
];
$scope.loaded = []; //anything in here will be loaded to the page
$scope.loadNext = function() {
if (toLoad.length) { //if there are any item left to load
$scope.loaded.push(toLoad.splice(0, 1)[0]); //move first item to "loaded"
}
};
$scope.unload = function() {
toLoad = $scope.loaded.splice(0, $scope.loaded.length); //move all items back to "toLoad"
};
});
Related
When Isotop/masonry 1st loaded it get crumpled all together how to fix ? but after i refresh it it just got back to normal. Visit this link to check it live.
Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. Here are the instructions on how to utilize it. Isotope v2 does not include it so you need to download and load it in your page.
If your layout has images, you probably need to use imagesLoaded.
Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.
You can use ImageLoaded by adding some JS:
<script type="text/javascript" src="http://imagesloaded.desandro.com"></script>/imagesloaded.pkgd.min.js
// init Isotope
var $grid = $('.grid').isotope({
// options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
I have a simple website that implements jQuery in order to create a Slider with some images in the Index.html top banner.
Now, I want to use AngularJS so I'm breaking the HTML code into separate partials.
Header
Footer
Top Banner
If I run the Index.html in the original version (without applying AngularJS patterns) then I can see the slider working perfect.
When applying AngularJS patterns, I moved the top banner HTML to a partial html and then applied ng-view to the div where the top banner is originally located.
var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/about',{templateUrl:'app/partials/about.html'}).
when('/contact',{templateUrl:'app/partials/contact.html'}).
otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'})
});
When I refresh the page the slider is not working, is rendered as simple html without any jQuery effect, is really a mess.
This partials has some jQuery plugins that usually activates by document.ready. But this event not fire when angular load partial in ng-view. How can i call this event to initialize jQuery plugins?
Any clue how to fix this?
Appreciate any help.
When you specify your routes, you can also specify a controller, so your routes would look like this:
var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/about',{templateUrl:'app/partials/about.html', controller: 'aboutCtrl'}).
when('/contact',{templateUrl:'app/partials/contact.html', controller: 'contactCtrl'}).
otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html', controller: 'homeCtrl'})
});
Now, you can define inside each controller what you want to do, jquery-wise, as part of a function, like this:
angular.module('website').controller('aboutCtrl', ['$scope', function ($scope) {
$scope.load = function() {
// do your $() stuff here
};
//don't forget to call the load function
$scope.load();
}]);
Make sense?
The other provided answers will work, but they are bound to controllers, and therefore not as scalable and reusable.
To do it the real "Angular" way as mentioned in the comments, you should be using a directive. The benefit to this is that you're able to create several instances with the same code, and can pass in attributes to the directive logic to "customize" the directive. Here's a sample of a way I've used it using bxSlider plugin:
JS:
app.directive('slider', ['$rootScope', function($rootScope) {
return {
restrict: 'EA',
templateUrl: '/path/to/template',
link: function(scope, iElement, attrs) {
//attrs references any attributes on the directive element in html
//iElement is the actual DOM element of the directive,
//so you can bind to it with jQuery
$(iElement).bxSlider({
mode: 'fade',
captions: true
});
//OR you could use that to find the element inside that needs the plugin
$(iElement).find('.bx-wrapper').bxSlider({
mode: 'fade',
captions: true
});
}
};
}]);
HTML:
<div slider some-attibute="some-attribute"></div>
And inside your directive template you could have the slider wrapper and slides, which you could build dynamically using ng-repeat bound to scope data.
I'd recommend reading this excellent article by Dan Wahlin about creating custom directives and how to fully harness they're power.
I had the same problem, I was loading some nav links in a ng-include and I have a script file called on my index.html with jquery instructions to make links active and It i not see the included content.
I tried all of the above solutions and for some reasons, none of them worked for me. When the content is not included (straight in the index.html) jquery kicks in fine but once included it stopped recognizing my elements.
So I simply wrapped my instructions in a setTimeout() function and it worked! Maybe it'll work for you too?
setTimeout(function() {
$("nav ul li").click(function() {
$("nav ul li").removeClass('active');
$(this).addClass('active');
});
});
Somehow the setTimeout() manages to load the script AFTER angular is done loading included content.
Happy coding everyone !
A Directive is certainly a good option, but you can also add a controller to any partial, which will perform all tasks (also with jQuery if you want) after the partial is loaded:
Example: partials/menu.html
<div ng-controller="partialMenuCtrl">
...
</div>
I had the same issue, I was running Jquery slick slider in simple html page it was working fine. How it works basically by including the slick.min.js file underneath the jquery.min.js file and then in script tags you need to initialize the plugin with options like e.g.
$('.items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
now coming back to the issue, when I added Angular JS to my page and made partials of the page and then went back to the browser to check weather the page was working fine or not, the page was working fine except the slider. Then I tried to move those slick.min.js and plugin initialization to the partials, and it worked :)
How it worked I don't know the reason, since I am new to Angular but it worked and I am still wondering the reason.
I know it is an old thread but just for the sake of completion, you can use the following JQuery code. It is called event Delegation.
$("#anyDivOrDocument").on('click', '#targetDiv', function(event) {
event.preventDefault();
alert( 'working' );
});
I bought a html5 template and tried to integrate with my angularJS web app. I encountered the same issue. I solved it using:
Put the code below at where you put your <script src="vendor/61345/js/script.js"></script> code.
<script>
document.write('<script src="vendor/61345/js/script.js"><\/script>');
</script>
This issue has been stumping me for days. I need a subnav to display under the main nav in the application template when a user visits the 'about' page. I feel like I must be missing some vital concept because I keep reading that if something is extremely hard to do in Ember than you're probably doing it wrong. And I feel like Ember should be able to handle a simple subnav with ease.
I would like the subnav to display on the skinny white horizontal bar below the main nav when "ABOUT" is clicked.
I can't put the subnav in the about template since the nav code is in the application template.
My Router:
App.Router.map(function() {
this.resource("about", function() {
this.route("philosophy");
this.route("leadership");
this.route("staff");
this.route("affiliations");
});
this.route("conditions");
this.route("programs");
this.route("testimonials");
});
I can't render a partial inside the application template because I only want it displayed when someone is at the /about url.
I've tried plain old jQuery show and hide with this:
App.ApplicationController = Ember.ObjectController.extend({
currentRouteChanged: function() {
if(this.get('currentRouteName').indexOf('about') > -1) {
$("ul").removeClass("sub-nav-list-hide");
$("ul").addClass("sub-nav-list-show");
}
}.observes('currentRouteName')
});
And it works when you click about, but when you hit the back button or navigate to another page the subnav doesn't hide.
I'm stuck and I feel like I'm making this way too difficult.
I would set a property in the application controller from within App.AboutRoute
App.AboutRoute = Ember.Route.extend({
activate: function(){
this.controllerFor('application').set('renderAboutSubNav', true);
},
deactivate: function(){
this.controllerFor('application').set('renderAboutSubNav', false);
}
});
and then check the property in the application template.
{{#if renderAboutSubNav}}
{{render 'about/subnav'}}
{{/if}}
Here is an example jsbin
That looks elegant to me!
We can do in application controller something similar.
App.ApplicationController=Ember.Controller.extend({
renderAboutSubNav:function(){
var reg = new RegExp("^about\.");
return reg.test(this.get('currentPath'));
}.property('currentPath')
});
I am working on a single-page web site targeted for mobile users (eventually going to be ported to Phonegap). I have broken down my screens into 'cards', which are basically just <div>s that I am showing/initializing/hiding as needed.
Currently I am having trouble deciding on the proper structure to use in order to implement linking these panels together into a coherent app. My current implementation goes something like this (currently using Knockout as I am familiar with it):
//Javascript
var LoginCard = function() {
this.goToRegister = function() {
// IF registerCard is not initialized
// THEN ko.applyBindings(new RegisterCard(), document.getElementById('registerCard'));
// ELSE $('#registerCard').show();
};
this.doLogin = function() { /* Goes to home card after login */ };
}
var RegisterCard = function() {
this.goToLogin = function() { /* Goes back to login card */ };
this.doRegister = function() { /* Goes to login card after reg */ };
}
ko.applyBindings(new LoginCard(), document.getElementById('loginCard'));
//HTML
<div id="loginCard">
<button data-bind="click: goToRegister" id="btnReg">Register Account</button>
<button data-bind="click: doLogin" id="btnLogin">Login</button>
</div>
<div id="registerCard">
<button data-bind="click: goToLogin" id="btnBackToLogin">Back To Login</button>
<button data-bind="click: doRegister" id="btnDoReg">Submit Registration</button>
</div>
As you can see, the linking occurs within the view model itself, so the different view models (e.g. loginCard, registerCard, homeCard) become tightly coupled with each other.
A more "low-level" alternative would just be to use jQuery to bind the button events so that each card does not have to know details about the other cards:
//But this means I have to specify a ton of unique IDs for all the elements in the page.
$('#btnReg').click(function() { /* Initialize and go to registerCard. */ });
I also thought of using hash-routing/pushState so while the click events are still inside each view model, all it has to know is the URL to go to? Something like:
var LoginCard = function() {
this.goToRegister = function() {
window.location.hash = 'register';
//or history.pushState('state', '', 'register';
};
}
This is my first attempt at creating a single-page application, so I am really confused about design choice. Which one would be better, or can anyone suggest the standard way to go regarding this?
I recommend you to create another object for the routing which depends on routing library such as SammyJS or CrossroadsJS.
Please refer my hobby project, MyStory.Spa, it is also single page application style web (not for the mobile app), which is using SammyJS for browser level routing.
In the MyStory.Spa architecture, webapp/app/infra/router.js takes a role for the routing and detailed information about routing, view, viewmodels are in the /webapp/app/infra/routing.table.js.
In this way you can decouple View, ViewModel, Model, Data Service, Routing and so on.
I have a single paged website, in which i've got a div named sitecontent with the width of 4400, which holds 4 "pages". The pages start at 0px of sitecontent, 1100 px of sitecontent, 2200px of sitecontent, and 3300px.
I use Jquery to set de div position to the right px, so i get the right text displayed. After pressing a link i get for example:
<div id="site-content" style="left: -1100px;">
At one of the pages i have to refresh the page, and after this refresh i want the page to display the same "page" on 1100px, but it starts at 0px, the home page.
Is there any way how i can make sure that the sitecontent starts at -1100px of home?
Thanks in advance,
Cheers
You need to append some identifier onto the hash of the URL that you can parse on the page load.
For example:
http://www.somewebpage.com/somepage#page1
Then in the load of the page, you can inspect this hash value and immediately change the UI to show the new page:
var hash = window.location.hash;
if(hash == "#page1")
$('#site-content').css('left', '-1100px');
You can use a cookie to store the value, then, every time the page loads, you need to check the cookie and deal with the value collected:
The link for Jquery Cookie with download and usage manual!
HTML (example)
<a href="#" title="Go Page 1" id="page_01" class="setCookie">
Click to view page 01
</a>
JQUERY (jquery.cookie)
// SET THE COOKIE
$('.setCookie').bind("click", function() {
var pageNumber = $(this).attr("id");
$.cookie('the_cookie_name', pageNumber, { expires: 7, path: '/' });
});
// READ THE COOKIE
$(function() {
var oldNumber = $.cookie('the_cookie_name');
if (oldNumber !== NULL) {
$("#page_"+oldNumber).trigger("click");
}
});
Note:
The link that you currently use to change pages, should have the class "setCookie" to trigger the cookie creation, and also the id that is being used to identify the page number.
One advantage of this is that you can control for how long is the cookie preserved and thus allowing the visitant to resume the website experience.
An approach very similar to what Tejs is proposing would be to use a hash-based routing framework that listens to hash changes. That will result in much cleaner code since you don't need to define the scrolling in two different places.
Every link in your page is currently being observed by a jQuery event listener (onclick -> moves the content container to the show the desired content). The HTML looks probably somewhat like this: Contact details.
With this approach, you don't need to watch those links. Instead, simply make them change the hash: Contact details.
Now observe the hash and react to changes. I'm using the Simrou framework (https://github.com/buero-fuer-ideen/Simrou) but you can go with any other framework that provides similar functionality.
jQuery(document).ready(function() {
// Define a function that moves the content, e.g. moveContent(3300);
function moveContent(pixelPosition) {
$('#site-content').css('left', '-' + pixelPosition + 'px');
}
// Setup the router
var router = new Simrou({
'page1': function() { moveContent(0); },
'page2': function() { moveContent(1100); },
'page3': function() { moveContent(2200); },
'page4': function() { moveContent(3300); }
});
router.start();
});
That's all the javascript you need!
(and here is a quick and dirty fiddle, demonstrating the whole thing: http://jsfiddle.net/R7F6r/)