Single Page Application
Download as DOCX, PDF2 likes785 views
The document discusses single page applications (SPAs) and how AngularJS can be used to build them. Some key points: - SPAs load all necessary code (HTML, CSS, JavaScript) with a single page load and update dynamically without reloading the page. This provides a more desktop-like user experience. - AngularJS supports building SPAs through features like data binding, scopes, controllers, services, and directives that help manage state and update the view. - In an AngularJS SPA, the server handles CRUD operations and authentication through a REST API, while the client manages the UI, makes AJAX calls, and performs routing and validation. - AngularJS
Single Page Application
- 1. Single Page Application Single Page Applicationalso called SPA – is creating a huge impact of web application development.This brings in lot of benefitto web application development – since it brings in lot of features like 1. Componentbased development 2. Stateful development. 3. MVC creation using JavaScript tightly coupled. 4. Encapsulated with State data. 5. Operations/methodsare tightly bound to class. A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In an SPA,either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or partial changes are performed loading new code on demand from the web server, usually driven by user actions. The page does not automatically reload during user interaction with the application, nor does control transfer to another page. Updates to the displayed page may or may not involve interaction with a server.
- 2. As shown above in the picture one single web page which assembles the components and it maintains the state. The current web sites switches between different sites. Write-only DOM. No state / data is read from the DOM. The application outputs HTML and operations on elements, but nothing is ever read from the DOM. Storing
- 3. state in the DOM gets hard to manage very quickly: it is much better to have one place where the data lives and to render the UI from the data, particularly when the same data has to be shown in multiple places in the UI. Models as the single source of truth. Instead of storing data in the DOM or in random objects, there is a set of in-memory models which represent all of the state/data in the application. Views observe model changes. We want the views to reflect the content of the models. When multiple views depend on a single model (e.g. when a model changes, redraw these views), we don't want to manually keep track of each dependent view. Instead of manually tracking things, there is a change event system through which views receive change notifications from models and handle redrawing themselves. Decoupled modules that expose small external surfaces. Instead of making things global, we should try to create small subsystems that are not interdependent. Dependencies make code hard to set up for testing. Small external surfaces make refactoring internals easy, since most things can changes as long as the external interface remains the same. Minimizing DOM dependent-code. Why? Any code that depends on the DOM needs to be tested for cross-browser compatibility. By writing code in a way that isolates those nasty parts, a much more limited surface area needs to be tested for cross-browser compatibility. Cross-browser incompatibilities are a lot more manageable this way. Incompatibilities are in the DOM implementations, not in the Javascript implementations, so it makes sense to minimize and isolate DOM - dependent code On a Single Page Application, the server-side will be responsible for: Handling CRUD (Create, Read, Update and Delete) operations
- 4. Executing different operations and workflows (these may include changing states of entities, updating database records) Authentication and Authorization (this should always be done on the server side to ensure that the requests are legitimate) Validation of web requests Providing an interface for the client application to perform operations (typically done via a REST API) The client side will be responsible for: Populating and rendering the UI with proper data Access the server via AJAX Perform client side routing Perform client side validation Angular JS this is one tool which helps in creating SPA application
- 5. Data-binding: It is the automatic synchronization of data between model and view components. Scope: These are objects that refer to the model. They act as a glue between controller and view. Controller: These are Javascript functions that are bound to a particular scope. Services: AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app. Filters: These select a subset of items from an array and returns a new array. Directives: Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel...)
- 6. Templates:These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials". Routing: It is concept of switching views. Model View Whatever: MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever. Deep Linking: Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state. Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test. Advantages of AngularJS AngularJS provides capability to create Single Page Application in a very clean and maintainable way. AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience AngularJS code is unit testable. AngularJS uses dependency injection and make use of separation of concerns. AngularJS provides reusable components. With AngularJS, developer write less code and get more functionality. In AngularJS, views are pure html pages, and controllers written in javascript do the business processing. On top of everything, AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.
- 7. Sample Loading Stack on how the modules are getting loaded All the specific functionalities are defined as modules in the system which mostly representobjects – Apps.js This does the routing part on click of what which module should be routed will be handled by - States.js The Screen representationwhich is Html definition of the screens will be mentioned here. Every html will be supported by one controller this controller provides the supportive functionality for the screens. The Associated data which is populated from the Mongo DB is essentially pulled from Service.js this makes a remote call in pulling the data