single page application

8 results back to index

pages: 180 words: 37,187

AngularJS Essentials by Rodrigo Branas


Firefox, MVC pattern, node package manager, single page application, web application

This httpUnauthorizedInterceptor parameter, in the following code, is responsible for handling the unauthorized error and changing the login property of $rootScope, indicating that the application should open the login dialog: parking.factory('httpUnauthorizedInterceptor', function($q, $rootScope){ return{ 'responseError' : function(rejection) { if (rejection.status === 401){ $rootScope.login = true; } return $q.reject(rejection); } } }); After defining the interceptors, we need to add them to $httpProvider using the config function of the Module API, as follows: config.js app.config(function ($httpProvider) { $httpProvider.interceptors.push('httpTimestampInterceptor'); $httpProvider.interceptors.push('httpUnauthorizedInterceptor'); }); [ 86 ] Chapter 4 Creating a single-page application In the past few years, the single-page application, also known as SPA, has been growing in popularity among frontend developers. It improves customers' experiences by not requiring the page to be constantly reloaded, taking advantage of technologies such as AJAX and massive DOM manipulation. Installing the module AngularJS supports this feature through the $route service. Basically, this service works by mapping URLs against controllers and views, also allowing parameter passing.

48 Animating ngRepeat 49 Animating ngHide 50 Animating ngClass 50 Summary 51 Chapter 3: Data Handling 53 Expressions 53 Filters 55 Basic usage with expressions 55 currency 55 date 56 filter 56 json 57 limitTo 58 lowercase 58 number 58 orderBy 59 uppercase 60 Using filters in other places 60 Creating filters 61 Form validation 62 Creating our first form 62 Basic validation 63 Understanding the $pristine and $dirty properties 65 The $error object 65 Summary 66 [ ii ] Table of Contents Chapter 4: Dependency Injection and Services Dependency injection Creating services Creating services with the factory Creating services with the service Creating services with the provider Using AngularJS built-in services Communicating with the backend 67 68 69 70 74 75 76 76 HTTP, REST, and JSON 76 Creating an HTTP facade 82 Headers 84 Caching 85 Interceptors 85 Creating a single-page application 87 Installing the module Configuring the routes Rendering the content of each view Passing parameters Changing the location Resolving promises 87 87 88 91 92 93 Logging 96 Timeout 96 Asynchronous with a promise-deferred pattern 98 The deferred API The promise API 100 101 Summary 101 Chapter 5: Scope 103 Chapter 6: Modules 115 Two-way data binding 103 $apply and $watch 104 Best practices using the scope 106 The $rootScope object 110 Scope Broadcasting 110 Summary 113 Creating modules 115 The UI module 116 The search module 118 The parking application module 119 Recommended modules 120 Summary 120 [ iii ] Table of Contents Chapter 7: Unit Testing 121 The Jasmine testing framework 122 Testing AngularJS components 124 Services 125 Controllers 126 Filters 128 Directives 129 Creating the element with the directive Compiling the directive Calling the link function with the scope Invoking the digest cycle 130 130 130 130 Mocking with $httpBackend Running tests with Karma 132 140 Installation Configuration Running tests 140 141 142 Summary 143 Chapter 8: Automating the Workflow 145 Automating the workflow with Grunt 145 Installation 146 Configuration 146 Creating a distribution package 147 Executing the workflow 155 Managing packages with Bower 156 Installation 156 Finding packages 156 Installing packages 157 Using packages 157 Cache 158 Summary 158 Index 159 [ iv ] Preface For more than 12 years, I have been developing all kinds of web applications, and along the way, I have had the opportunity to experience the vast majority of frameworks on the Java platform.

doctype html> <html ng-app="parking"> <head> <title>[Packt] Parking</title> <script src="angular.js"></script> <script> var parking = angular.module("parking", []); parking.controller("parkingCtrl", function ($scope) { }); </script> </head> <body ng-controller="parkingCtrl"> </body> </html> There is another way to attach a controller to a specific view. In the following chapters, we will learn how to create a single-page application using the $route service. To avoid undesired duplicated behavior, remember to avoid the ngController directive while using the $route service. [ 20 ] Chapter 2 Nested controllers Sometimes, our controller can become too complex, and it might be interesting to split the behavior into separated controllers. This can be achieved by creating nested controllers, which means registering controllers that will work only inside a specific element of the view, as shown in the following code: <body ng-controller="parkingCtrl"> <div ng-controller="parkingNestedCtrl"> </div> </body> The scope of the nested controllers will inherit all the properties of the outside scope, overriding it in case of equality.


