37,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Build efficient web apps and deliver great results by integrating Angular and the .NET framework
About This Book
- 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
Who This Book Is 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
In Detail
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.
Style and approach
This book covers everything there is to know about getting well-acquainted with Angular 4 and .NET without bogging you down. Everything is neatly laid out under clear headings for quick consultation, offering you the information required to understand a concept immediately, with short, relevant examples of each feature.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 210
Veröffentlichungsjahr: 2017
Ähnliche
BIRMINGHAM - MUMBAI
< html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Learning Angular for .NET Developers
Copyright © 2017 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: June 2017
Production reference: 1280617
ISBN 978-1-78588-428-3
www.packtpub.com
Credits
Author
Rajesh Gunasundaram
Copy Editor
Shaila Kusanale
Reviewers
Ramchandra Vellanki
Alex Pop
Project Coordinator
Devanshi Doshi
Commissioning Editor
Sarah Crofton
Proofreader
Safis Editing
Acquisition Editor
Larissa Pinto
Indexer
Tejal Daruwale Soni
Content Development Editor
Aditi Gour
Graphics
Jason Monteiro
Technical Editor
Ralph Rosario
Production Coordinator
Shraddha Falebhai
About the Author
Rajesh Gunasundaram is a software architect, technical writer, and blogger. He has over 15 years of experience in the IT industry, with more than 12 years of using Microsoft .NET, 2 years of using BizTalk Server, and a year of iOS application development. Rajesh is the founder and editor of technical blogs programmerguide.net and ioscorner.com, and you can find many of his technical writings on .NET and iOS. He is also the founder and developer of a web product, VideoLens.net, a platform that analyses Facebook and YouTube videos and channels. Also, he has written two books, ASP.NET Web API Security Essentials and CORS Essentials for Packt Publishing. Rajesh is also a YouTuber, running two channels: rajeshmgonline and ProgrammerGuide. He holds a master's degree in computer application and began his career as a software engineer in 2002. He worked on client premises located in various countries, such as UK, Belarus, and Norway. He also has experience in developing mobile applications for iPhone and iPad. His technical strengths include Azure, Xamarin, ASP.NET MVC, Web API, WCF, .NET Framework/.Net Core, C#, Objective-C, Angular, Bot Framework, BizTalk, SQL Server, REST, SOA, design patterns, and software architecture.
About the Reviewers
Alex Pop is a professional software developer with 15 years of experience in building applications for various platforms and technologies.He has worked for ISVs building enterprise resource planning applications, insurance and financial software products, a content management system, and in the higher education sector as a web application developer.He is the author of two programming books: Learning Underscore.js and Learning AngularJS for .NET developers. His developer blog at alexvpop.blogspot.com contains technical articles around .NET, JavaScript, and various software engineering topics.
Ramachandra Vellanki is a passionate programmer. He has 13 years of programming experience, has worked in different roles, and has experience in building and maintaining large-scale products/applications. He started his career with IBM iSeries, and then worked on C++, MFC, .NET, and JavaScript. Currently, he is working on .NET and JavaScript technologies. He enjoys exploring and learning new technologies.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.comand as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www.packtpub.com/mapt
Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Customer Feedback
Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/178588428X.
If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!
Table of Contents
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
Getting Started with Angular
Introducing Angular
The birth of AngularJS
Why AngularJS?
Angular 2
The benefits of Angular 2
The development process in Angular 2
What is ECMAScript 6?
What is a transpiler?
What is TypeScript?
The development process in JavaScript
Development with a build-time transpiler
Development with a runtime transpiler
Transpiler options
What happened to Angular 3?
What's new in Angular ?
Why Angular for .NET developers?
Building a Hello World app with Angular
Setting up the development environment
Installing Visual Studio Code
Installing Node.js
Creating an Angular application
The architecture of Angular
Summary
Angular Building Blocks - Part 1
Modules (NgModules)
Components
The life cycle of a component
Decorators and metadata
Templates
Inline templates
Isolated templates
The local template variable
Binding
One-way binding
Interpolation binding
Property binding
Event binding
Two-way binding
Directives
Structural directives
Attribute directives
Dependency injection
Why dependency injection?
The role of injectors
Handling dependency injection in Angular
Summary
Angular Building Blocks - Part 2
Forms
Tools for forms
Types of Angular forms
Templete driven forms
Model-driven forms
Fundamental objects of model-driven forms
Pipes
Common pipes
Pipe with parameters
Chaining pipes
Currency pipes
Date pipes
Uppercase and lowercase pipes
JSON pipes
AppComponent
Routers
The core concept of Component Routers
Setting up a Component Router
Configuring routes
Router Outlet and Router Links
Services
Observables
Summary
Using TypeScript with Angular
What is TypeScript?
Basic types
Boolean
Number
String
Array
Enum
Any
Void
Interfaces
Optional properties
Function type interfaces
Array type interfaces
Class type interfaces
Extending interfaces
Hybrid type interface
Classes
Inheritance
Inheritance in TypeScript
Private/Public modifiers
Accessors
Static properties
Modules
Namespaces
Modules
Functions
Optional and default parameters
Rest parameters
Generics
Generic interfaces
Generic classes
Decorators
Class decorators
Method decorators
Accessor decorators
Property decorators
Parameter decorators
TypeScript and Angular
Summary
Creating an Angular Single-Page Application in Visual Studio
Creating an ASP.NET core web application
Adding client-side packages using NPM package manager
Using Gulp to run tasks
Adding Angular components and templates
Configuring TypeScript compiler options
Adding an Angular component
Adding app module
Adding an Angular component
Adding a Todo class
Adding a TodoService class
Updating the AppComponent class
Updating the AppModule
Adding the AppComponent template
Summary
Creating ASP.NET Core Web API Services for Angular
RESTful Web Services
ASP.NET Web API Overview
Why the ASP.NET Web API is a great fit for Angular
Creating ASP.NET Web API services
Adding and configuring an MVC service to the ASP.NET project
Adding Web API Controller to an ASP.NET application
Adding models to an ASP.NET application
Adding DBContext to an ASP.NET application
Using DB Migration
Using Database Context in a Web API controller
Integrating ASP.NET Core Web API with Angular application
Updating a model in an Angular app
Preparing Angular application
Consuming Web API GET Action in TodoService
Posting to the Web API from TodoService
Calling the PUT action of the Web API to update a Todo item
Calling the DELETE action of the Web API to delete a Todo item
Updating the wrapper functions in TodoService
Updating AppComponent
Updating the AppComponent template
Updating the index page
Running the application
Summary
Creating an Application Using Angular, ASP.NET MVC, and Web API in Visual Studio
Using ASP.NET MVC
Combining routing for ASP.NET MVC, the ASP.NET Web API, and Angular
Routing in ASP.NET MVC
Adding ASP.NET MVC HomeController
Routing for ASP.NET MVC
Moving the content from the default page to the ASP.NET MVC view
Routing in the ASP.NET Web API
Routing in Angular
Moving the Angular template to the ASP.NET MVC template
Summary
Testing Angular Applications
Introducing Jasmine
Testing Angular services
Testing Angular components
Writing Specs for AppComponent
Running the specs or tests of AppComponent
Unit testing a mock service
Summary
What s New in Angular and ASP.NET Core
What's new in Angular
Ahead-of-Time compilation
Update on templates
Introducing titlecase pipes
Simplified parameter passing in HTTP
Overriding templates in testing
Introducing the Meta service
New form validators
Introducing ParamMap in router
Introducing .NET Core 1.0
Cross-platform development with the .NET Execution Environment
The traditional .NET Framework
Mono Cross-platform .NET Framework
NuGet package manager
CoreFx and CoreCLR in .NET Core
Choosing a Framework
The Dotnet Execution Environment- DNX
Deployment options
Publishing with Visual Studio
Publishing with dotnet command-line interface
Deploying to IIS
Deploying to Microsoft Azure
Deploying to Linux and macOS
Summary
Preface
Angular is the most popular JavaScript framework. Angular was completely rewritten with the benefits of ECMAScript 6 and supports object-oriented programming, static typing, generics, and lambdas by leveraging the power of TypeScript language.
This book will help you understand the benefits of using the Angular client-side MVC framework in .NET applications. You will learn how to use Angular with current technologies, such as MVC and the Web API. The book will show you how to develop single-page applications using Angular powered by the .NET framework. It also teaches you how to organize and maintain your code and how to integrate Angular into .NET applications. By the end of the book, you will feel comfortable adding either a little or a lot of Angular to your ASP.NET projects.
What this book covers
Chapter 1,Getting Started with Angular, introduces Angular and provides step-by-step instructions for building a Hello World app with Angular. It also explains the architecture of Angular.
Chapter 2, Angular Building Blocks Part 1, gives you a detailed walkthrough of the core building blocks of the Angular architecture, such as modules, components, decorators, metadata, templates, bindings, directives, and dependency injection.
Chapter 3, Angular Building Blocks Part 2, explains the functionalities of the remaining building blocks of the Angular architecture, such as forms, pipes, routers, services, and observables.
Chapter 4, Using TypeScript with Angular, discusses the fundamentals of TypeScript and the benefits of using TypeScript to write Angular applications.
Chapter 5, Creating an Angular Single-Page Application in Visual Studio, guides you through the process of creating an Angular single-page application using Visual Studio and using NPM and Gulp.
Chapter 6, Creating ASP.NET Core Web API Services for Angular, showcases RESTful web services and the ASP.NET Web API. Also, it takes you through the process of integrating the ASP.NET Web API with an Angular application.
Chapter 7, Creating an Application Using Angular, ASP.NET MVC, and Web API in Visual Studio, practically explains how to use ASP.NET MVC as a backbone of Angular application and how to combine the routings of Angular, ASP.NET MVC, and Web API.
Chapter 8, Testing Angular Applications, dives into the process of testing Angular components and services using the Jasmine framework.
Chapter 9, What's New in Angular and ASP.NET Core, outlines the new features of Angular. It also introduces ASP.NET Core and discusses cross-platform development with the .NET Execution Environment.
What you need for this book
The following software is required for this book:
Visual Studio 2017 or later
Visual Studio Code
Node.js 6.10.2 or later
Angular 4.0.0 or later
TypeScript 2.3.4 or later
Windows 10 or later
The following hardware is required for this book:
1.6 GHz or faster processor
1 GB of RAM (1.5 GB if running on a virtual machine)
10 GB (NTFS) of available hard disk space
5,400 RPM hard drive
DirectX 9-capable video card running at 1024 x 768 or higher display resolution
Who this book is for
This book is intended for everyone capable of developing ASP.NET Core 1.0 applications. Good working knowledge and experience of C# and the .NET framework are prerequisites for learning from this book.
Conventions
In this book, you will find a number of text styles 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 uses HTTP under the hood and utilizes HTTP verbs, such as GET, POST, PUT, and DELETE, to control or access the resources."
A block of code is set as follows:
public void ConfigureServices(IServiceCollection services) { services.AddMvc();
Any command-line input or output is written as follows:
npm run build:watch
karma start karma.conf.js
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "In Settings, we can also pick which configuration we will use and which of the DNX versions to use."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book--what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail [email protected], and mention the book's title in 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 at www.packtpub.com/authors.
Customer support
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.
Downloading the example code
You can download the example code files for this book 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. You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the
SUPPORT
tab at the top.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on
Code Download
.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learning-Angular-for-.NET-Developers. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from http://www.packtpub.com/sites/default/files/downloads/LearningAngularfordotNETDevelopers_ColorImages.pdf.
Errata
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 could 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 to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted 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.
Questions
If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.
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.
