Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Learning Angular for .NET Developers
Learning Angular for .NET Developers

Learning Angular for .NET Developers: Develop dynamic .NET web applications powered by Angular 4

Arrow left icon
Profile Icon Gunasundaram
Arrow right icon
S$59.99
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3 (7 Ratings)
Paperback Jun 2017 248 pages 1st Edition
eBook
S$32.99 S$47.99
Paperback
S$59.99
Subscription
Free Trial
Arrow left icon
Profile Icon Gunasundaram
Arrow right icon
S$59.99
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3 (7 Ratings)
Paperback Jun 2017 248 pages 1st Edition
eBook
S$32.99 S$47.99
Paperback
S$59.99
Subscription
Free Trial
eBook
S$32.99 S$47.99
Paperback
S$59.99
Subscription
Free Trial

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Learning Angular for .NET Developers

Getting Started with Angular

If you are reading this book, it is because you are a .NET developer and would like to learn how to use Angular with the .NET Framework technologies such as ASP.NET Model View Controller (MVC) and Web API, and legacy technologies such as web forms and web services. It enables the developer to develop richer and dynamic .NET web applications powered by Angular. Angular is an open source JavaScript framework that helps create dynamic web applications.

In this chapter, we will cover the following topics:

  • Introducing Angular
  • The Angular architecture
  • Building a Hello World app with Angular

Introducing Angular

Let's discuss the history of AngularJS before introducing you to Angular. It all started with improving the development process of client-side web. As part of the improvement, Microsoft introduced the XML HTTP request object to retrieve data from the server. As the advanced JavaScript libraries such as jQuery and Prototype were introduced, developers started using Ajax to asynchronously request data from the server. These libraries were extensively used to manipulate the DOM and bind data to a UI in the late 90s.

Ajax is the short form of asynchronous JavaScript and XML. Ajax can enable web applications to send data to or retrieve data from a server asynchronously without interfering with the display and behavior of the page. Ajax allows web applications to change content dynamically, without reloading the full page by decoupling the data interchange layer from the presentation layer.

In late 2010, two JavaScript MVC frameworks were introduced: backbone and knockout. Backbone provided a complete Model-View-Controller experience, whereas knockout mainly focused on binding using the MVVM pattern. With the release of these frameworks, people started believing in the power of client-side MVC frameworks.

The birth of AngularJS

A developer from Google felt that there was one major part missing in the client-side MVC frameworks that existed in the market, that is, testability. He felt that there was a better way to implement client-side MVC, and this made him start his journey to build Angular.

Google supported the Angular project, seeing its potential, and made it open source for the world to use it for free. Angular created a lot of awareness among all the MVC frameworks in the market as it was backed by Google and also due to its features, such as testability and directives. Today, the Angular team has grown from a single developer to a large number of developers, and it has become the first choice to add the power of client-side MVC to small, medium, or big web applications.

Why AngularJS?

Let's discuss why to use AngularJS and what is the benefit or value addition that our application can get by using AngularJS:

  • AngularJS provides two-way binding: Many client-side MVC frameworks provide only one-way binding. This means that other MVC frameworks will update HTML with the model from the server, and when the user changes the model on the page, the frameworks will not update the model according to the changes made. A developer has to write code to update the model according to the user action. However, AngularJS facilitates two-way binding and has made the life of developers easier by updating the model as per the user's actions on it.
  • AngularJS utilizes declarative views: This means that the functionalities will be communicated as declarative directions in HTML to render the models and interact with the DOM to change the page state based on changes in the model. This extensively reduces the code by about 50% to 75% for this purpose and makes the life of developers easier.
  • AngularJS supports the directive concept: This is like writing a domain-specific language for the web application. Directives will extend the functionality of HTML and render them dynamically according to the changes in the application rather than just displaying the HTML page.
  • AngularJS is highly testable: As said earlier, one of the main mottos of the development of Angular is to introduce a testable client-side MVC framework. AngularJS is highly testable, and in fact, the Angular team has introduced two frameworks: Karma and Protractor, to write end-to-end unit testing to ensure the stability of the code and to enable the refactoring of the code confidently.

Angular 2