pages: 420 words: 79,867

Developing Backbone.js Applications by Addy Osmani


Airbnb, anti-pattern, create, read, update, delete, database schema, Firefox, full text search, Google Chrome, Khan Academy, loose coupling, MVC pattern, node package manager, pull request, side project, single page application, web application

For this reason we refer to such frameworks as following the MV* pattern; that is, you’re likely to have a Model and a View, but a distinct Controller might not be present and other components may come into play. What is Backbone.js? Backbone.js is a lightweight JavaScript library that adds structure to your client-side code. It makes it easy to manage and decouple concerns in your application, leaving you with code that is more maintainable in the long term. Developers commonly use libraries like Backbone.js to create single-page applications (SPAs). SPAs are web applications that load into the browser and then react to data changes on the client side without requiring complete page refreshes from the server. Backbone is mature, popular, and has both a vibrant developer community as well as a wealth of plugins and extensions available that build upon it. It has been used to create non-trivial applications by companies such as Disqus, Walmart, SoundCloud and LinkedIn.

Backbone focuses on giving you helpful methods for querying and manipulating your data rather than re-inventing the JavaScript object model. It’s a library, rather than a framework, that plays well with others and scales well, from embedded widgets to large-scale applications. As it’s small, there is also less your users have to download on mobile or slower connections. The entire Backbone source can be read and understood in just a few hours. When Do I Need A JavaScript MVC Framework? When building a single-page application using JavaScript, whether it involves a complex user interface or is simply trying to reduce the number of HTTP requests required for new Views, you will likely find yourself inventing many of the pieces that make up an MV* framework. At the outset, it isn’t terribly difficult to write your own application framework that offers some opinionated way to avoid spaghetti code; however, to say that it is equally as trivial to write something as robust as Backbone would be a grossly incorrect assumption.

For instance, it’s trivial to switch between reading an email or document to writing one without sending a new page request to the server. If, however, you’re building an application that still relies on the server for most of the heavy-lifting of page/view rendering and you’re just using a little JavaScript or jQuery to make things more interactive, an MV* framework may be overkill. There certainly are complex Web applications where the partial rendering of views can be coupled with a single-page application effectively, but for everything else, you may find yourself better sticking to a simpler setup. Maturity in software (framework) development isn’t simply about how long a framework has been around. It’s about how solid the framework is and more importantly how well it’s evolved to fill its role. Has it become more effective at solving common problems? Does it continue to improve as developers build larger and more complex applications with it?


pages: 196 words: 58,122

AngularJS by Brad Green, Shyam Seshadri


combinatorial explosion, continuous integration, Firefox, Google Chrome, MVC pattern, node package manager, single page application, web application, WebSocket

As it turns out, we didn’t invent any of these. Instead, we’ve borrowed heavily from successful idioms in other development environments and implemented them in a way that embraces HTML, browsers, and many other familiar web standards. Client-Side Templates Multi-page web applications create their HTML by assembling and joining it with data on the server, and then shipping the finished pages up to the browser. Most single-page applications—also known as AJAX apps—do this as well, to some extent. Angular is different in that the template and data get shipped to the browser to be assembled there. The role of the server then becomes only to serve as static resources for the templates and to properly serve the data required by those templates. Let’s see an example of what assembling this data and template on the browser looks like in Angular.

with the focus highlight. Hitting the spacebar or the enter key will cause a click and invoke the ng-click, which will set the div text to ‘focus button clicked’. Opening this example in a browser, we’d see something that looks like Figure 2-4. Figure 2-4. Focus directive Validating User Input Angular automatically augments <form> elements with several nice features suitable for single-page applications. One of these nice features is that Angular lets you declare valid states for inputs within the form and allow submission only when the entire set of elements is valid. For example, if we’re creating a signup form where we require entering a name and email, but have an optional age field, we can validate several user entries before they are submitted to the server. Loading the example that follows into a browser will display what is shown in Figure 2-5.

