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

Expert Angular: Build deep understanding of Angular to set you apart from the developer crowd

eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m

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

Expert Angular

Migrating AngularJS App to Angular App

We all know Angular has had loads of improvements and has been designed from scratch. So, one of the most bugging questions among the Angular developers is how can we migrate existing AngularJS applications into Angular. In this chapter, we are going to discuss best practices, approaches, and tools recommended to successfully migrate existing AngularJS applications.

In this chapter, we will cover the following topics:

  • Migration process
  • Syntax difference
  • Benefits of upgrading to Angular
  • Rules for incremental upgrade to Angular
  • Incremental upgrading using UpgradeAdapter
  • Components migration
  • Roadmap from AngularJS to Angular

Migration process

AngularJS and Angular differ syntactically and conceptually. So the migration process involves code change not only on a syntactical level but also in implementation. The Angular team made the life of the developers easier by providing built-in tools in Angular for migrating AngularJS applications to Angular. There is some preliminary process to do in our existing AngularJS applications before starting up the migration process.

The preliminary process involves decoupling the existing code and making the existing code maintainable. This preliminary process not only prepares the code for upgradation, but will also improve the performance of the existing AngularJS applications.

We can follow an incremental approach by running both AngularJS and Angular in the same application and initiate the migration process one by one starting from the components. This approach...

Syntax difference between Angular and AngularJS

Angular has different syntax compared to AngularJS in many ways. Let us see few of them here.

Local variables and bindings in templates

A template is a view that deals with the UI part of an application that is written in HTML. First we will see the syntax differences for One-way Data Binding.

AngularJS:

<h1>Book Details:</h1> 
<p>{{vm.bookName}}</p> 
<p>{{vm.authorName}}</p> 

Angular:

<h1>Book Details:</h1> 
<p>{{bookName}}</p> 
<p>{{authorName}}</p> 

Both the code snippets show the One-way Data Binding that binds the book and author name to the UI using the double-curly braces. However, the AngularJS...

Benefits of upgrading to Angular

Let us see some of the benefits of upgrading to Angular:

  • Better performance: Angular supports faster change detection, faster bootstrap time, view caching, template pre-compilation, and so on.
  • Server-side rendering: Angular has been split up into an application layer and a render layer. This enables us to run Angular in web workers or even servers other than browsers.
  • More powerful templating: Angular introduces new template syntax that removes many directives and integrates better with web components and other elements.
  • Better ecosystem: The Angular ecosystem will eventually get better and more interesting in the future.

Strategies to upgrade to Angular

There are different upgrade strategies...

Rules for incremental upgrade to Angular

It will be easier to do an incremental upgrade if we adhere to the following set of rules:

  • Implement one component per file; it helps to isolate the components and migrate them one by one.
  • Apply modular programming and arrange the folder by features; this will enable the developers to concentrate on migrating one feature at a time.
  • Use a module loader; following the preceding rules, you will end up with a large number of files in a project. This creates the hassle of organizing the files and referring them in the correct order in the HTML pages. When you use a module loader such as SystemJS, Webpack, or Browserify, it enables us to use TypeScript built-in module systems. This enables the developers to import or export features explicitly and share them between various parts of the application in the code.
  • Install TypeScript first; it is...

Incremental upgrading using UpgradeAdapter

Incremental upgrading can be done seamlessly using UpgradeAdapter. UpgradeAdapter is a service that can bootstrap and manage hybrid applications that support both Angular and AngularJS code. UpgradeAdapter enables you to run both AngularJS and Angular code simultaneously. UpgradeAdapter facilitates interoperability between components and services from one framework to another framework. The interoperability in Dependency Injection, the DOM, and change detection will be taken care of by UpgradeAdapter.

Injecting AngularJS dependencies to Angular

We may come across a scenario where the business logic on AngularJS services or any built-in services, such as $location or $timeout, is to...

Components migration

Designing AngularJS applications by component centric is good practice rather than designing them by controller centric. If you had developed your application following this practice, then it will be easier for you to migrate. Component Directives in AngularJS will have their template, controller, and binding similar to Angular components. But make sure your AngularJS application Component Directives did not use the attributes such as compile, replace, priority, and terminal. If your application implemented Component Directives with these attributes then it is not liaising with Angular architecture. If your AngularJS application was developed using AngularJS 1.5 and the components are implemented using the component API, then you might have noticed the similarities in Angular components.

Roadmap from AngularJS to Angular

It is good to follow this roadmap in migrating AngularJS to Angular:

  • JavaScript to TypeScript
  • Installing Angular packages
  • Creating the AppModule
  • Bootstrapping your application
  • Upgrading your application service
  • Upgrading your application component
  • Adding the Angular router

Let us discuss them in detail in the following sections.

JavaScript to TypeScript

Start your migration process by introducing TypeScript, as you will be writing your code using TypeScript in Angular. Installing TypeScript into your Angular application is quite easy. Run the following command to install TypeScript from npm into your application and save the package information to package.json:

npm i typescript --save-dev...

Summary

Way to go! Loads of stuffs, isn't it?! We started learning about migration in Angular.

Then we have seen various approaches and best practices in migrating AngularJS to Angular applications.

Next we discussed incremental upgrading using the upgrade adapter.

Finally, we learned in detail about the roadmap in migrating from AngularJS to Angular.

In the next chapter, we will discuss Angular CLI, which is the command line interface for Angular.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Apply best practices and design patterns to achieve higher scalability in your Angular applications
  • Understand the latest features of Angular and create your own components
  • Get acquainted with powerful, advanced techniques in Angular to build professional web applications

