In an era when multitasking and efficiency is a necessity, web-based Single Page Applications (SPAs) are havens. The term ‘single page application’ refers to a website which has all of its contents accessible in only one page. It makes use of templates and data injection, as well as other techniques, to avoid having to reload all the data on every page change.

To create a single page web application using Angular JavaScript templates, you’ll need a JavaScript file that will contain all the Angular code. Have an index.html file, which will serve as your main layout. After coding your headers and navigation bars, this is were you will inject the Angular template:

<div id=”body”>

<!– Inject Angular template content here –>

</div>

In your JavaScript file, create the module and the controller. The controller is where you implement the business model functions:

var spApp = angular.module(‘spAppView”, []);

// Integrate the controller and inject the angular #scope: spAppView.controller(sampleViewcontroller,function($scope){

// Insert function code here

$scope.sampleData = “This is an example”;

}

To display this data in your page, you need to create an HTML file for its container view (excluding the default tags like <html> or <body> etc.):

<div>

<div>

<input type = “text” data-ng-model=”sampleData” />

</div>

</div>

<div>

<div>

<h1> Sample Header ({{sampleData}}) </h1>

</div>

</div>

The ‘ng-model’ denotes two-way binding so that when the values in the model changes, the value displayed in the view will also change (and vice versa).

To map the view and controller, you will need another controller script with Angular Routing. The $routeProvider will wire the controllers and the templates together:

var app = angular.module(‘SampleSPApp’, [‘ngRoute’, ‘ngResource’, ‘ui.bootstrap’]);

app.config(function($routeProvider){

$routeProvider.when(“/explore”,{

controller: “sampleViewController”,

templateUrl: “/app/views/sampleView.html”

});

 

$routeProvider.otherwise({redirectTo: “/explore”});

});

Going back to the main index body, add this line to call the ‘ng’ view:

<body>

<div data-ng-view=””></div>

</body>

Finally, at the end, don’t forget to load the JavaScript files:

<script type=”text/javascript” src=”app/SampleSPApp.js”></script> // Main Script

<script type=”text/javascript” src=”app/controllers/sampleViewController.js”></script>

What are the benefits?

Speed. When you have a home page, with buttons and links that direct you to other pages in the site, each time you click them means time spent sending the request to the server and the server returning the data. Of course, loading a web application with all the information in one go takes longer than loading a specific page with specific data. But collectively speaking, sending a request, loading everything at once and navigating through them seamlessly is much faster than having to refresh the data repeatedly.

The reduction in data being transferred allows for enhanced responsiveness and interactivity. When you load an individual page, not only do you reload the main content, but you also reload layout data, data from the previous pages and a lot more. By having a single page, user data does not have to bounce back and forth just to be preserved in different pages. You can also choose to manipulate only one view or container in the page. This allows the web application to respond much quicker to the user’s actions and requests.

Reduced Server Load. Often times pages are designed with elements that are visible in all the pages of the web application, such as collections of links, advertisements, news corners, chat boxes and a lot more. For every page that loads, these get repetitively loaded as well. SPAs lighten the load of the server by loading all of them only once and changing only the body content or screen location. Thus, the states of the other parts of the page are preserved and repetitive requests to the server are minimized.

Single page web applications are becoming a trend because they tend to feel more like a native application rather than something loaded from the Internet. It makes the experience more efficient and convenient for the users. It’s still a young technology that is waiting to be developed and utilized for the benefit of all web users and developers.

 

Top 10 CSS Tips for Web Developers

 

Since the inception of internet and World Wide Web, CSS and HTML have been tied to each other in conjugal bond. While HTML is probably one of the easiest markup language to learn, learning CSS is not that simple. Structuring a webpage is not much of a task. However, achieving desired layout and look and feel of a web page entails rigorous practice and profound understanding of cascading style sheets. There are some CSS tips and practices that every web developer must know in order to efficiently set the layout of the page. This article presents 10 of the most important CSS tips for web developers.

1 – Implement style-sheet inheritance

It is recommended to use a single CSS document for the whole project. This helps with easy editing and updating of the style of your website as only one document will ever have to be updated. However, if multiple style-sheets have to be used, make sure that they implement only intrinsic properties while inheriting common properties from top level style-sheets.

2 – Style top level elements first

CSS styling is complex and the order in which elements should be styled is extremely important. The rule of thumb is to always style top level elements first and then the inner elements. For instance, HTML and BODY tags should be styled before styling encapsulated DIV tags.

3 – Understand when to use IDs and Classes

IDs and classes are the most misused styling elements in CSS. However, the difference between the two is simple: Use IDs when you do not want to repeat your style for more than one element and use classes when you want to style multiple elements.

4 – Understand CSS box model

In order to properly position your elements, grab thorough understanding of the CSS box model. CSS box model makes life for developers easier.

5 – Shift to flex-box model

CSS box model is sufficient enough to implement website positioning, however CSS3 has introduced flex-box model that is even simpler. Get hands-on practice of the flex-box model. This is the future of CSS.

6 – Give logical names to Classes and IDs

Classes and IDs should be logically named in the CSS file and should correspond to the tags which they will style. This is important for code organization and debugging.

7 – Center elements via style-sheets

Do not use center tags to center-align the elements. This approach has become obsolete. Rather use style-sheets to center text and areas of the HTML document. This can be done via text-align property and the margin property.

8 – Learn to use debugging tools

There are several browser-based debugging tools that can highlight CSS of the page on the fly when you hover your mouse over a particular tag. Two recommended browser based tools are Chrome’s Inspect Element and Mozilla’s Fire Bug.

9 – Switch to CSS3

Though not a standard yet, most of the new development projects are done in HTML5 and CSS3. Sooner or later, CSS3 would become the standard, therefore it is important to have solid foundation of the CSS3 concepts ahead of the time.

10 – Practice, Practice, Practice

There is a myriad of free online resources available where code samples can be downloaded. Whenever you come across some cool visual web element with appealing look and feel, try to inspect its CSS via Firebug or Inspect Element. Remember, practice makes perfect and this rule apply wholly to cascading style sheets as well.