We reused the edit template. Depending on which controller is associated, different elements are shown in the edit recipe template. With this done, we can now move on to the templates, how these controllers hook up to them, and manage what is shown to the end user. The Templates Let us start by taking a look at the outermost, main template, which is the index.html. This is the base of our single-page application, and all the other views are loaded within the context of this template: <!DOCTYPE html> <html lang="en" ng-app="guthub"> <head> <title>GutHub - Create and Share</title> <script src="scripts/vendor/angular.min.js"></script> <script src="scripts/vendor/angular-resource.min.js"></script> <script src="scripts/directives/directives.js"></script> <script src="scripts/services/services.js"></script> <script src="scripts/controllers/controllers.js"></script> <link href="styles/bootstrap.css" rel="stylesheet"> <link href="styles/guthub.css" rel="stylesheet"> </head> <body> <header> <h1>GutHub</h1> </header> <div butterbar>Loading...


pages: 671 words: 228,348

Pro AngularJS by Adam Freeman


business process, create, read, update, delete,, Google Chrome, information retrieval, inventory management, MVC pattern, place-making, premature optimization, revision control, single page application, web application

That’s not to say that you can’t use AngularJS with round-trip applications—you can, of course—but there are other technologies that are simpler and better suit discrete HTML pages, such as jQuery. In Figure 3-1 you can see the spectrum of web application types and where AngularJS delivers benefit. AngularJS jQuery Round-Trip Single-Page Figure 3-1.  AngularJS is well-suited to single-page web apps AngularJS excels in single-page applications and especially in complex round-trip applications. For simpler projects, jQuery or a similar alternative is generally a better choice, although nothing prevents you from using AngularJS in all of your projects. There is a gradual tendency for current web app projects to move toward the single-page application model, and that’s the sweet spot for AngularJS, not just because of the initialization process but because the benefits of using the MVC pattern (which I describe later in this chapter) really start to manifest themselves in larger and more complex projects, which are the ones pushing toward the single-page model.

AngularJS includes a lot of built-in functionality, which I describe in depth, and provides endless customization options, all of which I demonstrate. Part 3: AngularJS Modules and Services Part 3 of this book explains the roles that two important components play in AngularJS: modules and services. I show you the different ways you can create both components and explain the wide range of built-in services that AngularJS provides. This includes support for simplifying Single-Page Application development, Ajax and RESTful APIs, and unit testing. Are There Lots of Examples? There are loads of examples. The best way to learn AngularJS is by example, and I have packed as many of them as I can into this book. To maximize the number of examples in this book, I have adopted a simple convention to avoid listing the contents of files over and over again. The first time I use a file in a chapter, I’ll list the complete contents, just as I have in Listing 1-1.

You won’t notice any delay when using the latest browsers on a capable desktop machine, but old browsers on underpowered smartphones can really slow down the initial setup of an AngularJS app. The goal, therefore, is to perform this setup as infrequently as possible and deliver as much of the app as possible to the user when it is performed. This means giving careful thought to the kind of web application you build. In broad terms, there are two kinds of web application: round-trip and single-page. Understanding Round-Trip and Single-Page Applications For a long time, web apps were developed to follow a round-trip model. The browser requests an initial HTML document from the server. User interactions—such as clicking a link or submitting a form—led the browser to request and receive a completely new HTML document. In this kind of application, the browser is essentially a rending engine for HTML content, and all of the application logic and data resides on the server.


pages: 290 words: 119,172

Beginning Backbone.js by James Sugrue


Airbnb, continuous integration, Firefox, Google Chrome, loose coupling, MVC pattern, node package manager, single page application, web application, Y Combinator

Now that Ajax had proved itself and the JavaScript ecosystem was providing more robust libraries and frameworks, single-page applications were easier to implement. These applications are not without their challenges. For a single page to deal with different stages in the application life cycle, page state is required. In addition, there is a need to enable the user to bookmark the application at a particular stage—this one of the places where Backbone really helps alleviate the complexity of implementing such solutions. The wide array of smartphones and tablets, all with their own platforms and idiosyncrasies, have led a significant majority of developers to work on HTML5-based web apps that behave in a similar fashion to native apps. Single-page applications enable such applications to be built and made available directly from web sites, rather than requiring users to acquire the app through the app store on their device.

