Mastering AngularJS for .NET Developers - Sample Chapter

Fr

ee

Sa

m

pl

e

In this package, you will find: • • • •

The authors biography A preview chapter from the book, Chapter 1 'Introduction' A synopsis of the book’s content More information on Mastering AngularJS for .NET Developers

About the Authors Mohammad Wadood Majid has been working in the field of application development and design for more than a decade for some major companies in the USA. During this time, he has worked independently as well as with teams to develop a number of highly successful enterprise applications for the Web and mobiles. He is experienced in the development, designing, testing, modification, and maintenance of enterprise applications. Currently, he is working as an enterprise application administrator and developer and a part-time assistant professor at the University of Toledo. He has worked extensively with MVC, web APIs, ASP.NET, ADO.NET, C#, OData, and RESTful. He has expertise in native mobile apps and webbased application development that can be performed using HTML5, JavaScript, jQuery, Bootstrap, AngularJS, and CSS. He has experience of working with databases such as SQL Server 2012 and Oracle 11g. He has also performed research on the following topics: • • •

Parallel implementation of algorithms on multicore and NVIDIA's GPU Parallel computation of moving target detection and recognition from a set of radar signals Development of parallel programs using multicore and NVIDIA's GPU for artificial intelligent algorithms, such as evolutionary neural networks and genetic algorithms

Golrokh Mirzaei has several years of software development experience in the software industry and is currently working as a faculty at the Ohio State University. His research involves the development of software applications and multisensor data fusion approach to monitor biological targets using three different sensors: infrared camera (IR), radar, and acoustics. The infrared camera and radar sensors involve video and image processing techniques, including object detection and recognition, feature extraction, classification/clustering, and tracking. He has published several papers at professional IEEE conferences and received several awards. His developments in the field of image processing and computer vision are unique, related to multifidelity, and multidisciplinary. He has also performed research on the following topics: • • • • • •

Pattern recognition (object detection, feature extraction, tracking, and so on) Machine learning (supervised/unsupervised learning) Classification/clustering Image/video/audio processing (infrared camera, radar, and acoustics) Bio-inspired computing (ACA, ACO, and GA) Bayesian inference and fuzzy reasoning

Mastering AngularJS for .NET Developers Application development is a broad term; it can range from developing the simplest static page of plain text to the most complex database-driven, electronic business, and social networking applications. A more comprehensive list of tasks that application development commonly refers to may include, web designing, content development, client relationships, client-side and server-side configurations, and deployments. In the past, most developers developed server-side applications because of an available server-side framework called Windows Presentation Foundation (WPF) or web frameworks such as ASP.NET or Silverlight. These are used to create objects containing data and bind them to user interface controls such as HTML. However, improved browser features, faster JavaScript engines, and an increase in the usage of mobile devices, such as iPads, iPhones, and Android tablets have definitely shifted the trend from server-side to client-side development. However, data binding has been difficult to implement into client-side application development because neither HTML nor JavaScript natively support it. It is possible to start client-side data binding from scratch; but, it is definitely challenging and possibly not the best solution available. It is also very difficult to maintain and reuse the code. To create a client-side application is an amazing ability, although, the complexity involved in creating it is high. To develop a clientside application involves manipulating the Document Object Model (DOM) in a browser running JavaScript. One of the benefits of client-side applications is that HTML (DOM) will be updated with the click of a button, rather than keeping a user waiting for the server to respond. In the case of server-side rendering, it is very difficult to update the portion of the page. Any portion of a page that's animated or highly interactive (such as a draggable slider, sortable table, or a drop-down menu) almost certainly uses client-side rendering. For the last several years, the application development landscape has changed drastically because of an increase in the use of mobile devices, such as smartphones and tablets. In 2013, mobile web traffic had increased substantially to almost a third of the total web traffic; and it's expected is to increase in the near future. Applications are expected to be able to work on different platforms, such as Windows, web, and mobiles. In order to create multiplatform applications; an application should be enabled to support diverse client browsers and plugins, such as Java and Adobe Flash. The application becomes problematic if the plugins are not available or aren't supported on all devices.