AngularJS is a good framework. However, it is six years old, and there are a lot of things that have changed in these six years in the web world. To accommodate all these modern happenings in AngularJS, it would have to undergo many changes in the existing implementation, and this made the Angular team write AngularJS from scratch.

At the ngEurope conference held in October 2014, Angular 2 was announced as a massive update to Angular 1 for building complex web applications. The ngCommunity was a little upset as they invested a lot of time in learning and implementing Angular 1, and now they had to redo the process of learning and implementing Angular again. However, Google invested a lot in the migration and upgrade process from Angular 1 to 2 by introducing ngUpgrade and ngForward. Once the developers started learning and building products in Angular 2, they realized the power of cleaner, faster, and easier Angular 2.

Angular 2 was rewritten from scratch. It helped us write clean and testable code that can run on any device and platform. Angular 2 eliminated many concepts from Angular 1. Angular 2 follows the standardization of ECMAScript 2015. With the recent web standardization, the shadow DOM replaced transclusion and the ECMAScript 6 modules replaced Angular modules. Angular 2 is five times faster than Angular 1.x.

The benefits of Angular 2

The following are the features and benefits of Angular 2:

  • It supports cross-platform application development, such as high performing apps like web apps, native apps using Ionic Framework, NativeScript, React Native, and creating desktop-installed apps by accessing native OS APIs using Angular methods.
  • Angular 2 inherits all the benefits of Angular 1. It replaced controllers and directives with components.
  • Angular 2 was written in TypeScript and also, it enabled developers to write Angular 2 applications using TypeScript.
  • Angular 2 is significantly faster than Angular 1. The new component router only loads code required to render a view that is requested. The template syntax enables a developer to quickly create views with the powerful template syntax.
  • Angular 2 enables us to use shadow Document Object Model (DOM). Shadow DOM encapsulates CSS, template, and the component. This enables decoupling from the DOM of the main document.
  • It is the simpler cognitive model. A lot of directives were removed in Angular 2 and this means that Angular 2 has fewer pieces and fewer moving parts so that it is easier to build larger applications with Angular 2 than with Angular 1.

The development process in Angular 2

Angular 2 has two development processes, namely, the following:

  • With a transpiler
  • Without a transpiler

What is ECMAScript 6?

ES6 is the latest version of scripting language specification. It is a JavaScript language used on the world wide web for client-side scripting. ECMAScript 6 is a great update to JavaScript language and the process of implementation of these features in JavaScript engine is in progress.

What is a transpiler?

A transpiler basically converts any specific language to JavaScript. A good example of this is the Typescript transpiler, which converts Typescript code to JavaScript.

What is TypeScript?

TypeScript is an open source programming language developed by Microsoft. It is a superset of JavaScript, and it enables programmers to write object-oriented programs in JavaScript. TypeScript is also used to develop transpiler, which converts TypeScript to JavaScript. It is designed to develop larger applications. TypeScript was developed as per the proposal of ECMAScript standard. TypeScript has features such as classes, modules, and an arrow function syntax, as proposed in ECMAScript 6 standard.

The development process in JavaScript

Before discussing the development process with a transpiler, let's look at the development process specific to JavaScript to build a web app. We will write our code in ECMAScript 5 and Deploy it to the Server. ECMAScript 5 is the script that every browser understands today. When a Request comes from the Browser, the server will serve the script and the browser will run it in the client side. The following diagram shows the typical development process for JavaScript:

The development process in JavaScript

Development with a build-time transpiler

Instead of writing scripts in the current version of JavaScript, ECMAScript 5, we can also write scripts in ECMAScript 6+ using Typescript and Transpile them into ECMAScript 5. Then, Deploy the transpiled script to the Server, and the Browser Request will be served with the Transpiled script, which is ECMAScript 5, that is to be executed on the client side. The benefit of this is that we can use the new features of the latest version of JavaScript or ECMAScript.

The development process with a build-time transpiler

 

Development with a runtime transpiler

There is another development option called runtime transpiler. In this case, we start off by writing scripts in ECMAScript 6+ using Typescript or CoffeeScript and then Deploy the scripts to the Server. When a Request comes to the Server, it simply serves ECMAScript 6+ code without Transpiling to the Browser. Then, the browser Transpiles the scripts to ECMAScript 5 using a runtime transpiler to execute it in the client side. This type of option is not good for production applications as it puts extra load on the browser.