Single-page applications enable such applications to be built and made available directly from web sites, rather than requiring users to acquire the app through the app store on their device. The Continuing Need for Structure As browser-based applications continue to dominate, the architecture behind single-page applications becomes much more significant. With so much logic now residing in the client side, it’s clear that the practices and patterns that have applied to traditional desktop applications are now relevant in JavaScript. The core part of this is to have a data model at the center of your application. As your products grow in complexity, it is necessary to be able to track the state of many different components. 2 Chapter 1 ■ An Introduction to Backbone.js Gmail is a classic example of this (see Figure 1-1). You need to track whether a message has been read or not, as well as the date, subject, sender, and message content.


pages: 190 words: 52,865

Full Stack Web Development With Backbone.js by Patrick Mulder


Airbnb, create, read, update, delete, Debian, MVC pattern, node package manager, side project, single page application, web application

The goal of this book is to show how clientside applications can evolve from basic interaction ideas, and how more modular and maintainable web applications can be built. Other Resources To understand the perspectives in this book, you need a sound knowledge of JavaScript, browsers, and DOM manipulation, as well as a basic knowledge of web applications. Also, there are a number of resources available to go deeper into single-page application development. The JavaScript Language To learn JavaScript, there are a number of good resources available: JavaScript Garden This is an open source resource on programming in JavaScript. This online guide is a good place to turn to for improving your understanding of quirky aspects of the language without consulting a book. x | Preface JavaScript: The Good Parts by Douglas Crockford (O’Reilly/Yahoo!

With Firebase, you now have a dashboard to easily import more movies and track mov‐ ies usage. You can also wire up Firebase with other APIs via Zapier to trigger sending emails or other tasks. This might be interesting for some applications, but for others, you want to build your API yourself. This will be the topic of the next chapter. Conclusion In this chapter, you made quite some progress toward a full, single-page application that fetches data from a remote data store. To prevent developing a full backend at this stage, we saw a strategy to mock a RESTful API with canned. We then used the mock API to learn about different approaches to populate the Movies collection over a network. First, we learned about the basic events Conclusion | 95 that are evolved. Then, we discussed the different options to influence fetch() for different needs.


pages: 266 words: 38,397

Mastering Ember.js by Mitchel Kelonye


Firefox, MVC pattern, single page application, web application, WebRTC, WebSocket

One feature that we introduced is the ability of the controller to reference other controllers. We will discuss this in a later section, but the important thing to note is that we are able to generate results by filtering the model of the posts controller. The search template automatically redisplays results as the user types along. This example demonstrates how trivial it is to add such seemingly difficult features in single-page applications. Here are a few other features that you can try adding into the application: A spinner that shows up new posts every time are being loaded from the server. Now is a good time to revisit the loading-and-error action hooks we discussed in Chapter 3, Routing and State Management. Define a humanizedDate computed property for each of the loaded posts. Let this property return the post's date in a readable format such as Mon, 15th.


pages: 323 words: 65,306

Programming in CoffeeScript by Mark Bates

Amazon:, MVC pattern, node package manager, single page application, web application

The first was AJAX.2 AJAX enabled developers to make web pages more interactive, and faster, by making remote calls back to the server in the background without end users having to refresh their browsers. The second was the popularity of JavaScript libraries, such as Prototype,3 that made writing cross-browser JavaScript much simpler. You could use AJAX to make your applications more responsive and easier to use and a library like Prototype to make sure it worked across major browsers. In 2010, and certainly in 2011, the Web started evolving into “single page” applications. These applications were driven through the use of JavaScript frameworks, such as Backbone.js.4 These frameworks allowed the use of an MVC5 design pattern using JavaScript. Whole applications would be built in JavaScript and then downloaded and executed in the end user’s browser. This all made for incredibly responsive and rich client-side applications. On the developer’s side, however, things weren’t all roses.