Client-side application development environments enable developers to slowly and gradually replace applications, which are based on browser plugins with newer versions of HTML, CSS, and JavaScript. While previous development tools would abstract away the key elements of HTML, CSS, and JavaScript, client-side development developed all these tools. Using client-side development, a programmer can now render and manipulate content by focusing on client-browser capabilities. Several client-side application development approaches, such as responsive page design and progressive development are adopted to build modern web applications that include single-page applications. The development process of these type of applications is, however, challenging and costly when compared to other applications, because they need rapid prototyping, rich client features, and a large JavaScript base to be employed. Another JavaScript framework that has been developed in the same time frame is the AngularJS framework by Google. There are many libraries that have been introduced, such as QUnit in 2008, Jasmine in 2010, and Backbone and Knockout.js in 2010. These libraries address challenges that involve solving client-rich features. They use derivatives involved in a design pattern, such as Model-View-Controller (MVC), which is common in both server and client-sides. During the design, application data and business logic need to be clearly differentiated. This differentiation is achievable by MVC patterns, and the controller components sit in the middle. The controller has access to all the different elements of the application, thus passing the data to and from the model, updating the view, or responding to view changes that are passed to the model. There are several advantages of using an MVC design pattern; these include reusing code in a better manner (the same model can be used for multiple views), testability (the controller can be tested from a view), and efficient development workflows that are achieved due to the designer's ability to modify the view. AngularJS can enhance and extend HTML by adding new elements to it and it is based on the MVC pattern. It can also be tested from the start using modular, composable code units. AngularJS has only grown in popularity since its introduction in 2012.

What This Book Covers Chapter 1, Introduction, acquaints you to understanding the need for clientside development and also to AngularJS. You will also get acquainted with the anatomy of AngularJS and its conceptual overview. Finally, we will discuss the basics of a single page application development process. Chapter 2, Learning AngularJS Binding and Directives, focuses on showing you how the AngularJS data binding works. You will also learn about the use and development of AngularJS directives through code examples.

Chapter 3, AngularJS Scopes, Controllers, and Filters, the goal of this chapter is to understand AngularJS scope as well as the controller and its use in AngularJS. We will also cover the built-in filters of AngularJS and show you how to develop a custom filter. Chapter 4, Communicating with the Server Using AngularJS, focuses on how AngularJS communicates with server-side code, such as web API, web services, or Data Access Layer (DAL). In this chapter, we will discuss how to retrieve data from the server using $http and $resources. This chapter also talks about the authentication and security used for a AngularJS application. Chapter 5, Creating Applications Using AngularJS, Entity Framework, and ASP.NET Web API, focuses on how to connect to a database using Entity Framework. In this chapter, we will discuss how to create a web API using ASP.Net and how to consume through AngularJS. Chapter 6, Using AngularJS and ASP.NET Web API for CRUD Operations, will start with web API routing and then focus on how to Create, Read, Update, and Delete records from a database using the ASP. Net web API and the AngularJS $http and $resource directives. We will also discuss the difference between $http and $resource. At the end of this chapter, we will talk about how to secure the ASP.Net web API. Chapter 7, Troubleshooting and Best Practices, focuses on troubleshooting libraries and tools for AngularJS. In this chapter, we will also discuss how to perform unit testing of the Angular JS application using Jasmine and Karma. At the end of chapter, we will go through the AngularJS coding best practices. Appendix, Angular 2.0, introduces us to the Angular 2.0 framework. It may not be a major update to the previous version, but is a complete rewrite of the entire framework and includes significant changes. Here, we also talked about certain Angular 2.0 changes. Angular 2.0 will hopefully be released at the end of 2015.

Introduction The goal of this chapter is to understand the need for client-side development and to understand AngularJS. We will also get acquainted with the anatomy of AngularJS and its conceptual overview. Finally, we will discuss the basics of a single-page application development process. This chapter is organized as follows: •

Understanding the need for client-side development

•

Understanding AngularJS

•

Getting acquainted with the anatomy of AngularJS

•

The conceptual overview of AngularJS

•

Learning the basics of a single-page application

Understanding the need for client-side development Application development is a broad term; it can range from developing a simple, static page of plain text to developing the most complex database driven electronic businesses and social network applications. A more comprehensive list of tasks, which application development commonly refers to, may include web designing, content development, client relationship, client-side configuration, server-side configuration, and deployment.

Introduction

