In the last couple of years, the web development landscape has changed dramatically following the mainstream adoption of smartphones and tablets. Mobile web traffic has increased substantially in 2013 alone, reaching almost a third of the total web traffic and the increase is expected to continue in the near future. Websites are now expected to work on a wide range of devices and form factors and they have to support an unprecedented diversity of browser clients. Web applications based on browser plugins such as Java, Adobe Flash, and Silverlight have become problematic as these plugins are not available or not supported on all devices.
Parallel with these changes, all major browser vendors have accelerated the work to define and implement web standards such as HTML5 and CSS3 and JavaScript standards such as ECMAScript 5.1 and the upcoming ECMAScript 6. Although not all these standards are final or complete, a succession of browser releases from all vendors have continuously improved standards support and the performance of client-side content and code. The wider development community also contributed to the standardization effort by providing various tools and libraries. These have extended web standards support for older browsers and unified different browser implementations of similar features under a common programming model.
A new web development ecosystem based on open standards, tools, and libraries emerged. It was used as a solid base to build modern web applications that embrace HTML, CSS, and JavaScript rather than abstracting them away. It also allowed for applications based on browser plugins to be gradually replaced by new versions based on HTML, CSS, and JavaScript. The focus on leveraging client-browser capabilities for rendering and manipulating content led to the adoption of a new type of application called a single-page application. It was made popular by the Google Mail and Google Maps web applications, which were very responsive, easy to use, and had a look and feel similar to desktop applications.
A single-page application typically has initial resources and content generated server side on the first application request, and for all subsequent requests, it will use client-side code to load any required resources and display content. A single-page application can also have one or more static pages that serve as physical entry points. Microsoft and Google made this type of application a first-class citizen in the software development kits for their operating systems in the form of Windows Store apps and Chrome apps. Cross-platform mobile development has also embraced HTML, CSS, and JavaScript in frameworks such as PhoneGap/Apache Cordova. Single-page applications have transitioned from consumer-focused applications to enterprise-focused applications in development models like the ones introduced by Microsoft with apps for Office and apps for SharePoint in Office 2013 and SharePoint 2013.
The building of modern web applications that include single-page applications involves the adoption of development approaches such as responsive web design (when the application adapts seamlessly to the browser-client resolution and orientation) and progressive enhancement (when the application provides different content based on the browser-client capabilities and the available network connection). A need for rapid prototyping, rich client features, and the reality of having to maintain large JavaScript code bases are other aspects that make the development process challenging and costly when compared with typical desktop application development.
The rise and mass adoption of jQuery and its plugin ecosystem after 2006 addressed the problem of rich client features. The increasingly complex JavaScript code bases remained a challenge that started to be addressed by the adoption of test frameworks, such as QUnit in 2008 and Jasmine in 2010, and new application frameworks, such as Backbone.js and Knockout.js in 2010. The application frameworks were implementing derivatives of a software design pattern common in server-side web application frameworks such as ASP.NET MVC: the Model-View-Controller (MVC) pattern. This pattern makes a clear distinction between components such as application data and business rules represented by the Model and the presentation of the application data in any shape or format represented by the View. The Controller component sits in the middle, passing data to or from the Model and updating the View or responding to View changes that are passed to the Model. This abstraction brings benefits like better code reuse (the same Model can be used by multiple Views), testability (the Controller can be tested in isolation from the View), and a more efficient development workflow (for example, while the developer works on a Controller, the designer can modify the View).
In the same timeframe, another JavaScript framework called AngularJS was being developed at Google. This framework was also based on the MVC pattern, and its strong points were that it could enhance and extend HTML by adding new elements and declarative behavior, and it could be tested from the start using modular, composable code units. With the 1.0 release in 2012, and since 2013, its popularity has grown more and more, with the high points being the 1.2 release in late 2013 and its first conference, called ng-conf, in January 2014.
Reflecting the popularity of single-page applications, Microsoft has started to provide support for this new application paradigm with Visual Studio 2012. With Visual Studio 2013, this support was enhanced, and a couple of recent Visual Studio extensions provide excellent support for AngularJS. Now is a great time to learn AngularJS if you are a .NET developer.
The main focus of this book is on how to rapidly prototype and build modern web applications with AngularJS in the context of .NET development tools and frameworks. The book assumes the reader has already built websites, web applications, or web services using Microsoft technologies such as ASP.NET, ASP.NET MVC, Silverlight, or WCF and knows the fundamentals of HTML5, CSS3, JavaScript, jQuery, and ASP.NET MVC.
Chapter 1, Introducing AngularJS, teaches the reader how to manipulate HTML using AngularJS. The reader will also learn about the core parts of AngularJS. A series of examples will gradually showcase the main AngularJS features. After a high-level overview of the AngularJS architecture, a more complex example will be shown, allowing the reader to see how data binding works and how to respond to user events. The chapter will end with an overview of the JavaScript patterns that are essential for AngularJS applications, which will be followed by an overview of AngularJS building blocks.
Chapter 2, Creating an AngularJS Client-side Application in Visual Studio, teaches the reader how to use Visual Studio to build an AngularJS application. A walkthrough to set up the development environment using the AngularJS NuGet packages will be followed by a presentation of the workflow involved in building an AngularJS application and some of the best practices in organizing the project structure. The final topic will cover building a complex AngularJS application.
Chapter 3, Creating .NET Web Services for AngularJS, teaches the reader about RESTful web services, how to use a .NET web service framework that is a great fit for AngularJS, and how to create web service resources for AngularJS. A brief presentation of the REST principles will be followed by a discussion on why RESTful web services work very well with AngularJS. An overview of the .NET web services framework, ServiceStack, will evolve into a walkthrough to create the required web service resources that will be used in the AngularJS example from the previous chapter.
Chapter 4, Creating an AngularJS, ASP.NET MVC, ServiceStack Application, teaches the reader how to integrate an AngularJS application with ASP.NET MVC and ServiceStack and how to create a production-ready application. An overview of ASP.NET MVC will be followed by a discussion about when you need to combine ASP.NET MVC and AngularJS. A walkthrough of how to set up routing with ASP.NET MVC and how to secure AngularJS applications will be next and the chapter will conclude with presenting additional tasks needed for AngularJS and backend integration.
Chapter 5, Testing and Debugging AngularJS Applications, teaches the reader how to test and debug AngularJS components, test web services, and how to implement end-to-end testing. The next topics are a discussion about why it is important to test web service endpoints, how to test them, and what additional tasks are needed for IE 8 support.
Chapter 6, Advanced AngularJS Topics, teaches the reader about advanced topics such as internationalization, animations, JSONP and CORS considerations, and template caching.
The minimum software requirement is Visual Studio 2013 Express for Web and the recommended one is Visual Studio 2013 Professional. For testing and debugging AngularJS applications, you also need to install Node.js, Node.js Tools for Visual Studio, and Java SE Development Kit 7 (JDK 7).
The book is targeted at .NET developers who have already built web applications or web services and have a fundamental knowledge of HTML, JavaScript, and CSS.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "It will match some regular HTML tags such as input and select if they contain ng- prefixed attributes or CSS classes."
A block of code is set as follows:
var myAppModule = angular.module('myApp', []);
myAppModule.controller('ExampleController', function ($scope) {
$scope.name = "Alex Pop";
$scope.previousName = "";
$scope.onNameFocused = function() {
$scope.previousName = $scope.name;
};
});When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
var myAppModule = angular.module('myApp', []);
myAppModule.controller('ExampleController', ['$scope', function ($scope) {
$scope.name = "Alex Pop";
$scope.previousName = "";
$scope.onNameFocused = function() {
$scope.previousName = $scope.name;
};Any command-line input or output is written as follows:
Install-Package AngularJS.Core -Version 1.2.15
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "The main menu for our application will contain three links to the three main views: Rentals, Customers, and Bicycles."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.