The development process with a runtime Transpiler

Transpiler options

In Angular 2, we have two options- to use a transpiler or to not use a transpiler. The following are a few types of transpilers that are available:

  • Traceur: It is the most popular transpiler by Google, and it can be used both in build-time mode and runtime mode.
  • Babel: This transpiler works on the most latest version of ECMAScript.
  • Typescript: This is one of the most popular and preferred transpiler for Angular. The Angular team collaborated with the Typescript team and they have worked together to build Angular 2.

What happened to Angular 3?

After the release of Angular 2, the team decided to go with semantic versioning. Semantic versioning follows three number versioning, representing major, minor, and patch. Patch version is the last number in the version that will be incremented for every patch release, usually bug fixes. Minor version is the middle number in the version that deals with the release of new features or enhancements. Finally, the major version is the first number in the version that is incremented for the release with breaking changes.

Angular team switched to use TypeScript 2.2 from TypeScript 1.8 that is used in Angular 2. This introduces some breaking change that obviously leads to increment the major version number. Also, the current version of router module is 3.3.0, which is not in alignment with the other modules of Angular that are still in 2.3.0. So, in order to keep all the module versions in sync and follow semantic versioning, the Angular team decided to go with Angular instead of Angular 3 for their next major release.

What's new in Angular ?

The following are the new features in Angular:

  • TyepScript 2.1+ is the required scripting language for Angular.
  • Ahead of Time compilation mode enables Angular to compile the templates and generates JavaScript code during the build process. This helps us identify the errors in templates during the build-time rather than at runtime.
  • Angular animation has its own package, and it means that you don't need to ship animation packages to the projects that don't need animation.
  • Template tag is now deprecated as it leads to confusion with the template HTML tag that is used in web components. So, ng-template is introduced for templates in Angular.

Apart from these, other new features have been introduced in code level.

Why Angular for .NET developers?

The complexity of writing client-side code using JavaScript in .NET web applications kept increasing in scenarios such as data-binding, server calls, and validations. .NET developers faced difficulties in writing client-side validations using JavaScript. So, they discovered and started using jQuery plugins for validations and mostly, just to change the views according to user actions. In the later stages, .NET developers were looked after by JavaScript libraries that ensure the structure of the code and provide good features to simplify the client-side code. Then, they ended up using a few client-side MVC frameworks in the market. However, they only used the MVC frameworks to communicate with the server and to update views.

Later, a trend of SPA (Single Page Applications) came into picture in the web development scenario. These kinds of applications will be served with an initial page, possibly in a layout view or master view. Then, the other views will be loaded onto the master view as and when requested. This scenario will be achieved by implementing client-side routing so that the client will request a small part of the view rather than the entire view from the server. Achieving these steps created more complexities in client-side development.

AngularJS came as a life saver for .NET developers by enabling them to reduce their efforts in performing client-side development of handling applications, such as SPA. Data binding is the coolest feature of Angular that enables the developer to concentrate on other parts of the application instead of writing huge code to handle data binding, traversing, manipulating, and listening to the DOM. The templates in Angular are simple plain HTML strings that will be parsed into DOM by the browser; the Angular compiler traverses the DOM to data bind and render instructions. Angular enables us to create custom HTML tags and extend the behavior of the existing elements of DOM. With the built-in support to dependency injection, Angular resolves dependent parameters by providing their instances implicitly.

Building a Hello World app with Angular

Before we start building our first Angular application, let's set up the development environment to get started with Angular apps.

Setting up the development environment

The first thing to do before writing any code is to set up the local development environment. We need an editor to write the code, a local server to run the application, package managers to manage the external libraries, compilers to compile the code, and so on.

Installing Visual Studio Code

Visual Studio Code is one of the greatest editors used to write Angular applications. So, we start with installing Visual Studio Code. Navigate to https://code.visualstudio.com/ and click on Download Code for Windows. Visual Studio Code supports platforms such as Windows, Linux, and OS X. So, you can also download it for other platforms depending on your need.

The home page of Visual Studio Code