In the past, most developers were developing server-side applications because of the available server-side frameworks. Windows Presentation Foundation (WPF) or web frameworks, such as ASP.NET or Silverlight, are used to create objects that contain data and to bind them to user interface controls, such as HTML. However, improved browser features, faster JavaScript engines, and the increase in the usage of mobile devices, such as iPad, iPhone, and Android devices, have definitely shifted the trend from server-side to client-side development. However, data binding has been difficult in client-side application development because neither HTML nor JavaScript natively supports data-binding. It is possible to achieve client-side data binding from scratch; however, it is definitely challenging and possibly not the best solution available. It is also very difficult to maintain and reuse the code. To create a client-side application is an amazing ability although the complexity involved in creating a client-side application is high. To develop a client-side application means to manipulate the Document Object Model (DOM) in a browser that runs JavaScript. One of the benefits of client-side applications is that HTML (DOM) will be updated with the click of a button, rather than the user waiting for the server to respond. In the case of a server-side rendering, it is very difficult to update the page. Any portion of a page that's animated or highly interactive (a draggable slider, sortable table, drop-down menu) almost certainly uses client-side rendering. For the past several years, the application development landscape has changed drastically because of the increase in the use of mobile devices, such as smartphones and tablets. In 2013, mobile web traffic increased substantially to almost a third of the total web traffic; this web traffic is expected to increase in the near future. Applications are expected to be able to work on different platforms such as Windows, web, and mobile. In order to create multiplatform applications, the application should support the diversity of client browsers and plugins, such as Java and Adobe Flash Player. This is because an application becomes problematic if the plugins are not available or not supported on all devices. A client-side application development environment enables developers to slowly and gradually replace applications based on browser plugins with newer versions of HTML, CSS, and JavaScript applications. While previous development tools would abstract away the key elements of HTML, CSS, and JavaScript, client-side development embraces all these tools. Using client-side development, a programmer can now render and manipulate content by focusing on client-browser capabilities. Several client-side application development approaches, such as responsive page design and progressive development are adopted to build modern web applications that include single-page applications.

[2]

Chapter 1

The development process of these types of applications is however challenging and costly when compared to other applications because these applications need rapid prototyping, rich client features, and a large JavaScript base for them to be employed. Another JavaScript framework that has been developed in the same timeframe and is widely used for developing single-page applications is the AngularJS framework by Google. There are many libraries that have been introduced, such as QUnit in 2008, Jasmine in 2010, and Backbone.js and Knockout.js in 2010. These libraries address the challenges that are involved in solving the rich client features. These libraries use derivatives for a design pattern, such as Model-View-Controller (MVC), which is common in both server-side and client-side. During the design, application data and business logic need to be clearly differentiated. This differentiation is achievable by MVC patterns where the controller components sit in the middle. The controller has access to all the different elements of the application; thus, it passes the data to and from the model, updates the view, or responds to view or changes that are passed to the model. There are several advantages of using the MVC design pattern, such as better code reuse (same model can be used for multiple views), testability (controller can be tested from view), and efficient development workflow that is achieved due to the designer's ability to modify the view. AngularJS can enhance and extend HTML by adding new elements to it and AngularJS is based on the MVC pattern. It can also be tested from the start using modular, composable code units. AngularJS has grown in popularity since its introduction in 2012.

Client-side data binding libraries The use of client-side data binding is becoming more widespread as more and more developers are writing client-side applications. Most of these libraries follow the MVC or Model-View-ViewModel (MVVM) design pattern and some of these libraries directly integrate with the server framework, such as Knockout.js. The following table illustrates the list of a few client-side data binding libraries that can be used for a client-side application development: Library name

Description

AngularJS

AngularJS uses the MVC and MVVM design pattern.

Backbone.js

Backbone.js follows the MVC design pattern for data binding and uses key/value binding as well as customer events.

Derby

Derby provides a framework that runs in the browser and supports data binding and templates.

[3]

Introduction

Library name

Description

Ember

Ember uses templates that update the DOM automatically as the data changes.

jQXB Expression Binder

jQXB Expression Binder is a jQuery plugin that supports two-way data binding and it is very lightweight.

JsViews

JsViews is a data binding framework that binds views through the JsRender template.

KnockoutJS

KnockoutJS uses the MVVM design pattern and directly integrates with the server framework.

Meteor

The Meteor framework uses Node.js on server side and supports data-binding on client side.

Simpli5

Simpli5 is a JavaScript framework that provides support for twoway data-binding.

Nowadays, the cross-platform application development that uses the client-side binding is more popular. Most of the client-side script libraries retrieved from the server using the JavaScript Object Notation (JSON) format and dynamic binding of the HTML elements can be achieved by employing the JSON format. This is because JSON uses multiple client-side libraries and it is an advanced subset of JavaScript itself. JSON is a preferred client-side application format that parses and transmits data using a lightweight framework, making reading and writing of data easier.

Understanding AngularJS The popularity of developing client-side applications for mobile devices, such as iPhones, iPads, and Android tablets is a direct result of market penetration and a growing user base for these devices. Moreover, JavaScript, the MVC framework, and other libraries, such as Backbone.js, Node.js, and so on, have been released and adopted in the mainstream programming. In this section, we will discuss what AngularJS is and its importance.