Description

Got some experience of Angular under your belt? Want to learn everything about using advanced features for developing websites? This book is everything you need for the deep understanding of Angular that will set you apart from the developer crowd. Angular has introduced a new way to build applications. Creating complex and rich web applications, with a lighter resource footprint, has never been easier or faster. Angular is now at release 4, with significant changes through previous versions. This book has been written and tested for Angular release 4. Angular is a mature technology, and you'll likely have applications built with earlier versions. This book starts by showing you best practices and approaches to migrating your existing Angular applications so that you can be immediately up-to-date. You will take an in-depth look at components and see how to control the user journey in your applications by implementing routing and navigation. You will learn how to work with asynchronous programming by using Observables. To easily build applications that look great, you will learn all about template syntax and how to beautify applications with Material Design. Mastering forms and data binding will further speed up your application development time. Learning about managing services and animations will help you to progressively enhance your applications. Next you’ll use native directives to integrate Bootstrap with Angular. You will see the best ways to test your application with the leading options such as Jasmine and Protractor. At the end of the book, you’ll learn how to apply design patterns in Angular, and see the benefits they will bring to your development.

Who is this book for?

This book is for JavaScript developers with some prior exposure to Angular, at least through basic examples. We assume that you’ve got working knowledge of HTML, CSS, and JavaScript.

What you will learn

  • • Implement asynchronous programming using Angular
  • • Beautify your application with the UI components built to the material design specification
  • • Secure your web application from unauthorized users
  • • Create complex forms, taking full advantage of 2-way data binding
  • • Test your Angular applications using the Jasmine and Protractor frameworks for better efficiency
  • • Learn how to integrate Angular with Bootstrap to create compelling web applications
  • • Use Angular built-in classes to apply animation in your app
Estimated delivery fee Deliver to France

Premium delivery 7 - 10 business days

€10.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 31, 2017
Length: 454 pages
Edition : 1st
Language : English
ISBN-13 : 9781785880230
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 France

Premium delivery 7 - 10 business days

€10.95
(Includes tracking information)

Product Details

Publication date : Jul 31, 2017
Length: 454 pages
Edition : 1st
Language : English
ISBN-13 : 9781785880230
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.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
€189.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 €5 each
Feature tick icon Exclusive print discounts
€264.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 €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 83.98
Expert Angular
€41.99
Angular 2 Cookbook
€41.99
Total 83.98 Stars icon

Table of Contents

17 Chapters
Architectural Overview and Building a Simple App in Angular Chevron down icon Chevron up icon
Migrating AngularJS App to Angular App Chevron down icon Chevron up icon
Using Angular CLI to Generate Angular Apps with Best Practices Chevron down icon Chevron up icon
Working with Components Chevron down icon Chevron up icon
Implementing Angular Routing and Navigation Chevron down icon Chevron up icon
Creating Directives and Implementing Change Detection Chevron down icon Chevron up icon
Asynchronous Programming Using Observables Chevron down icon Chevron up icon
Template and Data Binding Syntax Chevron down icon Chevron up icon
Advanced Forms in Angular Chevron down icon Chevron up icon
Material Design in Angular Chevron down icon Chevron up icon
Implementing Angular Pipes Chevron down icon Chevron up icon
Implementing Angular Services Chevron down icon Chevron up icon
Applying Dependency Injection Chevron down icon Chevron up icon
Handling Angular Animation Chevron down icon Chevron up icon
Integrating Bootstrap with Angular Application Chevron down icon Chevron up icon
Testing Angular Apps Using Jasmine and Protractor Frameworks Chevron down icon Chevron up icon
Design Patterns in Angular Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.4
(5 Ratings)
5 star 80%
4 star 0%
3 star 0%
2 star 20%
1 star 0%
Amazon Customer Jan 19, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good compliment to the angular website tutorial and documentation. Good coverage of some of the more complex concepts.
Amazon Verified review Amazon
Janet Sep 27, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This has been a great book to get me up and running with Angular. It is well-written. Sentences and instructions are unambiguous. Example code illustrates the topic that is being addressed in a concise manner. Well organized.
Amazon Verified review Amazon
Clint Jun 29, 2018
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
I'm 4 chapters in, and I'm considering ordering an alternative book from another publisher. The author doesn't appear to be a native English speaker for one. Aside from the vast grammatical anomalies, the inconsistencies and blanket assumptions this text makes has really turned me off to finishing the book. In some places using ECMAScript 2015 and others ES6 for instance. What stopped me to write this review is this snippet: "in AngularJS, we define controllers as Immediately Invoked Function Expressions. In Angular, we define components using TypeScript classes..." This is a huge assumption the author is making. There are many ways to define controllers in AngularJS. My experience has actually been using classes in TypeScript using controlleras syntax. Something else that really jumped out was this statement: "We need transpilers, such as TypeScript, that compiles the code down to JavaScript and target ES5, which is compatible with all browsers and platforms." I get that even IE9 has partial support for ES5, but the statement the author made is simply false. These examples might not be enough to express my distaste with this book. Moments ago it landed in the trash.
Amazon Verified review Amazon
Nikki Feb 23, 2018
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is an excellent book. It is easy to follow and covers all the important subjects. Keep up the awesome work!!
Amazon Verified review Amazon
Wilfrido felson Salgado Bermudez Oct 04, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Excellent book.
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.
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