Visual Studio Code is an open source and cross-platform editor that supports Windows, Linux, and OS X. It is one of the powerful text editors that includes features such as navigation, keyboard support with customizable bindings, syntax highlighting, bracket matching, auto indentation, and snippets, with support for many programming languages. It has built-in support to IntelliSense code completion, richer semantic code understanding and navigation, and code refactoring. It provides a streamlined, integrated debugging experience, with support for Node.js debugging. It is a lighter version of Visual Studio. It doesn't contain any built-in development server, such as IIS Express. However, it is very important to test a web application in a local web server as part of the development process. There are several ways available in the market to set up a local web server.

However, I chose lite-server as it is a lightweight, development-only node server that serves the static content, detects changes, refreshes the browser, and offers many customizations. Lite-server is available as an NPM package for Node.js. First, we will see how to install Node.js in the next section.

Installing Node.js

Node.js is used to develop server-side web applications. It is an open source and cross-platform runtime environment. The built-in libraries in Node.js allow applications to act as a standalone web server. Node.js can be used in scenarios where lightweight, real-time response is needed, such as communication apps and web-based gaming.

Node.js is available for various platforms, such as Windows, Linux, Mac OS X, Sun OS, and ARM. You can also download the source code of Node.js and customize it according to your needs.

In order to install Node.js, navigate to https://nodejs.org/en/ and download the mature and dependable LTS (long-term support) version for Windows.

The home page of Node.js

Node.js comes with NPM, a package manager that is used to acquire and manage JavaScript libraries for your development. To verify that the installation of Node.js and NPM is successful, follow these steps:

  1. Open Windows Command Prompt, type the node -v command, and run it. You will get the version of Node.js that we installed.
  2. Now, check whether NPM is installed along with Node.js. Run the NPM -v command, and you will get the version number of NPM that is installed.
Command Prompt with commands verifying the Node.js and NPM installations

Now, we have all that we need to write our first Angular application. Let's get started.

Creating an Angular application

I assume that you have installed Node.js, NPM, and Visual Studio Code and are ready to use them for development. Now, let's create an Angular application by cloning the git repository with the following steps:

  1. Open Node.Js Command Prompt and execute the following command:
      git clone https://github.com/angular/quickstart my-
angular

This command will clone the Angular quickstart repository and create an Angular application named my-angular for you with all the boilerplate codes required.

  1. Open the my-angular cloned application using Visual Studio Code:
Folder structure of the my-angular application

The folder structure and the boilerplate code are organized according to the official style guide at https://angular.io/docs/ts/latest/guide/style-guide.html. The src folder has the code files related to application logic, and the e2e folder has the files related to end-to-end testing. Don't worry about other files in the application now. Let's only focus on package.json for now.

  1. Click on the package.json file; it will have the details about the configurations of the metadata and project dependencies. The following is the content of the package.json file:
      {
"name":"angular-quickstart",
"version":"1.0.0",
"description":"QuickStart package.json from the
documentation,
supplemented with testing support",
"scripts":{
"build":"tsc -p src/",
"build:watch":"tsc -p src/ -w",
"build:e2e":"tsc -p e2e/",
"serve":"lite-server -c=bs-config.json",
"serve:e2e":"lite-server -c=bs-config.e2e.json",
"prestart":"npm run build",
"start":"concurrently \"npm run build:watch\" \"npm
run serve\"",
"pree2e":"npm run build:e2e",
"e2e":"concurrently \"npm run serve:e2e\" \"npm run
protractor\"
--kill-others --success first",
"preprotractor":"webdriver-manager update",
"protractor":"protractor protractor.config.js",
"pretest":"npm run build",
"test":"concurrently \"npm run build:watch\" \"karma
start
karma.conf.js\"",
"pretest:once":"npm run build",
"test:once":"karma start karma.conf.js --single-
run",
"lint":"tslint ./src/**/*.ts -t verbose"
},
"keywords":[
],
"author":"",
"license":"MIT",
"dependencies":{
"@angular/common":"~4.0.0",
"@angular/compiler":"~4.0.0",
"@angular/core":"~4.0.0",
"@angular/forms":"~4.0.0",
"@angular/http":"~4.0.0",
"@angular/platform-browser":"~4.0.0",
"@angular/platform-browser-dynamic":"~4.0.0",
"@angular/router":"~4.0.0",
"angular-in-memory-web-api":"~0.3.0",
"systemjs":"0.19.40",
"core-js":"^2.4.1",
"rxjs":"5.0.1",
"zone.js":"^0.8.4"
},
"devDependencies":{
"concurrently":"^3.2.0",
"lite-server":"^2.2.2",
"typescript":"~2.1.0",
"canonical-path":"0.0.2",
"tslint":"^3.15.1",
"lodash":"^4.16.4",
"jasmine-core":"~2.4.1",
"karma":"^1.3.0",
"karma-chrome-launcher":"^2.0.0",
"karma-cli":"^1.0.1",
"karma-jasmine":"^1.0.2",
"karma-jasmine-html-reporter":"^0.2.2",
"protractor":"~4.0.14",
"rimraf":"^2.5.4",
"@types/node":"^6.0.46",
"@types/jasmine":"2.5.36"
},
"repository":{
}
}
  1. Now, we need to run the NPM install command in the command window by navigating to the application folder to install the required dependencies specified in package.json:
Execute the NPM command to install the dependencies specified in package.json
  1. Now, you will have all the dependencies added to the project under the node_modules folder, as shown in this screenshot:
Dependencies under the node_modules folder
  1. Now, let's run this application. To run it, execute the following command in the command window:
      npm start
  1. Open any browser and navigate to http://localhost:3000/; you will find the following page, which is rendered through our Angular application, displayed. Running this command builds the application, starts the lite-server, and hosts the application on it.
Activating the debug window in VS Code

Let's now walk through the content of index.html. The following is the content of index.html:

<!DOCTYPE html>
<html>
<head>
<title>Hello Angular </title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>My first Angular app for Packt Publishing...</my-app>
</body>
</html>

So far, we have seen how to create an Angular application by cloning the official QuickStart repository from GitHub. We will cover the steps to create Angular applications in detail in the upcoming chapters. Note that the scripts are loaded using System.js. System.js is the module loader that loads the modules during runtime.

The architecture of Angular

Before we jump onto our Hello World application on Angular, let me give you a quick overview of the Angular architecture. The architecture of Angular comprises of eight core building blocks: a module, component, template, metadata, data binding, service, directive, and dependency injection.

Architecture of Angular

An Angular application normally starts with the designing of templates with Angular tags or markups. Then, we write components to handle the templates. The application-specific logic will be added to services. Finally, the starting component or root component will be passed on to the Angular bootstrapper.

When we run the application, Angular takes the responsibility of presenting the template to the browser and takes care of user interactions with the elements in the template according to the logic provided in the components and directives.

Let's see the objective of each block of Angular in the following points:

  • Any Angular application will be comprised of a collection of components.
  • Services will be injected into components.
  • Templates are responsible for rendering the components in the form of HTML.
  • Components hold an application logic that supports the views or templates.
  • Angular itself is a collection of modules. In Angular 1, the main module or application module is bootstrapped using the ng-app directive. We can include other lists of modules that our application module or main module is dependent on; they will be defined in the empty array in angular.module('myApp', []). Angular uses ES6 modules, and the functions or variables defined in modules should be exported explicitly to be consumed in other modules. The exported functions or variables are made available in other modules using the import keyword followed by the function name and then a from keyword followed by the module name. For example, import {http} from @angular/http.
  • Each Angular library is a facade of many private modules that are logically related.
  • Directives provide instructions to render the templates.

We will see each building block of the Angular architecture in detail in the subsequent chapters.

Summary

That was easy, wasn't it? We just introduced you to the Angular framework.

We started with the history of AngularJS. Then, we discussed the benefits of AngularJS and the birth of AngularJS. We discussed what's new in Angular and gave you a brief introduction to the architecture of Angular.

We also saw what is needed and how to set up a development environment in order to write an Angular application.

Finally, we did a walk-through on how to create your first Angular application using Visual Studio Code and Node.js.

We had a great start and learned a few basics in this chapter. However, this is just the beginning. In the next chapter, we will discuss some of the core building blocks of the Angular architecture, such as a module, component, template, and directive. Let's get the ball rolling!

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Become a more productive developer and learn to use frameworks that implement good development practices
  • Achieve advanced autocompletion, navigation, and refactoring in Angular using Typescript
  • Follow a gradual introduction to the concepts with a lot of examples and explore the evolution of a production-ready application

Description

Are you are looking for a better, more efficient, and more powerful way of building front-end web applications? Well, look no further, you have come to the right place! This book comprehensively integrates Angular version 4 into your tool belt, then runs you through all the new options you now have on hand for your web apps without bogging you down. The frameworks, tools, and libraries mentioned here will make your work productive and minimize the friction usually associated with building server-side web applications. Starting off with building blocks of Angular version 4, we gradually move into integrating TypeScript and ES6. You will get confident in building single page applications and using Angular for prototyping components. You will then move on to building web services and full-stack web application using ASP.NET WebAPI. Finally, you will learn the development process focused on rapid delivery and testability for all application layers.

Who is this book for?

If you are a .NET developer who now wants to efficiently build single-page applications using the new features that Angular 4 has to offer, then this book is for you. Familiarity of HTML, CSS, and JavaScript is assumed to get the most from this book.

What you will learn

  • Create a standalone Angular application to prototype user interfaces
  • Validate complex forms with Angular version 4 and use Bootstrap to style them
  • Build RESTful web services that work well with single-page applications
  • Use Gulp and Bower in Visual Studio to run tasks and manage JavaScript packages
  • Implement automatic validation for web service requests to reduce your boilerplate code
  • Use web services with Angular version 4 to offload and secure your application logic
  • Test your Angular version 4 and web service code to improve the quality of your software deliverables
Estimated delivery fee Deliver to Singapore

Standard delivery 10 - 13 business days

S$11.95

Premium delivery 5 - 8 business days

S$54.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jun 30, 2017
Length: 248 pages
Edition : 1st
Language : English
ISBN-13 : 9781785884283
Vendor :
Google
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Estimated delivery fee Deliver to Singapore

Standard delivery 10 - 13 business days

S$11.95

Premium delivery 5 - 8 business days

S$54.95
(Includes tracking information)

Product Details

Publication date : Jun 30, 2017
Length: 248 pages
Edition : 1st
Language : English
ISBN-13 : 9781785884283
Vendor :
Google
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total S$ 201.97
ASP.NET Core 2 and Angular 5
S$66.99
Learning Angular for .NET Developers
S$59.99
Angular 2 Cookbook
S$74.99
Total S$ 201.97 Stars icon

Table of Contents

9 Chapters
Getting Started with Angular Chevron down icon Chevron up icon
Angular Building Blocks - Part 1 Chevron down icon Chevron up icon
Angular Building Blocks - Part 2 Chevron down icon Chevron up icon
Using TypeScript with Angular Chevron down icon Chevron up icon
Creating an Angular Single-Page Application in Visual Studio Chevron down icon Chevron up icon
Creating ASP.NET Core Web API Services for Angular Chevron down icon Chevron up icon
Creating an Application Using Angular, ASP.NET MVC, and Web API in Visual Studio Chevron down icon Chevron up icon
Testing Angular Applications Chevron down icon Chevron up icon
What s New in Angular and ASP.NET Core Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
(7 Ratings)
5 star 28.6%
4 star 14.3%
3 star 14.3%
2 star 14.3%
1 star 28.6%
Filter icon Filter
Top Reviews

Filter reviews by




Vikas Kumar May 25, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good book for beginners.
Amazon Verified review Amazon
Jeffrey L. Armbruster Aug 11, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good book for .Net developers. You will also need Mastering TypeScript, Second Edition.
Amazon Verified review Amazon
Gregory A Schmidt Aug 25, 2017
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Solid foundation book for getting into Angular coming from a C#.Net development career. Definitely a beginner level book.
Amazon Verified review Amazon
Chris Jul 03, 2018
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
Solid entry level book for learning angular with a .net web dev background.In serious need of a good editor though. There's a decent handful of poorly structured sentences that fail to convey the author's intent.
Amazon Verified review Amazon
DustPixie Sep 02, 2018
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
Very poor editing makes it too difficult to read
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Tra