d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Master single-page Web apps with AngularJS

One of the interesting features of the modern Web is the single-page application (SPA), where all the code and content you need to run an application is delivered either when the page is opened or dynamically as you interact with the page. The single-page app is the logical endpoint of the JavaScript-HTML5 world, but also a complex way of building an application, making it harder to test and debug applications and services.

While you can build a single-page application by hand, it’s an often arcane process of juggling CSS, dynamic HTML, and self-assembling JSON callbacks. Luckily there are tools to help build effective SPAs, using JavaScript frameworks to handle the complexities of coding server interactions in a single page.

Perhaps the most popular of these tools is AngularJS. An open source framework, with contributions from Google and others, Angular offers a mix of declarative and imperative programming tools to separate user interface from business logic. It’s an implementation of the familiar Model View Controller pattern, so you can use it in conjunction with tools like ASP.Net MVC to build server-side and client-side application elements in a single project.

Although Angular is designed to focus on typical data operations, it gives you plenty of options for building your own behaviors and for delivering an application with your own look and feel. Angular also provides a set of tools to help you test and debug complex JavaScript code.

Much of Angular is focused on simplifying code. By relying on declarative statements to handle the user interface and service integration, Angular frees you from writing complex DOM (document object model) manipulations to display responses. Further, Angular handles the marshaling of the data between server and client with two-way data binding, so you no longer need to write code to handle HTTP requests and responses. That leads to what is perhaps the biggest benefit of using Angular: You no longer need to handle callbacks. That means your code is cleaner and easier to read, and you don’t have to parse JSON on the fly.

The heart of an Angular app is an HTML file, used as a template. While it looks like normal HTML, it’s not the code that’s delivered to a browser. When the app is run, your template is passed through the Angular compiler to create a DOM view. Angular uses a few extra HTML directives to define how it works with your code. You’ll start by initializing an app, with directives to define key variables and initial values. These are stored in the app’s model, which can be updated on the fly. Code that’s wrapped in double curly braces — that is, {{…}} — is evaluated as an expression and passed through a filter to format it for display.

Copyright © 2015 IDG Communications, Inc.

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this