What is AngularJS? AngularJS is a client-side JavaScript library, which has been developed based on the MVC design pattern. AngularJS is used for client-side data binding of client-centric applications. It is open source and used by Google Inc. and its Google community. AngularJS assists to create a client-side application that needs HTML, CSS, and JavaScript. AngularJS's JavaScript framework is an effort taken to make both development and testing of application easier.

[4]

Chapter 1

AngularJS contains additional custom HTML tags. It submits the directives in those custom HTML tags and binds the HTML elements in client side with a model's data using standard JavaScript. The values of the JavaScript variables can be set or retrieved dynamically with JSON resources. The way AngularJS's data binding and dependency injection works is that it helps to write very less or no code for the client-side binding. AngularJS is a structural framework for dynamic application development. It lets HTML express an application's components very clearly and concisely within the browser. AngularJS proves to be a good candidate to work with the server technology and especially with ASP.NET and Microsoft's MVC. These days, AngularJS is popular because it extends HTML with additional elements to create a template and to enable DOM for one-way or two-way binding. In real applications, in addition to data binding between view and model, executing the business logic depends on servers. AngularJS has a very rich, built-in support to communicate with the server and it also provides a built-in wrapper for communication with RESTful services.

Why AngularJS? AngularJS proceeds by minimizing the impedance mismatch between an application's need for constructing a new HTML and document-centric HTML. Thus, as compared to other available libraries, it takes a different approach. Directives are used in AngularJS to convey to the browser how to use a new syntax. Some of the examples of the directives are: •

Data-binding, as in {{}}

•

The two-way binding facility in AngularJS enables automatic change of either the target or source property in case one of them changes

•

Control structures for repeating and hiding a certain portion of a page

•

AngularJS sustains the client-side form validation

•

AngularJS connects the server-side code to DOM elements using JSON

•

AngularJS provides a way to group HTML to reusable components

•

AngularJS contains the Hypertext Transfer Protocol service, which can be used to communicate with remote servers

[5]

Introduction

AngularJS has been developed in the belief that it can be used to solve problems that don't require the developer to specify any extra procedures. The following are the design goals of AngularJS: •

To separate DOM operations from the application logic. This dramatically improves the testability of the code.

•

Application testing is of equal importance to application writing. Testing is difficult and dramatically affects the way the code is structured.

•

Separation of the client side of an application from the server side. This allows development work to continue in parallel and allows reuse of both the sides.

•

During the entire lifecycle of building a client-side application, the AngularJS framework helps developers to create a user interface (UI), write business rules, debug, and test the applications.

In developing client-side applications, AngularJS is not a single piece in the overall package of the AngularJS framework. AngularJS puts the DOM and AJAX code in a well-defined structure. This makes AngularJS opinionated about how a CRUD application should be built. AngularJS has the following features and advantages: •

Implement the CRUD operation, data-binding, basic directives, form validation, routing, deep-linking, reusable components, and dependency injection.

•

Application testing, such as unit-testing, end-to-end testing, mocks, and test harnesses.

•

Kernel application with directory layout and test scripts as a starting point.

•

The AngularJS framework is developed based on the MVC design pattern. It manages these components and connects them to server.

•

AngularJS uses additional HTML tags to create a user interface for applications. It is much easier, more natural, and less complex than creating a user interface using JavaScript. Creating a user interface with AngularJS within HTML is easy to organize; special tags in the DOM determine which controllers to use for each element. The new tags regulate what should be loaded. AngularJS directives make client-side application development easier because in AngularJS, what you see is what you get. So, instead of wasting time thinking and deciding what has to be done, one can just use the AngularJS framework to simply define what you want and what dependencies are involved.

[6]

Chapter 1

•

The AngularJS framework uses Plain Old JavaScript Objects (POJO). Therefore, AngularJS does not need the getter or setter functions. We can directly add properties and loops into the objects. The code looks much cleaner and more organized. The traditional data model is responsible for data determination and server synchronization. AngularJS uses the data model, which uses plain objects; these objects behave like temporary storage areas to store and retrieve data. AngularJS's data model works very closely with controller and view and is known as scope. All the properties of the scope object are automatically bound to the calling view of the scope. AngularJS keeps track of the changes made to these properties and updates the view automatically when needed. There is no data in the scope, which depends on the controller to feed the data into the scope, according to the business logic.

•

The AngularJS framework brings additional functionality to the DOM by introducing supplementary tags to HTML, which are known as directives. Directives empower us to invent our own HTML tags. The MVC application can be separated by putting all DOM manipulations into the directives. This separation will permit the MVC application to only focus on updating view with new data. Directives come in the form of custom HTML tags, such as: