sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

Auth0’s Sam Julien and Kim Maida spoke at ngVikings 2019 in Copenhagen.


**TL;DR:** Auth0's Sam Julien and Kim Maida spoke at [ngVikings 2019](https://ngvikings.org/), which took place May 26-28 in Copenhagen, Denmark. You can find all of the slides in [this great article](https://medium.com/@dzhavat/links-to-all-slides-from-ngvikings-e47d7ebda4f6) by community member [Dzhavat Ushev](https://twitter.com/dzhavatushev). You can also find every talk on the [ngVikings YouTube channel](https://www.youtube.com/playlist?list=PLVI0Ut22uwY5n8nKfDZeUb14tNksI4ny4).

While only three years old, [ngVikings](https://ngvikings.org/) has quickly made a name for itself as one of the coolest, friendliest, and most fun Angular conferences in the world. Hosted by a non-profit consisting of [organizers and volunteers](https://ngvikings.org/team) from Denmark, Finland, Norway, and Sweden, ngVikings is entirely community-driven. 

It had been a dream of mine to one day speak at ngVikings (I already have the beard for it) and this year I got my wish. [Kim Maida](https://auth0.com/blog/authors/kim-maida/), Auth0's Community & Content Manager, also got her wish to speak at ngVikings. We hit the road to Copenhagen and had a blast!

Since ngVikings took place not long after [ng-conf](https://auth0.com/blog/recap-of-state-of-angular-ng-conf-2019/) and during [the release of Angular 8](https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27), there was a lot of excitement in the air. With 400 attendees, 50 sessions over two tracks, and an entire day of workshops, ngVikings was a huge success. Every session was packed!

Let's take a look at what makes ngVikings so special and recap the big topics covered this year.

<AmpContent>
  <include src="TweetQuote" quoteText="If you can, go to ngVikings! It was a great conference for an amazing community, and run by some truly amazing people! Here's to hoping I can go back in 2020! &mdash; @mhartington"/>

</AmpContent>

<NonAmpContent>

  <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">If you can, go to ngVikings! It was a great conference for an amazing community, and run by some truly amazing people! Here&#39;s to hoping I can go back in 2020! <a href="https://t.co/JWPOOuJNeX">https://t.co/JWPOOuJNeX</a></p>&mdash; Mike Hartington (@mhartington) <a href="https://twitter.com/mhartington/status/1134564243725066241?ref_src=twsrc%5Etfw">May 31, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

## What Makes ngVikings So Special?
[Bill Odom](https://twitter.com/wnodom), technical lead at [Oasis Digital](https://oasisdigital.com) and generally awesome human, has a saying that I love: "The second best thing about Angular is Angular. The first is the community." This is definitely the case at ngVikings. ngVikings is focused on making the community front and center at the conference in addition to all of the great educational content. I love [their values](https://ngvikings.org/blog/posts/whoweare/):

- Love of community
- Passion for tech
- Inclusion
- Knowledge deserves to be free

ngVikings included an [ngGirls workshop](http://ng-girls.org/ngVikings-2019/), a scholarship program, and a diversity hour lunch. It also included a free ES2015 and TypeScript workshop taught by [Dan Wahlin](https://twitter.com/DanWahlin) for students of [Hack Your Future](https://www.hackyourfuture.net/), a code school focused on refugees, asylum seekers, and other groups with limited access to education and the labor market. There was even a booth during the conference for the students to show off their final projects from the workshop! You can [follow Hack Your Future on Twitter](https://twitter.com/HackyourfutureC) to learn more about this great organization.

![Hack Your Future students at ngVikings](https://images.ctfassets.net/23aumh6u8s0i/7KbdXLYFxmQmHuFNzGBNDp/803f6816b549d0cc2a0152092cf63b95/hack-your-future-2)
([Source](https://photos.google.com/share/AF1QipMmQDaoJZN28OkZigAVVL4mix7VdaoEFdESS_SsTzRerwEWs7HX_MInqThwF19byQ?key=YlZqbWpZckdMcWNreTluMnhNVnpoWEUwWUVqWjZn))

Of course, it doesn't hurt that the conference included a bunch of fun Vikings stuff. The rooms were named things like Bifrost and Valhalla, they had plenty of Vikings stickers, and there were even Viking costumes and sword fighting lessons!

This year the organizers also made a conscious effort to reduce the environmental impact of the conference. There was organic, sustainable food (including vegan options), the lanyards were recyclable, and there were no plastic water bottles or cups. Beyond that, as part of the speaker gift, the organizers made a donation to the organization [Plant et Træ](http://www.plant-et-trae.dk/) (Plant a Tree) to make up for all the CO2 of traveling to the conference. Pretty amazing!

![The speaker gifts from ngVikings: planting trees, reducing C02 through plant et trae Denmark non-profit](https://images.ctfassets.net/23aumh6u8s0i/2LgZA5S75ruSKCosiCDZXe/9fb8bae424177d1c2997e35004f98c0e/speaker-gift-2)

## Angular 8 Is Here!
ngVikings happened to coincide with the release of Angular 8. Angular team member [Minko Gechev](https://twitter.com/mgechev) gave a keynote talk on what's new in version 8 of Angular ([here are his slides](https://speakerdeck.com/mgechev/whats-new-in-angular-version-8)). Some of the highlights of Angular 8 include:

- Lazy loading through imports instead of "magic strings"
- [Differential loading](https://auth0.com/blog/angular-8-differential-loading/) by default
- The [new builders API](https://blog.angular.io/introducing-cli-builders-d012d4489f1b) for the CLI that lets you extend the building and deploying capabilities of the CLI
- [Improved support for web workers](https://v8.angular.io/guide/web-worker), such as the ability to generate them from the CLI and use them in your application
- The new [unified location service](https://v8.angular.io/guide/upgrade#using-the-unified-angular-location-service) to improve migration from the AngularJS `$location` service
- A new [Deprecation Guide](https://v8.angular.io/guide/deprecations) to assist users with updating Angular

Minko also talked a lot about the Angular community. Traffic to [angular.io](https://angular.io/) grew more than 50% in 2018! Minko discussed all the different ways people can get involved with the community, such as organizing meetups, helping with docs, writing blog posts, answering questions on [Gitter](https://gitter.im/angular/angular) or [StackOverflow](https://stackoverflow.com/questions/tagged/angular), and introducing bug fixes. He also talked about the [Collaborators Program](https://angular.io/about?group=Collaborators), of which I am a proud member!

![Minko Gechev at ngVikings keynote about what's new in version 8 of Angular](https://images.ctfassets.net/23aumh6u8s0i/7EZP1yCbhFakHlSlxmABmh/1077ce9c0688841acea84eabcc7d8e87/minko-gechev)

## A Few Highlights from ngVikings 2019
Every time I write one of these conference articles, I realize that it's impossible for me to talk about every session. Inevitably, I have to pick a handful of talks and feature them, which means I have to leave people out. When I do that, it doesn't mean the other talks weren't amazing and worth watching! Every single speaker at ngVikings (and other conferences!) puts in hours of time and energy. Try to watch as many of the [talk videos](https://www.youtube.com/playlist?list=PLVI0Ut22uwY5n8nKfDZeUb14tNksI4ny4) as you can!

Okay, with that out of the way, I want to highlight a few talks that really blew everyone away.

### Jeff and Mady Whelpley: "Create Your Own Hacker Nebula with Angular Blockly" ([Slides](https://docs.google.com/presentation/d/1x0ctNtDFaQtvqHaLwscQHZJcPwNwccnHPhyDiuNfkGU/edit?usp=sharing))
[Jeff Whelpley](https://twitter.com/jeffwhelpley) and his 8-year-old daughter Mady gave a presentation that was truly unforgettable. Jeff recently created [ngClub](https://ngclub.info/) to help his kids and others learn to code. In the talk, Jeff and Mady described the five steps they've created to take kids from zero code to writing actual JavaScript. The process starts with games and "subliminal messaging" to learn coding concepts, then moves to tools like [Scratch](https://scratch.mit.edu/) and [Blockly](https://developers.google.com/blockly/). This teaches kids the basic concepts that lead them to writing actual JavaScript syntax. It was so mind-blowing to watch Mady live-code on stage!

<AmpContent>
  <include src="TweetQuote" quoteText="How come I still get nervous when talking in front of crowds when Madylin @jeffwhelpley daughter is acing it? Well done! #ngVikings &mdash; @KristofSchepers"/>

</AmpContent>

<NonAmpContent>

  <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">How come I still get nervous when talking in front of crowds when Madylin <a href="https://twitter.com/jeffwhelpley?ref_src=twsrc%5Etfw">@jeffwhelpley</a> daughter is acing it? Well done! <a href="https://twitter.com/hashtag/ngVikings?src=hash&amp;ref_src=twsrc%5Etfw">#ngVikings</a> <a href="https://t.co/CEYeU3ZUPo">pic.twitter.com/CEYeU3ZUPo</a></p>&mdash; Kristof Schepers (@KristofSchepers) <a href="https://twitter.com/KristofSchepers/status/1132936607403786240?ref_src=twsrc%5Etfw">May 27, 2019</a></blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

### Dominic Elm and Uri Shaked: "It's Alive! Machine Learning Writes Your Code" ([Slides](https://go.urish.org/ml-vikings), [Code](https://github.com/urish/nn-function-generator))
[Dominic Elm](https://twitter.com/elmd_) and [Uri Shaked](https://twitter.com/UriShaked) gave a fantastic talk about machine learning. It focused on answering one question: "Given a function signature, can we create a model that will predict the body of that function?" After giving a brief introduction to machine learning and machine learning programs, Dominic and Uri covered some basics of neural networks and then dove into the main thesis. They walked through a five-step approach for solving a problem in machine learning:

1. Gather data
2. Clean data
3. Choose model
4. Training
5. Evaluation

They also showed off tools like [Google BigQuery](https://cloud.google.com/bigquery/) and [TensorFlow](https://www.tensorflow.org/). Overall, a really fascinating talk!

![Graph of five steps of approaching a machine learning problem.](https://images.ctfassets.net/23aumh6u8s0i/7aSjNkklPL7qLTszQiDDwF/a2138e84bc863c1664be06492259e5de/ml-approach)
([Source](https://slides.com/d3lm/ml-vikings#/20))

### Matt Podwysocki: "Our Observable Past, Present, and Future" ([Slides](https://github.com/mattpodwysocki/ng-vikings-2019))
His first talk in three years, [Matt Podwysocki](https://twitter.com/mattpodwysocki) was at ngVikings to discuss the history and future of functional reactive programming. If you're not aware of who Matt is, he's a Principal Software Engineer at Microsoft and has been involved in the [ReactiveX project](http://reactivex.io/) (the parent of RxJS) since the beginning. Matt gave a talk about the history of reactive extensions, functional reactive programming, and RxJS. He also talked about state management with RxJS and the lesser-known [IxJS](https://github.com/reactivex/ixjs). IxJS is a library of "interactive extensions for JavaScript." IxJS is for pull-based collections, just as RxJS is for push-based collections. It's great at I/O operations where you as the consumer can pull the data when you are ready. It was great having Matt back on stage!

![Matt's observable, general theory of reactivity graph](https://images.ctfassets.net/23aumh6u8s0i/4vfBjV6CFq3pLSbWm69mIJ/3e82690759bc9f16cbca14edefdfca44/observable-graph)
([Source](https://github.com/mattpodwysocki/ng-vikings-2019/blob/master/ngvikings-2019.pdf))

### Sam Brennan: "Angular for the Visual Learner"
Imagine being a teenager learning to code and running into problems learning abstract concepts, only to discover you have dyslexia. Now imagine turning that diagnosis into a project to use stop motion and 3D animation to teach programming through visuals. Finally, imagine getting up on stage in a foreign country to talk to 400 strangers about this journey! That's exactly what [Samantha Brennan](https://twitter.com/thelittlestdev) did to close ngVikings. Sam talked about her journey with dyslexia, her discovery of the book [The Gift of Dyslexia](https://www.amazon.com/Gift-Dyslexia-Smartest-Revised-Expanded/dp/0399535667) and its impact on her life, and her course [Angular for the Visual Learner](https://dyslexics-untie.teachable.com/p/angular-for-the-visual-learner). Sam raised the important point that including more visual aids in technical content helps everyone learn better, not just those with dyslexia. It was an inspiring presentation and a fitting end to a fantastic conference. Watch the video when it's posted, check out her course, and [read more about Sam's journey](https://medium.com/@SamLee_509/angular-for-the-visual-learner-677f7df78679).

<AmpContent>
  <include src="TweetQuote" quoteText="Great talk by @thelittlestdev on being a visual learner. @ngVikingsConf #ngVikings  She's a natural speaker! &mdash; @DeborahKurata"/>

</AmpContent>

<NonAmpContent>

  <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Great talk by <a href="https://twitter.com/thelittlestdev?ref_src=twsrc%5Etfw">@thelittlestdev</a> on being a visual learner. <a href="https://twitter.com/ngVikingsConf?ref_src=twsrc%5Etfw">@ngVikingsConf</a> <a href="https://twitter.com/hashtag/ngVikings?src=hash&amp;ref_src=twsrc%5Etfw">#ngVikings</a> <br><br>She&#39;s a natural speaker! <a href="https://t.co/VESToHKAse">pic.twitter.com/VESToHKAse</a></p>&mdash; Deborah Kurata (@DeborahKurata) <a href="https://twitter.com/DeborahKurata/status/1133399185020133378?ref_src=twsrc%5Etfw">May 28, 2019</a></blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

### Bonus: Shmuela Jacobs and Chris Noring: @azure/ng-deploy
Here's one more thing I thought was cool from ngVikings. [Shmuela Jacobs](https://twitter.com/ShmuelaJ) and [Chris Noring](https://twitter.com/chris_noring) gave a quick demo of a brand new tool for the Angular CLI that allows developers to deploy an Angular project to [Microsoft Azure](https://azure.microsoft.com/en-us/) in just two steps. The tool is called [@azure/ng-deploy](https://github.com/Azure/ng-deploy-azure) and you can install it using the Angular CLI (starting with version 8):

```bash
ng add @azure/ng-deploy@beta
```

You may be prompted to sign in to Azure, providing a link to open in your browser and a code to paste in the login page.

Next, build your Angular app:

```bash
ng build --prod
```

And, finally, deploy it to Azure:

```bash
ng run my-cool-app:deploy
```

You'll then see output with a link to view your site running in Azure blob storage. How cool is that?

## Auth0 at ngVikings
Auth0 had a strong presence at ngVikings this year as both myself and [Kim Maida](https://twitter.com/KimMaida) gave presentations on the first day of the conference.

![Sam Julien and Kim Maida dressed as vikings at ngVikings conference](https://images.ctfassets.net/23aumh6u8s0i/4XoLLsesrTZhgROwZcJwel/bc6146b66a73f0ca7f8671f491dfca1d/sam-and-kim-vikings)

I paired up with NgRx guru [Mike Ryan](https://twitter.com/MikeRyanDev) to give a joint talk on using NgRx as a tool for migrating from AngularJS to Angular. Mike and I have become good friends over the last year or so, having seen each other at many Angular and GDE events. At one of those events, we had an idea to give a joint talk on how you could migrate large, complex, event-driven apps using NgRx. Our ngVikings talk covered how to move business logic into the store, how to downgrade the store to work with AngularJS, and how to dispatch actions and use selectors in AngularJS code. This strategy's focus on "architecture first" makes it much easier to migrate the application's view layer using a traditional migration strategy. We've posted the [slides and sample code](http://samj.im/ngvikings) so you can dive deeper into this migration strategy.

Kim gave a talk called "Authstronomy: The Science of Authenticating Angular Apps." The first half of the talk was all about authentication best practices. Kim did a great job finding the balance of explaining identity concepts in a way that was approachable. She managed to explain [OAuth 2.0](https://auth0.com/docs/protocols/oauth2), [implicit flow](https://auth0.com/docs/flows/concepts/implicit), and the [auth code with PKCE flow](https://auth0.com/docs/api-auth/tutorials/authorization-code-grant-pkce) without causing everyone's eyes to glaze over and think about their next dental cleaning to distract themselves. She even discussed the [recent updates to best practices for securing SPAs](https://auth0.com/blog/oauth2-implicit-grant-and-spa/). The second half of the talk was specific to implementing authentication in Angular. Kim covered using observables to get tokens and subjects to store them, how to use interceptors to add tokens to outgoing HTTP requests, and how to use guards to protect routes. Check out Kim's [slides and resources](http://bit.ly/science-of-angular-auth) to learn more.

<AmpContent>
  <include src="TweetQuote" quoteText="This is @ngVikingsConf 2019! &mdash; @webmaxru"/>

</AmpContent>

<NonAmpContent>

  <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">This is <a href="https://twitter.com/ngVikingsConf?ref_src=twsrc%5Etfw">@ngVikingsConf</a> 2019! <a href="https://twitter.com/hashtag/ngvikings?src=hash&amp;ref_src=twsrc%5Etfw">#ngvikings</a> <a href="https://twitter.com/angular?ref_src=twsrc%5Etfw">@angular</a> <a href="https://twitter.com/hashtag/community?src=hash&amp;ref_src=twsrc%5Etfw">#community</a> <a href="https://t.co/khaJN6jmpi">pic.twitter.com/khaJN6jmpi</a></p>&mdash; Maxim «PWAdvocate» Salnikov (@webmaxru) <a href="https://twitter.com/webmaxru/status/1132987290911936512?ref_src=twsrc%5Etfw">May 27, 2019</a></blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

## Conclusion
A welcoming, inclusive community, fantastic technical content, and even environmentally responsible practices: what more could you ask for in a conference? Don't forget &mdash; ngVikings did all of this as a community-run non-profit. They set the bar really high. Large corporate-run conferences take note!

As usual, I've barely scratched the surface of all of the great content at ngVikings 2019. There were **so many** great talks I don't have space to cover. Luckily, community member [Dzhavat Ushev](https://twitter.com/dzhavatushev) has compiled all of the slides in [this great article](https://medium.com/@dzhavat/links-to-all-slides-from-ngvikings-e47d7ebda4f6). You can also find every talk on the [ngVikings YouTube channel](https://www.youtube.com/playlist?list=PLVI0Ut22uwY5n8nKfDZeUb14tNksI4ny4).

If you have the opportunity to speak at or attend ngVikings next year, don't hesitate!

<include src="asides/AboutAuth0" />


ngVikings 2019: A Great Time with the Nordic ngCommunity

Auth0’s Sam Julien and Kim Maida spoke at ng-conf 2019 in Salt Lake City.

The State of Angular: ng-conf 2019

Auth0’s Sam Julien spoke at The Big Hangout, a mini-conference hosted by Angular Finland.


![Sani Yusuf dancing at Angular Finland](https://images.ctfassets.net/23aumh6u8s0i/73KEi5mDUUm7O0Sboplgkc/3e23df4cb4b5dd28b78a8e760568b03d/sani-dancing-2)
([Source](https://twitter.com/AngularFI/status/1106592529280106498))

I was honored to get to speak at [The Big Hangout 2019](https://www.angular.fi/events/conferences/2019/home), a mini-conference put on by [Angular Finland](https://www.angular.fi/) on March 14, 2019. The conference was hosted by [Tieto](https://www.tieto.com/) in Espoo, just next to Helsinki.  It was also sponsored by other Finnish tech companies like [Frantic](https://www.frantic.com/), [Finitec](https://www.finitec.fi/), [Gofore](https://www.gofore.com/) (who hosted the after party), and [Innofactor](https://www.innofactor.com/) (who graciously sponsored my travel other there!).

<include src="TweetQuote" quoteText="#TheBigHangout was a mini @angular conference organized by @AngularFI featuring seven international speakers."/>

## The Talks
The Big Hangout featured seven international speakers on different topics.

Kicking off the conference as keynote speaker, who doesn’t love **[Sani Yusuf](https://twitter.com/saniyusuf)**? If you’re not familiar with Sani, he’s a Google Developer Expert based in London. Always the right balance of entertainment and education, Sani gave the perfectly-titled talk “Let’s Get Your Angular App To React.” Sani covered the reasons why forms are so important to business, the basics of Angular’s [reactive forms](https://auth0.com/blog/real-world-angular-series-part-6), and some advanced validation techniques. Learn more on [Sani's slides](https://slides.com/saniyusuf/lets-build-a-form#/).

![Sani Yusuf speaking about reactive forms at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/NJLYQwp3ghJEnYGqg9p0T/73a92f4d10bcc031d3f2a5afbd658364/sani-forms-2)

Next was **[Nadia Törnroos](https://twitter.com/NadiaTornroos)** on “Digital Accessibility as a Mindset.” Nadia moved to Finland from Moscow about four years ago and is a senior software developer at Tieto.  Nadia’s talk was in the format of a fireside chat with Angular Finland organizer [Richard Farkas](https://twitter.com/richardfarkas). Nadia made the case for accessibility and covered tools and resources for making sites more accessible. Accessibility is not just the right thing to do to help folks with disabilities, it’s also better for building brand, following best practices, and minimizing legal risk. One tool Nadia mentioned that I had not come across before is the [WAVE Web Accessibility Tool](http://wave.webaim.org/). This tool lets you input a site and see an interactive map of accessibility errors. You can check out [Nadia's slides](https://drive.google.com/file/d/1rH9zGWIPD9vjWZ817DItEf8lXscAteZ4/view) for even more resources.

![Nadia Törnroos discussing accessibility at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/11eaa3Bl4VxGs33UCmENfT/4442616f62dfc89ef7aea33df7843ac9/nadia-accessibility-2)

We took a quick happy hour break after Nadia but dived back in with **[Akseli Virtanen](https://twitter.com/_akseliv)** and a talk called “Thinking in Web Components,” which was about both why you should care about web components and how to start using them. Akseli is a senior developer at Frantic. He’s also a proud Finn and gave me lots of great cultural and historical insights during my trip! Askeli’s talk focused on [Angular Elements](https://angular.io/guide/elements), which allows you to create custom elements using web components.  I loved Askeli’s explanation of web components as an abstraction layer between the browser APIs and whatever technology is controlling the underlying logic or function of the custom element. Akseli's [slides](https://drive.google.com/file/d/10v6_pz4BIUl2cxRTTnDNXVO3uR5JdL3E/view) have more information and some helpful diagrams.

<AmpContent>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Our senior dev <a href="https://twitter.com/_akseliv?ref_src=twsrc%5Etfw">@_akseliv</a> onstage, talking about using one’s imagination and <a href="https://twitter.com/hashtag/Angular?src=hash&amp;ref_src=twsrc%5Etfw">#Angular</a> Elements. 💡 <a href="https://twitter.com/hashtag/BigHangout?src=hash&amp;ref_src=twsrc%5Etfw">#BigHangout</a> <a href="https://t.co/soT9ohql0d">pic.twitter.com/soT9ohql0d</a></p>&mdash; Frantic (@franticcom) <a href="https://twitter.com/franticcom/status/1106208100833550338?ref_src=twsrc%5Etfw">March 14, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

I followed Askeli with a talk on “Finding the Right Path from AngularJS to Angular.”  I went over the four migration paths and how to determine which one is right for your application by looking at your team and your codebase. I also recommended a few different resources, like the [ngMigration forum and wiki](https://github.com/angular/ngMigration-Forum). You can [follow me on Twitter](https://twitter.com/samjulien) and check out my [slides and resources](http://samj.im/finland) to learn more.

![Sam Julien discussing ngUpgrade at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/HEjjrYvofqKyeT3guiSu0/722679d7fe1aaf848335c2c1f1ed49b7/sam-julien-finland-2)
([Source](https://twitter.com/StanimiraVlaeva/status/1106220184061263872))

After a lovely dinner break, **[Sallar Kaboli](https://twitter.com/sallar)**, a principal software engineer at Tieto, presented on “Achieving Performance in Heavy Applications with Angular and WebAssembly.” Sallar moved to Finland from Iran and is both super knowledgable and incredibly friendly. After covering the basics of [WebAssembly](https://webassembly.org/), Sallar gave a truly remarkable demo. Using the [Rust programming language](https://www.rust-lang.org/) on the backend with WebAssembly and Angular on the frontend, Sallar recreated [Conway’s Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).  You can check out [his code](https://github.com/sallar/ng-game-of-life) and [his slides](https://sallar.github.io/talks/ng-wasm/#0) to see more. Here’s a quick video of the demo:

<AmpContent>
<amp-video controls
  layout="responsive"
  width="480" height="270">
  <source src="https://cdn.auth0.com/blog/angular-finland/sallar-wasm-demo-compressed.mp4"
    type="video/webm" />
</amp-video>

</AmpContent>

<NonAmpContent>

<video controls="controls">
  <source src="https://cdn.auth0.com/blog/angular-finland/sallar-wasm-demo-compressed.mp4">
</video>

</NonAmpContent>

You can also play a [deployed version](https://sallar.github.io/ng-game-of-life/) of the game! *Hint: you can command-click and shift-click while the game is running to shoot gliders and spaceships!*

<include src="TweetQuote" quoteText="I'm reading about @sallar's amazing WASM demo with @rustlang and @angular at @AngularFI!"/>

Next, **[Stanimira Vlaeva](https://twitter.com/StanimiraVlaeva)** gave a talk called “Frictionless Breaking Changes Migration with `ng update` and Schematics.” Stanimira is a GDE from Bulgaria, a developer for Progress, and a core team member of NativeScript. We met at [NgAtlanta](https://auth0.com/blog/ngatlanta-is-changing-tech/) this year and it’s been great to get to know her! Her talk was all about using custom schematics to mitigate the risk of updating dependencies. You can [look at her slides](http://bit.ly/update-ng-fi) to see her examples and more resources on schematics.

![Stanimira Vlaeva discussing Angular schematics at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/5L0SZrzHJ59aaJdXA3kBFd/e8f12308afd61706cfdcae281c48c43e/stanimira-schematics-2)

**[Michael Hladky](https://twitter.com/Michael_Hladky)** wrapped up the day with a presentation titled “The Ease of Using Higher Order Operators.” Michael is a GDE from Austria who does training and consulting. He was originally scheduled to do a different talk, but one of the software providers he used in his presentation was having technical issues. I was super impressed by how quickly Michael was able to swap out his talk! He went over the nuts and bolts of several RxJS operators and you can [view his slides](https://docs.google.com/presentation/d/1N26PPQmsUaZUnSGMMiRuPdc9GxNMS2Eij8qqKSx4OhI/edit#slide=id.g5053e61ac8_0_1315) to see all of helpful diagrams and animations. If you’ve been following Michael lately, he’s been devoting a lot of his time to the RxJS ecosystem, particularly to the [marble diagram design system](http://bit.ly/marble-design-system). He’s producing a lot of fantastic content for the RxJS community.

![Michael Hladky talking about RxJS operators at Angular Finland conference.](https://images.ctfassets.net/23aumh6u8s0i/6wCzah5VnGEuz8nygebCag/539bfd1a1b9b8ef5e5c1406bcb5f474d/michael-hladky)
([Source](https://twitter.com/AngularFI/status/1106613728114556929))

After the event, we were bussed over to the Gofore office for a very fun, very low-key after party with good food, good beer, and great conversation. I really appreciated how chill the whole day was. I am often exhausted after American conferences due to how intense and involved they are (even if they’re a lot of fun). Hanging out with the Finns was very laid back and not at all stressful!

## Conclusion
The Big Hangout was a small but very well-run and enjoyable conference. I had a great time getting to know friends in the Angular Finland community and hearing about what they’re currently working on. My favorite thing was how international the group was &mdash; I got to make new friends who were not only native Finns, but who also had moved from Turkey, Iran, Bangladesh, India, and more. The global Angular community truly amazes me!

<include src="asides/AboutAuth0" />


Angular Finland: The Big Hangout

Auth0's Sam Julien had the opportunity to speak at AngularConnect 2018 in London.


**TL;DR:** In this post, we take a look at a few of the can't-miss talks from [AngularConnect 2018](http://www.angularconnect.com/), covering topics like Ivy, Bazel, and why you might not need NgRx after all.

I had the incredible opportunity this year to speak at [AngularConnect 2018](http://www.angularconnect.com/), held November 6-7 at ExCel London.

![AngularConnect Day One Opening](https://images.ctfassets.net/23aumh6u8s0i/hYaUzjJNQqND5cb4m15m5/1933125ab1170ff2291f4ecd38292bef/connect-opening)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45244428804/in/album-72157697939547280/)

This conference was organized by [White October Events](https://www.whiteoctoberevents.co.uk/) and was amazingly well run.  Both as a speaker and as an attendee, I was blown away by how great this conference was. There was excellent content, an emphasis on giving back to the community, and mindfulness towards accessibility like live-captioning of every talk. On top of all that, the logistics for speakers were flawless. My only complaint is that I couldn’t clone myself to watch all of the talks&mdash;I can’t recommend this conference enough!

This year’s AngularConnect featured two main tracks, as well as mini-workshops, office hours, and Q&A panels on subjects like AngularJS migration, UI, tooling, and architecture. All of the talks from the two main tracks were streamed live and recorded and [all of the videos have been uploaded](https://www.youtube.com/watch?v=rbFLorQWlOQ&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl).

<br/>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">2 days of amazing talks with an amazing community <a href="https://twitter.com/AngularConnect?ref_src=twsrc%5Etfw">@AngularConnect</a> 😀 <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a> <a href="https://twitter.com/hashtag/Frontend?src=hash&amp;ref_src=twsrc%5Etfw">#Frontend</a> <a href="https://twitter.com/hashtag/evtech?src=hash&amp;ref_src=twsrc%5Etfw">#evtech</a> <a href="https://t.co/glfQ9JlbFG">pic.twitter.com/glfQ9JlbFG</a></p>&mdash; Hassen Hichri (@Hassen91Hassen) <a href="https://twitter.com/Hassen91Hassen/status/1060491046528933888?ref_src=twsrc%5Etfw">November 8, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Highlights from AngularConnect
Let’s look at some highlights from the conference and some talks you definitely don’t want to miss.

### The Keynote
Since [AngularMix](https://auth0.com/blog/top-takeaways-from-angularmix-2018/) was just a few weeks prior to AngularConnect, most of the themes of the conference were the same. Angular team lead [Igor Minar](https://twitter.com/IgorMinar) gave the [Day One Keynote](https://www.youtube.com/watch?v=rbFLorQWlOQ&index=1&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl) and it covered much of the same ground as Brad Green’s keynote in Orlando at AngularMix. Igor talked about the history of Angular from when he joined Google, the current community efforts, and what’s happening right now in the Angular ecosystem. His keynote really set the stage for the rest of the talks in the conference, highlighting Ivy, Bazel, Angular Elements, and other tools in the Angular ecosystem like the [Material CDK](https://material.angular.io/cdk/categories). Check out [Igor’s slides](http://g.co/ng/ac2018) for more.

![Igor Minar delivering the opening Keynote at AngularConnect](https://images.ctfassets.net/23aumh6u8s0i/5yaJj5ZPLw16J7FBxCsF86/da9d28ad0856da0d127a7270f15970f6/igor-minar)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45056872205/in/album-72157697939547280/)

<include src="TweetQuote" quoteText="We are trying to create excellent interactions in the @angular community. - @igorminar @angularconnect"/>

### All About Ivy
Perhaps the number one buzzword these days in the Angular community is “Ivy.” Ivy is the eagerly anticipated new render engine that will be faster and produce smaller builds due to its use of tree-shaking. Only the parts of Angular you use will be shipped to the browser! At AngularConnect, there were two really awesome talks about Ivy given by folks from Google:

* Google engineer [Alex Rickabaugh](http://twitter.com/synalx) opened day two of AngularConnect with  his fascinating talk about [The Theory of Angular Ivy](https://www.youtube.com/watch?v=isb5Ef6yI48&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=2).  Alex talked about how Ivy’s overarching purpose is to simplify compilation, deployment, and managing dependencies. To illustrate this, Alex walked us through how the same application gets compiled with the Angular 2.0 renderer, the Angular 4+ View Engine, and Ivy. You definitely want to see this one!

![Alex Rickabaugh talking about Ivy](https://images.ctfassets.net/23aumh6u8s0i/5h7c6CkEDBO94RRbVUk6ir/33cf9c39880c1809eb57703bc5c949ba/alex-rickabaugh)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45986219891/in/album-72157697939547280/)

* After Alex, Google engineer [Jason Aden](http://twitter.com/jasonaden1) showed us [Angular Ivy by Example](https://www.youtube.com/watch?v=MMPl9wHzmS4&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=24). Jason dove right into debugging and coding with Ivy, demonstrating the simpler stack traces and new debugging APIs. He also demonstrated changes to dynamic components, lazy loading, and routing due to Ivy that look really awesome.

### A Bit of Bazel
[Martin Probst](https://twitter.com/martin_probst), another software engineer at Google, gave a really fascinating talk about [Why You Should Use Bazel](https://www.youtube.com/watch?v=Qb3tykleV_g&index=28&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). I learned a lot about Bazel from this talk, especially what makes Bazel different from other bundlers or task runners. For example, in one of Martin’s [slides](https://docs.google.com/presentation/d/1Q0S4ee49PoEoIxRydp3JgIdfAnGanbPCuMTJuz37Nk0/preview?slide=id.g26d86d3325_0_0), he notes that builds in Bazel are pure functions. They have no side effects and only depend on their inputs. This makes Bazel builds not only easier to analyze, but also easier to debug and run in parallel. This was a great talk for folks who want to dig a little deeper into Bazel.

![Bazel builds are functional.](https://images.ctfassets.net/23aumh6u8s0i/7IY4WBwaEx3SWkIprJOn2e/ede13340122359431d9b52e944704cab/bazel-builds)
[Source](https://docs.google.com/presentation/d/1Q0S4ee49PoEoIxRydp3JgIdfAnGanbPCuMTJuz37Nk0/preview?slide=id.g44208fb040_5_55)

<include src="TweetQuote" quoteText="With Bazel, builds are functional and thus easy to analyze and debug."/>

### More on Migration
With [Pete Bacon Darwin](https://twitter.com/petebd), who created the [ngUpgrade library](https://github.com/angular/angular/tree/master/packages/upgrade), as one of the conference organizers, it makes sense that migration from AngularJS to Angular was a big focus at this year’s AngularConnect. There’s still a ton of legacy AngularJS code out there and the Angular community wants to be sure those folks feel supported in their migration. There were three main talks on migration:

- I gave a talk the first day about [How to Save Time and Money by Planning Your ngUpgrade](https://www.youtube.com/watch?v=495KHr966e0&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=32). I went over the four main migration strategies and walked the audience through helping two fictional companies decide which path makes the most sense for them. These example companies were based on my own experiences, as well as answering questions from the students of [my ngUpgrade course](http://www.upgradingangularjs.com). Check out [my slides](http://www.upgradingangularjs.com/angularconnect) for more resources.
- Later on the first day, [Erin Coughlan](https://twitter.com/ErinCoughlan16) gave a fascinating talk on [Upgrading to Angular without ngUpgrade](https://www.youtube.com/watch?v=aXOYa4S96OM&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=31). Erin is a front end engineer at Google and her talk focused on using Angular Elements to migrate from AngularJS. She created a really useful library called [create-ng1-wrapper](https://github.com/ErinCoughlan/create-ng1-wrapper) and demonstrated how to use it with Angular Elements.
- On the second day, [Elana Olson](https://twitter.com/elanathellama) went further in depth on the four recommended paths for [Migrating from AngularJS to Angular](https://www.youtube.com/watch?v=fFLKEtIqZeY&index=23&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). She also talked about some amazing tools she’s created through her internship with Google, including the [ngMigration Assistant](https://github.com/ellamaolson/ngMigration-Assistant) and the [ngMigration Forum and Wiki](https://github.com/angular/ngMigration-Forum/wiki).

![Elana Olson discussing ngMigration Assistant](https://images.ctfassets.net/23aumh6u8s0i/6J2YLXqaOxX5cWq1vLLFj4/81fbbbdc8993a580185639dbdefc6df3/elana-olson)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45074320625/in/album-72157697939547280/)

In addition to these talks, there was also an upgrade panel and office hours with Elana, Erin, and myself.

## Even More Talks You Don’t Want to Miss
I wish I could highlight every single talk and workshop at AngularConnect — there were so many great ones! Here are a few more you need to be sure to watch (but really, just watch all of them):

- With NgRx feeling omnipresent these days, it’s easy to feel like you’re doing something wrong by not using it in your Angular project. Luckily, Mr. NgRx himself, [Mike Ryan](https://twitter.com/MikeRyanDev), gave a fantastic talk this year on why [You Might Not Need NgRx](https://www.youtube.com/watch?v=omnwu_etHTY&index=30&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). Mike covers the use cases for when it’s a great idea to use NgRx and when you’re better off managing state on your own.
- [Max Koretskyi](https://twitter.com/maxim_koretskyi) has quickly made a name for himself as the go-to person for [in-depth breakdowns of source code](http://www.angularindepth.com). In his phenomenal talk [Optimize and Debug Change Detection Like a Pro](https://www.youtube.com/watch?v=DsBy9O0c6eo&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=17), Max explains why the infamous `ExpressionChangedAfterItHasBeenCheckedError` happens, how change detection really works, and how you can debug it yourself. Excellent work from Max, as always!
- One exceptionally effective talk this year came from [Uri Shaked](https://twitter.com/UriShaked) and [Kapunahele Wong](https://twitter.com/kapunahele). Their talk [Climbing up Injector Trees](https://www.youtube.com/watch?v=F6rF16TmB0E&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=40) explored dependency injection through lots of live-coding. Their ability to break down a complex subject with simple examples was just amazing.

![Uri Shaked and Kapunahele Wong talking about dependency injection.](https://images.ctfassets.net/23aumh6u8s0i/3BgvwE1ahbDkh8TUSyNll/7834f7fa5b14d4d5b78528f325c3952a/uri-and-kapunahele)
[Source - Photo by Drew McLellan](https://www.flickr.com/photos/whiteoctevents/45074330685/in/album-72157697939547280/)

- You can’t help but love [Sani Yusuf](https://twitter.com/saniyusuf). He could talk about just about anything and capture an audience, but this year he gave a talk called [Crossing Across Platforms](https://www.youtube.com/watch?v=G39uEEa2hxo&index=7&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl). It was all about how to structure your Angular application to be used on the web, desktop, and mobile with minimal code duplication. You can also check out [Sani’s slides](https://slides.com/saniyusuf/crossing-across-platforms) for reference.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/saniyusuf?ref_src=twsrc%5Etfw">@saniyusuf</a> - I enjoyed your ionic class very much but your “Crossing Across Platforms” was hands down my favorite talk at <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a></p>&mdash; Lisa Copeland (@Lisacope1) <a href="https://twitter.com/Lisacope1/status/1060304729866190848?ref_src=twsrc%5Etfw">November 7, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- Last but not least, something a bit different. [Jo Pearce](https://twitter.com/jdpearce) gave a fantastic, unique lightning talk called [Speaker Ballads](https://youtu.be/Fd_MkhU3JUU?t=955). These two poems do a wonderful job of capturing what it’s like to be a technical speaker. Don’t forget to check out Jo’s website for the [written poems](https://jopearce.co.uk/poetry/speaker-ballads/).

...And I haven't even talked about [Asim Hussain](https://www.youtube.com/watch?v=_H2NNofisA0&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=29), [Shmuela Jacobs](https://www.youtube.com/watch?v=q2Exs-82tkw&index=15&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl), or [Michael Hladky](https://www.youtube.com/watch?v=S1eDh7MonbI&list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl&index=19)! Seriously, just watch all of the talks.

<include src="asides/AboutAuth0" />

## See you next year!
I hope to see you at AngularConnect next year, so save the date: September 19-20, 2019. In the meantime, if you’re looking to become part of the Angular community, check out this great [Angular Conferences site](https://angularconferences.com/). It was built by the team at [Ultimate Courses](https://ultimatecourses.com), especially [Ana Cidre](https://twitter.com/AnaCidre_), who gave a [great talk on component architecture](https://youtu.be/fLNERt19FTs?list=PLAw7NFdKKYpGr_je48akFwcw8tYUk4nzl) with [Sheri List](https://twitter.com/sherrrylst). At the site, you’ll find Angular conferences, meetups, and workshops all over the world. Come join the Angular family!

<br/>
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We had a ROAR-some time at <a href="https://twitter.com/hashtag/AngularConnect?src=hash&amp;ref_src=twsrc%5Etfw">#AngularConnect</a> 2018 🦖 Catch up on all the action below and get ready for next year!<br><br>📺 Videos: <a href="https://t.co/gIPABaEfAI">https://t.co/gIPABaEfAI</a><br>📸 Photos: <a href="https://t.co/saINRnHuS4">https://t.co/saINRnHuS4</a><br>✉️ Newsletter: <a href="https://t.co/ZaM5ezw3rn">https://t.co/ZaM5ezw3rn</a><br>🗓 19 &amp; 20 September 2019 <a href="https://t.co/poxCyNl72Z">pic.twitter.com/poxCyNl72Z</a></p>&mdash; AngularConnect (@AngularConnect) <a href="https://twitter.com/AngularConnect/status/1065588831783739392?ref_src=twsrc%5Etfw">November 22, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Must-See Talks from AngularConnect 2018

Auth0's Kim Maida and Sam Julien spoke at AngularMix 2018 in Orlando, Florida. Learn what's new in the Angular ecosystem and what's coming soon.

Top Takeaways from AngularMix 2018

Learn about upgrading an application from AngularJS to the new Angular. As well as how to upgrade AngularJS authentication strategies to Angular.

Upgrade Your AngularJS Authentication Service

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Learn how to develop applications in AngularJS  using a component-based architecture.

New Features for Developing AngularJS Applications - Part 2: Build An App

Learn how to develop applications in AngularJS using a component-based architecture.



**TL;DR:** AngularJS 1.5+ has undergone major updates. In this article, you'll learn how to develop AngularJS applications using a component-based architecture and leverage the API changes that will help you write your AngularJS applications in an Angular(v2+) style.

The Component-based Architecture is prevalent in frontend development today. JavaScript Client-side frameworks such as React, Preact, Ember, Vue.js all advocate building applications in components. _Angular_ also popularly known as _Angular(v2+)_ which is a major rewrite of AngularJS is completely component-based.

<include src="TweetQuote" quoteText="The Component-based Architecture is prevalent in frontend development today."/>

A typical example of an application built applying the component architecture involves developing several features of the application as modules with reusable components.

For example, let's use a Music Player application. A required feature for this product could be a Music Player widget. A developer designing their app in a component-based architecture style can model this feature as a *Module*.

Let's call it the _Music Player Widget_ Module. Inside the module, we can have the following components:

- _Music Search_ Component, `<music-search>`.
- _Music Playlist_ Component, `<music-playlist>`.
- _Currently Playing Song_ Component, `<music-currently-playing>`.

In a Component-based Architecture, we usually have _Parent_ and _Child_ components. The three individual components mentioned above can be referred to as _Child_ components wrapped up into a big component that will be known as the _Parent Component_ or _Root_ component.

## The AngularJS .component() method

The Angular team introduced the `.component()` method in AngularJS 1.5. This method allows developers to write their applications using the component-based architecture. How do we use the `.component()` ?

Before Angular 1.5, we only had directives, Angular directives such as `ngHide`, `ngHref`, `ngRepeat`, and custom directives.

Directives are a unique and powerful feature that allows you create custom HTML-like tags, specific to your application. In this article, we'll examine a directive, and convert it to a component using the `.component()` method.

<include src="TweetQuote" quoteText="Directives are a unique and powerful feature that allows you create custom HTML-like tags, specific to your application"/>

```js
angular.module('tutorial', [])
  .directive('abacus', function abacus() {
    return {
      scope: {},
      bindToController: {
        count: '='
      },
      controller: function () {
        function increment() {
          this.count++;
        }
        function decrement() {
          this.count--;
        }
        this.increment = increment;
        this.decrement = decrement;
      },
      controllerAs: 'abacus',
      template: `
        <div>
          <input type="text" ng-model="$ctrl.count">
          <button type="button" ng-click="$ctrl.decrement();">-</button>
          <button type="button" ng-click="$ctrl.increment();">+</button>
        </div>
      `
    };
  });
```

The first step in converting the directive to a component is to change `.directive()` to `.component()`.

_directive_

```js
.directive('abacus', function abacus() {
  return {

  };
});
```

_component_

```js
.component('abacus', function abacus() {

});
```

Nice and simple. Essentially the return `{};` statement inside the `.directive()` becomes the Object definition inside `.component()`. Awesome!

## Bindings

In a `.directive()`, the scope property allows us to define whether we want to isolate the `$scope` or inherit it, this has now become a sensible default to always make our directives have isolated scope. So repeating ourselves each time just creates excess boilerplate.

With the introduction of `bindToController`, we can explicitly define which properties we want to pass into our isolate scope and bind directly to the Controller.

With the bindings property on `.component()` we can remove this boilerplate and simply define what we want to pass down to the component, under the assumption that the component will have an isolated scope.

```js
// before
.directive('abacus', function abacus() {
  return {
    scope: {},
    bindToController: {
      count: '='
    }
  };
});

// after
.component('abacus', {
  bindings: {
    count: '='
  }
});
```

## Refactoring Controller Function

Nothing has changed in the way we declare controller, however it’s now a little smarter and has a default `controllerAs` value of `$ctrl`.

If we’re using a controller local to the component, we’ll do this:

```js
  // 1.4
  {
    ...
    controller: function () {}
    ...
  }
```

If we’re using another controller defined elsewhere, we’ll do this:

```js
// 1.4
{
  ...
  controller: 'SomeCtrl'
  ...
}
```

If we want to define `controllerAs` at this stage, we’ll need to create a new property and define the instance alias:

```js
// 1.4
{
  ...
  controller: 'SomeCtrl',
  controllerAs: 'vm'
  ...
}
```

This then allows us to use something like `vm.title` inside our template to talk to the instance of the controller. In AngularJS 1.5, we can do the following inside `.component()`:

```js
// 1.5
{
  ...
  controller: 'SomeCtrl as vm'
  ...
}
```

This helps us minimize our code by preventing the use of `controllerAs` property. However, we can add the `controllerAs` property to maintain backwards compatibility or keep it if that’s within your style for writing directives or components.

There is another option that completely eliminates the need for `controllerAs`, and Angular automatically uses the property, `$ctrl`. For instance:

```js
.component('bet', {
  controller: function () {
    this.betNumber = 777;
  }
});
```

In the code above, there is no `controllerAs` property. In our template, controller defaults to `$ctrl`, so we can get the value of `777` in our template using `$ctrl.betNumber`.

Since there is no need for the `controllerAs` property, we can just have our directive refactored to a component like so:

```js
// before
.directive('abacus', function abacus() {
  return {
    scope: {},
    bindToController: {
      count: '='
    },
    controller: function () {
      function increment() {
        this.count++;
      }
      function decrement() {
        this.count--;
      }
      this.increment = increment;
      this.decrement = decrement;
    },
    controllerAs: 'abacus'
  };
});

// after
.component('abacus', {
  bindings: {
    count: '='
  },
  controller: function () {
    function increment() {
      this.count++;
    }

    function decrement() {
      this.count--;
    }

    this.increment = increment;
    this.decrement = decrement;
  }
});
```

## Templating Changes

Look at the code below, and how the template property is defined.

```js
.component('abacus', {
  bindings: {
    count: '='
  },
  controller: function () {
    function increment() {
      this.count++;
    }
    function decrement() {
      this.count--;
    }
    this.increment = increment;
    this.decrement = decrement;
  },
  template: `
    <div>
      <input type="text" ng-model="$ctrl.count">
      <button type="button" ng-click="$ctrl.decrement();">-</button>
      <button type="button" ng-click="$ctrl.increment();">+</button>
    </div>
  `
});
```

The template property can be defined as a function injected with `$element` and `$attrs` parameters. If the template property is a function then it needs to return a String representing the HTML to compile:

```js
{
  ...
  template: function ($element, $attrs) {
    // access to $element and $attrs
    return `
      <div>
        <input type="text" ng-model="$ctrl.count">
        <button type="button" ng-click="$ctrl.decrement();">-</button>
        <button type="button" ng-click="$ctrl.increment();">+</button>
      </div>
    `
  }
  ...
}
```

## One Way Data Binding

If you have been using AngularJS long enough, you will be accustomed to the two-data way binding it provides. However, in AngularJS 1.5+, there is a new one-way data binding that we can explore and also use to improve the performance of our AngularJS applications.

A new syntax expression for the one-way data binding is the use of `<` notation. For two-way data bindings, the `=` notation is used instead.

```js
{
  ...
  bindings: {
    firstObj: '<',
    secondObj: '='
  },
  ...
}
```

Check out a good example of one-way data binding below:

```js

var sample = {
  bindings: {
    firstObj: '<',
    secondObj: '<'
  },
  template: `
    <div class="section">
      <h4>
        One way Data binding Example
      </h4>
      <p>First Object: {{ $ctrl.firstObj }}</p>
      <p>Second Object: {{ $ctrl.secondObj }}</p>
      <a href="" ng-click="$ctrl.testDataBinding();">
        Change Values
      </a>
    </div>
  `,
  controller: function () {
    this.testDataBinding = function () {
      this.firstObj = 10;
      this.secondObj = {
        maxwell: {
          language: 'PHP',
          name: 'Jack Maxwell'
        }
      };
    };
  }
};

function ExampleController() {
  this.exfirstObj = 99;
  this.exSecondObj = {
    unicodeveloper: {
      language: 'JavaScript',
      name: 'Prosper Otemuyiwa'
    }
  };
  this.testDataBinding = function () {
    this.exfirstObj = 33;
    this.exSecondObj = {
      lesasote: {
        language: 'Scala',
        name: 'Shitta Kalesaso'
      }
    };
  };
}

angular
  .module('app', [])
  .component('sample', sample)
  .controller('ExampleController', ExampleController);

```

``` html  

<div ng-app="app">
  <div ng-controller="ExampleController as example">
    <h3>
      One way data-binding
    </h3>
    <div class="section">
      <h4>
        Parent
      </h4>
      <p>
        First Object: {{ example.exfirstObj }}
      </p>
      <p>
        Second Object: {{ example.exSecondObj }}
      </p>
      <a href="" ng-click="example.testDataBinding();">
        Change Parent Values
      </a>
    </div>
    <sample firstObj="example.exfirstObj" secondObj="example.exSecondObj"></sample>
  </div>
</div>

```

One-way data binding allows changes to propagate down and flow into the component to update it with new data.

## LifeCycle Hooks

Lifecycle hooks shipped alongside the `.component()` method in AngularJS 1.5. These hooks are functions that can be invoked at different stages of a component's life in AngularJS apps. These hooks are:

- **$onInit()**
- **$onChanges()**
- **$onDestroy()**
- **$postLink()**


### $onInit()

The `$onInit()` hook is invoked when controllers have been constructed. It is used for initialization work for controllers. A typical example is populating a table or some form of list once a controller has been loaded.

```js
function MyController() {
  this.$onInit = function () {
    this.players = [{
        "name": "Lionel Messi",
        "club": "Barcelona",
        "jerseyNumber": 10,
        "position": "Forward",
      },
      ...

    ];
  };
}
```

``` html  

  <div ng-repeat="player in players">
    <td>{{ player.name }}</td>
    <td>{{ player.club }}</td>
    <td>{{ player.jerseyNumber }}</td>
    <td>{{ player.position }}</td>
  </div>

```

### $onChanges()

Remember the old way of detecting changes with `$scope.$watch()`. In Angular 1.5, changes can be detected with the `$onChanges()` hook. When building components at one point you will have data coming into your component from an external source e.g parent component. With `$onChanges()`, we can react to this changes and update the child component data effectively.

Before we go ahead into examples it is important for us to understand, how, why and when this hook is called. `$onChanges` hook is called in two scenarios, one being during component initialization, it passes down the initial changes that can be used right away through `isFirstChange` method.

```js
$ctrl.onChanges = function (changes) {
    if (changes.commit) {
        $ctrl.issues = openIssues(changes.commit.currentValue);
        $ctrl.repo = createdRepos(changes.commit.currentValue);
    }
}
```

### $onDestroy()

This hook is called when its containing scope is destroyed. We can use this hook to release external resources, watches and event handlers. This is basically the same as `$scope.on($destroy, fn)` when used in controllers.

```js
function MyController($element) {

  var eventHandler = function () {
    /**
     * Write code here
     */
  };

  /**
   * [$onInit: Attach our eventHandler when the element is clicked]
   */
  this.$onPostLink = function () {
    // When the component DOM has been compiled attach you eventHandler.
  };

  /**
   * [$onDestroy: Destroy the eventHandler once the component is destroyed]
   */
  this.$onDestroy = function () {
    // Destroy all custom events or bindings when the component scope is destroyed.
  };
}
```

When our component is constructed, we attach a click event to the component element that does something to it when clicked, it can be wherever we want let's say show alert box saying I am clicked.

In the duration when this component is active we would be happy to have this event, but when this component is inactive, we don't need this event anymore it has to go. Since this is our custom event and it's not native to Angular, it will not be detached from our app along with the component, but it will be left snooping around for an element which does not exist.

We need to tell Angular through the `$onDestroy` hook that when this component is destroyed, the event should be detached too.

### $postLink()

This hook is called after the controller's element and its children have been linked. When the component elements have been compiled and ready to go, this hook will be fired.

```js
function MyController($element) {
  /**
   * When the element and its child nodes have been compiled
   */

  this.$postLink = function () {
    /**
     * Engineer something epic here
     */
  };

}
```

This hook can help us to implement some functionalities that depend on the component elements to be fully compiled. It is important to note that this is not a complete replacement for DOM manipulation, this functionality should be handled by decorator directives.


## Stateless components

There’s now the ability to create `stateless` components. This is essentially a component with no controller attribute.

```js

var Person = {
  bindings: {
    name: '<',
    age: '<',
    sex: '<'
  },
  template: `
    <div>
      <p>Name: {{ ::$ctrl.name }}</p>
      <p>Age: {{ ::$ctrl.age }}</p>
      <p>Age: {{ ::$ctrl.sex }}</p>
    </div>
  `
};

angular
  .module('app', [])
  .component('person', Person);

```

Use in a html file like so:

``` html  

  <person name="prosper" age="14" sex="male"></person>

```


## Stateful Components

Stateful components are components that perform stateful tasks such as handling form data, making HTTP requests and generally manipulating data. In a stateful component, you can have a controller that loads a list of car items to display from an external service (API).

```js
var CarItems = {
  template: './car.html',
  controller: function($http) {
    var ctrl = this;
    // Initialising the component
    ctrl.$onInit = function() {
      $http.get('/api/carlistings').then(function (data) {
        ctrl.items = data;
      });
    };
  }
};

angular
  .module('app', [])
  .component('carItems', CarItems);
});
```

## Multi-slot Transclusions

In AngularJS, **transclusion** simply allows you to include content from one place into another template. In basic computer science definition, **transclusion** refers to the inclusion of part or all of an electronic document into one or more other documents by reference.

Multi-slot transclusions was one of the features included in Angular 1.5. How does this work? AngularJS 1.5+ allows us define multiple slots. A good case study is trying to create a generic `card` component. Something like:

``` html  

  <card>
    <card-title>Great Title</card-title>
    <card-body>
      This is the body of the card component.
    </card-body>
  </card>

```

In the definition of the `<card>` component, the `<card-title>` and `<card-body>` elements are the transclusion slots that will be present in the component.

```js
app.component('card', {
  template: [
      '<div style="border: 1px solid black;">'
      '<div ng-transclude="title"></div>',
      '<div ng-transclude="body"></div>',
      '</div>'
  ].join(''),
  transclude: {
    title: 'cardTitle',
    body: '?cardBody'
  },
  controller: function() {
    // Render the component as a card
  }
});
```

**Note:** `?` signifies that the slot is optional.


## Conclusion

As we can see, AngularJS applications can be better with these features listed above. Much work has gone in to the project from the team to make it very similar to the way we write Angular apps using the component archictecture.

In the next and final part of this series, we'll build a sample application with AngularJS 1.5+ that harnesses somes of these features. Stay tuned!


New Features for Developing AngularJS Applications - Part 1: Component-Based Architecture

a28d70be6ae2b9389db9ad815cab510e

Guest Author

Wojciech Kwiatek

Angular is built on the top of RxJS. Learn how you can make use of RxJS in your Angular apps for a clearer and more maintainable codebase.

<div class="alert alert-danger alert-icon">
  <i class="icon-budicon-500"></i>
  <strong>This post is out of date.</strong> Angular 5+ replaced `Http` with `HttpClient` and RxJS 6 introduced many changes to operators. Check out the [Real-World Angular Series](https://auth0.com/blog/real-world-angular-series-part-1/) and [RxJS 6: What's new and what has changed?](https://auth0.com/blog/whats-new-in-rxjs-6/) for more recent content.
</div>

---

**TL;DR** Angular, [previously known as Angular 2](http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html), incorporates RxJS and uses it internally. We can make use of some RxJS goodies and introduce FRP to write more robust code in our apps.

---

If you're new to RxJS, I recommend reading [Understanding Reactive Programming and RxJS](https://auth0.com/blog/understanding-reactive-programming-and-rxjs/) before proceeding.

RxJS is all about streams, operators to modify them, and observables.

## Functional Reactive Programming (FRP)
FRP has recently become a buzzword. To give you a deeper understanding on that topic, there is an awesome post from Andre Stalz -- [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754). What is the key takeaway from the this comprehensive post? Reactive programming is actually programming with asynchronous data streams. But where does the word *functional* come into play? Functional is about how we can modify these streams to create new sets of data. A stream can be used as an input to another stream. We have a bunch of operators in RxJS to do things like this. So, can we do some of FRP with RxJS? The short answer is: yes! And we'll do so with Angular.

## RxJS in Angular
To get started with RxJS in Angular, all we need to do is import the operators we want to use. TRxJS is itself an Angular dependency so it's ready to use out of the box.

### Passing observables to the view
We are about to start with some observables created ad hoc. Let's create an observable from the JavaScript array:

```ts
const items = Observable.of([1, 2, 3])
```

Now, we can use the created observable as a component's property and pass it into the view. Angular introduced a new filter, which will be a perfect fit here. It's called `async`. Its purpose is to unwrap promises and observables. In the case of an observable it'll pass the last value of the observable:


```ts
import { Component } from '@angular/core'
import { Observable } from 'rxjs/Rx'

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of items | async">
        {{ item }}
      </li>
    </ul>
  `
})
export class AppComponent {
  public items = Observable.of([1, 2, 3])
}
```

We should see a list of elements in the browser.

This is our *hello world* example to see how async works and how we can use it.

### Http
Angular relies on RxJS for some of its internal features. One of the most well-known services is *Http*. In Angular 1.x, *Http* was a promise-based service. In Angular 2+, it's based on observables. This means that we can also make use of the `async` pipe here. Let's try to create a real-world example with a service. We want to fetch a list of repos authored by Auth0 on GitHub:

```ts
import { Injectable } from '@angular/core'
import { Http } from '@angular/http'
import { Observable } from 'rxjs/Rx'
import 'rxjs/add/operator/map'

@Injectable()
export class RepoService {
  constructor(private _http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this._http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
  }
}
```

Here, we have the service, which exposes the `getReposForUser` method to make an http call. Note the return type of the method -- it's an `Observable<any>`. Now, we can add it into the module and use it in the component:

```ts
import { RepoService } from './repo.service.js'

@Component({
  selector: 'my-app',
  template: `

  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    console.log(this.repos)
  }
}
```

Something important has just happened. You can take a look into the *Network* tab of your developer tools in the browser. No call was made. Let's add the `for` loop with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let repo of repos | async">
        {{ repo.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
  }
}
```

Now the call for repositories is fired, and we can see that the list of repos has been fetched correctly. Why is that?

## Hot and Cold Observables
The `http.get` observable above is **cold**: that means each subscriber sees the same events from the beginning. It's independent of any other subscriber. It also means that if there's no subscriber, no value is emitted! See this one in action:

```ts
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    this.repos.subscribe()
    this.repos.subscribe()
  }
}
```

Now you'll be able to see three calls. You can now see one more thing -- `async` makes a subscription under the hood.

On the other hand, we have **hot** observables. The difference is, no matter how many subscribers there are, the observable starts just once. And we can make our observable hot, instead of cold, by using the `share` operator:

```ts
// ...
import 'rxjs/add/operator/share'

@Injectable()
export class RepoService {
  constructor(private http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this.http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
      .share()
  }
}
```

Now you should see just one call. If you want to go deeper with the topic, here is a [Hot vs Cold Observables](http://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339) article by Ben Lesh.

## Programming the reactive way in Angular

### Handling events
We've covered how you've probably used RxJS observables for *Http* in Angular, even if you weren't aware of it. However, there are many more things you can do with streams, even if Angular doesn't require you to do so. Now we move on to the *on click* events. The traditional, imperative way of handling click events in Angular is as follows:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="handleButtonClick(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  handleButtonClick(value: number) {
    console.log(value)
  }
}
```

We can create a stream of click events using RxJS `Subject`. *Subject* is both an observer and an observable at the same time. It means it can emit value (using `.next()`), and you can subscribe to it (using `subscribe`).

Here, you can see the same case achieved with functional approach using RxJS:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

It's not much different than the previous one, though. Let's try to add some more logic there. Like making sum of clicks and printing some text instead of just number.

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<string> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
    .map((value: number): string => `Sum of clicks: ${value}`)

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

The key point is that *we define how the clicks stream will behave.* We say that we don't really need clicks but only the sum of them with some prepended text. And this sum will be our stream, not the pure click events. And we subscribe to the stream of summed values. In other words, *the key of functional programming is to make the code declarative, not imperative.*

### Communication between components
Let's briefly address communication between Angular components using an RxJS approach. It's actually about dumb components in the RxJS approach of an Angular world. Last time I described the [change detection of Angular](https://auth0.com/blog/understanding-angular-2-change-detection/) and what we can do with it to fine-tune the app. We'll add the component with `clicks$` stream as the input.

```ts
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'

@Component({
  selector: 'my-score',
  template: 'Summary: {{ score }}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScoreComponent {
  @Input() public score: number
}
```

Note that the component has `ChangeDetectionStrategy.OnPush` turned on, so this means that we assume that the new reference will come as the input. The component accepts a numeric parameter, but there is no reference to streams. We can handle this with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
    <my-score [score]="counter$ | async"></my-score>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
}
```

### Forms
Another place when you can use the power of RxJS is forms. We can use all of the knowledge that we have gained up to this point and see how we can create a reactive login form.

First, let's start with adding `ReactiveFormsModule` from `@angular/forms` to the module. Then we can make use of the reactive forms introduced in Angular. Here's how it can look:

```ts
import { FormBuilder, FormGroup } from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent implements OnInit {
  public loginForm: FormGroup

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })
  }
}
```

We now have a few additional blocks:
- `formControlName` -- added to match names from templates to the appropriate fields in the controller
- `formBuilder.group` -- creates the form
- `[formGroup]` -- connects the template and the controller

We can now use the `valueChanges` observable:

```ts
// ...
    this.loginForm.valueChanges.subscribe(console.log.bind(console))
// ...
```

Now, each changed field will emit an event and will be logged to the console. This offers many possibilities since we can take advantage of any operator that RxJS provides. In this example, let's focus on submitting the form in a reactive way. We can put `(submit)` on the form:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
    
  `
})
// ...
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

// ...
```

We now have a stream of submit events and a stream of values. All that remains is to combine these streams. The resulting stream will emit the current state of the fields when the form is submitted. The desired behavior can be achieved by using the [withLatestFrom](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom) operator of RxJS. The combined stream is as follows:

```ts
// ...
    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
// ...
```

We now have combined streams, and the logic is consolidated. It can be written in a single line. Just to recap, here is the final code for the form component:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })

    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
  }
}
```

<include src="asides/Angular" />

## Conclusion
Angular has a lot more features than meets the eye. RxJS is, in my personal opinion, one of the best of them. It can rocket the app to the next level in term of maintainability and clarity. The future is more declarative, less imperative code.

RxJS can appear intimidating at first, but once you’re familiar with its functionality and operators, it supplies many benefits (such as defining logic at the declaration time). All of this is to say, the code is easier to understand compared to imperative code. RxJS requires a different mode of thinking, but it is very worthwhile to learn and use.

Making use of RxJS in Angular

eHk3ciM

I am the Group Manager, Developer Content at Okta, and a Google Developer Expert in Web Technologies and Angular. I'm passionate about identity, authentication, constant learning, and developer communities. As a developer advocate, engineer, mentor, and international speaker, I love learning from and sharing with other inhabitants of the tech space.

Group Manager, Developer Content

Kim Maida

Learn how to migrate real-world features of an AngularJS 1 application to a fresh Angular 2+ build (Part 3): routing  & API with params, authentication.

Migrating an AngularJS App to Angular - Part 3

Learn how to migrate real-world features of an AngularJS 1 application to a fresh Angular 2+ build (Part 2): routing, API, and filtering.

Migrating an AngularJS App to Angular - Part 2

Learn how to migrate real-world features of an AngularJS 1 application to a fresh Angular 2+ build (Part 1): setup, architecture, and components.

Migrating an AngularJS App to Angular - Part 1

Angular 2 introduces a new change detection system that makes apps much faster and allows developers fine-tune the process.



<div class="alert alert-info alert-icon">
  <i class="icon-budicon-664"></i>
  <strong>Get the "Migrating an Angular 1 App to Angular 2" book for free.</strong> Spread the word and <a href="https://auth0.com/e-books/migrating-to-angular2">download it now!</a>
</div>

---

**TL;DR** Angular 2 introduces a reinvented change detection system that drops digest cycles in favor of one-way flow. Additionally, change detection can now be controlled and fine-tuned by developers to get the most of the framework's performance.

---

## Introduction to Change Detection
Angular 2 final has been released. You've probably heard about some of the changes due to the major version bump: it's has been completely rewritten, TypeScript was selected as the language of choice, reinvented forms, RxJS, a completely new router, etc. In my opinion, the most valuable thing is the redesign of the core change detection system. As you may remember, the digest loop performance of AngularJS (aka Angular 1) was problematic. Now it's not.

### Why Do We Need Change Detection?
Why bother? Generally, the power of modern JavaScript frameworks works something like this: an event changes in the model and forcing a change in the UI. This is change detection, the system that monitors events and acts on them. Something has to trigger this propagation to the view. As mentioned before, in Angular 1 we had digest loops that checked every single reference that was set to be watched for value changes. When Angular found out that everything was stable (no infinite loops, etc.), it propagated changes to the view. Although this was not efficient, it worked for a long time. Also, the problem was tracking asynchronous events. You also probably used `$scope.$apply(...)` if you worked with Angular 1. To understand why it was needed, let's start from the beginning.

### How Javascript works
The JavaScript runtime works on a single threaded engine. You've probably heard about the stack (possibly from other programming languages). Let's take the code below:

```js
console.log('Hey')
setTimeout(() => {
   console.log('Hello from timeout!')
}, 1000);
console.log('Hi')
```

We'll see this in a console as:

```html
Hey
Hi
Hello from timeout!
```

Moreover, nothing is blocked during the one-second wait period. So how would the JS engine do this with a single thread?

#### Synchronous code
Let's go step by step. If you have code like this:

```js
console.log('1')
console.log('2')
console.log('3')
```

every instruction will be put onto the stack and will run one by one. There's no possibility of seeing 3 before 2 or 1. So we'll end up with the following:

```
1
2
3
```

Every time. Everywhere.

#### Asynchronous code
But let's go back to the timeout:

```js
console.log('1')
setTimeout(() => {
  console.log('2')
}, 0)
console.log('3')
```

What happens now? On the stack, we'll have:

```js
console.log
setTimeout
console.log
```

The trick here is how `setTimeout` works and what it really is. Yes, it will be invoked as a normal synchronous action, but all the JS engine does is give the wheel to something else. There's a bunch of browser APIs that aren't part of this single threaded process. And there's a thing called event loop. This event loop goes one by one through the stack instructions, and if it's empty, it then goes to the *callback queue*. The reference to the `setTimeout` code is there. Once callback is done, the code will go to the stack.

What does it mean? Two things:

- Everything that's inside an asynchronous callback (as in `setTimeout`) will be run *after* any other synchronous code; this is why hacks like `setTimeout(() => {}, 0)` work.
- We have no way of ensuring 1000ms is *exactly* 1000ms (but we know it's at least 1000ms).

For complete understanding of event loop and what's going on in the browser, I encourage you to take a look at this [Philip Roberts talk](https://www.youtube.com/watch?v=8aGhZQkoFbQ).

### How Zones Relate to Change Detection
How does all of this relate to Angular and change detection? Tracking objects with synchronous code is fairly easy. However, when it comes to asynchronous code, things get complicated. That's because Angular 1 forced us to use `$scope.$apply(...)` each time an asynchronous action was made or use the Angular way of doing asynchronous actions: `$timeout`, `$http`, and so on. The thing is, if something was made outside of the controller (even a perfectly valid change to the reference object), Angular didn't know about it, so it didn't fire any event to reflect changes to the UI.

On the other hand, we now have Angular 2. It dropped all of the stuff connected to digest cycles and now uses *Zones*. Zones are able to track the context of asynchronous actions by monkey-patching them (i.e., overwriting them with its own code), which then invokes the desired action but with some additional information attached. This additional information is the context. This way, Angular will know which component the asynchronous action was invoked from.

The big win of this approach is that we can use the browser APIs natively, and Angular will know what's going on without forcing us to manually tell it a change has occured. The drawback is that Zones overwrite asynchronous actions, which is kind of a hacky solution and may affect other (existing) code if we're not relying only on Angular in the app.

But exactly how is Angular notified of the change? Angular uses its own version of the Zone called `NgZone`, which relays finished asynchronous actions with the `onTurnDone` event. Angular change detection waits for the event to perform change detection and checks what needs to be updated in the UI. That's the core behavior.

## Make Use of Change Detection In Your App
Everything described above is going on under the hood. Equally important is how we can make use of it. Unlike Angular 1, Angular 2 gives us the possibility of controlling the change detection. However, the Angular team claims that even without any performance tweaking, it's 3 to 10 times faster than the previous one, and for most apps this will be fast enough. But it can be much faster. Let's look at an example.

<iframe src="https://embed.plnkr.co/HR7ssEuPaWwlVKJPzZtJ/" width="100%" height="800"></iframe>

Here's a very typical problem: rendering a list. There's one component containing a list of other components that have some input data. Generally, we have a container with data and a dumb component just for rendering a single list item. Nothing fancy here, just the getter and `ngOnChange`. What's being done here? `ngOnChange` reacts on every input change, and the getter adds additional logging each time `rowData` are fetched. Note that we're not using it anywhere outside of the template.

This means the getter is fired by Angular itself. And guess what happens? We have a single change on the input, but there are hundreds of getter logs over there.

Why is that?

Angular is notified about the change from some component and has to check how that affects the current state, so it checks all the values for the change. Actually, the team says it can make thousands of such checks in milliseconds, but it's still a waste of time and can even harm our big data-driven application.

### Immutability
The cool thing about the new change detection system is that now we can tune it. Let's take a break from Angular and consider following code:

```js
const users = [{
  name: 'John',
  age: 27
}, {
  name: 'Anna',
  age: 23
}]

users.push({
  name: 'Max',
  age: 30
})
```

The most important thing here is the `const` declaration. If `users` is constant, how can we modify it? Well, that's how JavaScript works! The `const` prevents us from modifying a reference to the particular object in JavaScript. What the `push` method of `Array` is really doing is appending another object to the existing array (with no reference change). Let's go on to another very typical example:

```js
const user = {
  name: 'Max',
  age: 30
}

user.age = 31
```

The same thing applies. Although we can't modify the whole object to make it be another one (reference change), we still can change part of the object!

This is why the checks we discussed before aren't so good. If you want to check whether the object is the same as it was before, you have to *deeply check all of its properties*. It's not efficient.

How can we force the object to be a new one with the changed property? It's actually quite easy with the new [ECMAScript Object spread properties proposal](https://github.com/sebmarkbage/ecmascript-rest-spread):

```js
const user = {
  name: 'Max',
  age: 30
}

const modifiedUser = { ...user, age: 31 }
```

### Change Detection Strategies
The good part about all this is that now we can say to Angular that *we know what we're doing*. To modify the change detection behavior, we can use the `ChangeDetectionStrategy` API, which has one very interesting value: `OnPush`. It makes a component with this strategy applied look at the values inside only when the reference on the input changes or some event has been fired from the component.

Let's add the `OnPush` strategy to our previous example:

```ts
import {ChangeDetectionStrategy, Component, Input} from '@angular/core';

@Component({
  selector: 'row',
  template: `
    <pre>{{ rowData }}</pre>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowComponent {
  ...
}
```

You can try it on Plunker and see the difference.

<iframe src="https://embed.plnkr.co/d9b07qginx7z9hGYyeME/" width="100%" height="800"></iframe>

 The huge improvement is that there's now only one getter call for one change! We didn't need anything more as our input data are strings that are being changed, so that reference on input changes. The reference for the rest of the components hasn't changed, so Angular doesn't even look at it.

### App Structure
How can we build a highly performing app? With Angular 2, it's actually quite easy. As in all of the component frameworks nowadays, you should have dumb and smart components. The dumb components, which are meant only for displaying data from the input or handling user events, are ideal volunteers for having the `OnPush` strategy. Smart components will sometimes require that you watch for more things than the input and the events, so be careful with setting the `OnPush` strategy there.

<include src="asides/Angular" />

## Conclusions

### Performance Advantages
One of the big advantages of using stricter change detection is the performance gains. Angular is meant to be used for large applications that can handle lots of dynamic data. The Angular team has given the developer the tools necessary to fine-tune and improve performance from the get-go. By default, every change should be reflected on the UI, as Angular takes care of that, but the price is lower performance. Immutable or reactive code is harder to write but easier to maintain and reason out. The choice is yours.

### Eventually Angular can be tweaked
The good thing is that we have a choice with Angular 2. In Angular 1, it was impossible to get away from the digest cycle. At a certain point, it was advantageous to use React or another library to render UI instead of Angular templates, as it was too slow when handling a large amount of dynamic data. Now, you have a complete solution with much more control over the internal behavior. This, in combination with the other changes made to Angular 2, makes the learning curve of the framework steeper but worth it.


Understanding Angular 2 change detection

ryan-chenkie

Ryan is a full-stack JavaScript developer and trainer who mainly works with React, Angular, Node, and GraphQL. He runs a consultancy where he builds apps for companies and also helps established dev teams with their modern JavaScript challenges.<br /><br />Ryan is a Google Developer Expert, the host of the Entrepreneurial Coder Podcast, the author of Securing Angular Applications, and an all-around fanatic about application security.

Developer

Ryan Chenkie

Learn how to add JWT authentication to your AngularJS 1.x app



> Adding authentication to any single page app comes with a set of challenges, and this includes apps built with AngularJS. Auth0 makes the process a lot easier with some open source libraries for saving and sending JSON Web Tokens, as well as a full authentication service that removes the need to write authentication logic yourself. If you want to get all the details of how to add auth to your AngularJS 1.x app, this screencast series is for you. If you'd like, you can go straight to the [code](https://github.com/auth0-blog/angular-auth) or checkout the [AngularJS + Auth0 docs](https://auth0.com/docs/quickstart/spa/angularjs/no-api).

In the last part of our AngularJS authentication series, we'll take a closer look at some of the features that Auth0 provides. Specifically, we'll see how we can easily add social login with Twitter and enable multifactor authentication with Google Authenticator. These features are available with just some simple configuration, which saves us a lot of time and effort.

* **<a class="screencast-anchor" href="#enabling-social-login" target="_self">Enabling Social Login</a>**
* **<a class="screencast-anchor" href="#enabling-multifactor-authentication" target="_self">Enabling Multifactor Authentication</a>**
* **<a class="screencast-anchor" href="#wrapping-up" target="_self">Wrapping Up</a>**

<h2 id="enabling-social-login">Enabling Social Login</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/zzcX-kbvHHQ" frameborder="0" allowfullscreen></iframe>

### **Transcript**

Why don't we go through the steps to see how to enable another social provider in our application. If we remember, when we log in, we've got this option to sign in with Google, and that came by default for us because that's the only social provider that's enabled by default when we sign up for Auth0. But let's say that we want users to also be able to sign in with their Twitter account. To do this, let's go over to our Auth0 dashboard, and that's at `manage.auth0.com`. And then, over here in the connections area, we can go to "Social" and we can see a list of all of the social providers that we can use for our Auth0 account.

And, once again, we're able to use two of these social providers at no cost at all, with the free plan. So let's say we want to use Twitter, well, we can just come over here and enable it like this. And what we'll see right away is that we've got to enable some settings here for our Twitter connection, and we need a consumer key and a consumer secret. So why don't we go through the steps to get a consumer key. And right at the start here, what we get is a link to go the Twitter application management area where we can register a new application.

So let's create a new app, and this is where we'll put in some of the details for our application. The name, for this case, can be "AngularJS Auth", and the description will be "AngularJS authentication sample". And the website, I'll just use my own in this case. And the callback URL is going to come from Auth0. So this is going to be specific to our Auth0 account, and we can actually just grab it from the documentation right down here in step number three. So let's grab that here, and we'll copy it over to our callback URL input right there.

And then we'll come down below, and let's just agree to the terms and we'll go create our application. So here we can see the application has been created, and we're able to get our keys and access tokens from this tab right here. And just like always, I'm going to be regenerating my keys right after I'm finished recording, so no sense in trying to use them. But anyhow, this is where we get our consumer API key and our consumer secret. So let's head back over here to the documentation and just check for any additional steps that we need to take.

So what we can do next is copy over our consumer key, so let's grab this. We'll just copy it as such and come back over to our social connections, and let's paste that in here. And, likewise, let's grab our consumer secret. And now let's hit "save". And it says, "Connection settings saved." What we can do is test it out. So we've saved that, let's get out of here, and let's give it a try. We'll flip this to the on position and we can try it if we hit "continue". Let's give it a try down here. So we get, "Authorize AngularJS Auth to use your account," we'll say, "Sign in." And this where we can sign in with our Twitter credentials. And we get the message, it works. All right, perfect.

We can close down all of these tabs now, and let's head back over to our application and let's try signing in with our Twitter ID. So let's try logging in again. Here we can see that my Twitter account is still remembered because I've just tested it out in the Auth0 dashboard. So if I click there, what we'll get is a redirection back to the application after the authentication goes through. And just like we were authenticated with username and password before, we see that we've got a JSON Web Token in local storage. We've got our ID token and our profile, so we're good to go to access our application. So there's an example of how we can enable a social connection in Auth0, and then make use of it in our application. In the next lecture, we'll see how to use multi-factor authentication so that we can make our app even more secure.
<hr>

<h2 id="enabling-multifactor-authentication">Enabling Multifactor Authentication</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/1f169IVVvgk" frameborder="0" allowfullscreen></iframe>

### **Transcript**

Depending on how secure we want our app to be, we might benefit from using something like multifactor authentication. Perhaps you've seen this before in some other application you use. It's where you sign in with your credentials, say your user name and your password, and then you get sent a verification number to your phone which you then need to enter into the application to verify your identity. This is something that can be a little bit tricky to code from scratch, but thankfully Auth0 makes it really simple.

Let's go back over to our dashboard, `manage.auth0.com`. If we come over here to the "Multifactor Auth" link we can enable multifactor auth, then we've got our choice of two different providers. We can use Google Authenticator or Duo. Let's just try Google Authenticator in this case. What we're going to need to do is actually download Google Authenticator on our phones. If you're building this into your own application, you would need to instruct your users to get Google Authenticator so that they can go through the multifactor auth steps.

What we see down here is a code snippet that we need to modify so that we can tell Auth0 to use multifactor auth in our Angular application. To do that, we actually need to provide the client ID for any application that we want to enable multifactor auth on right here within this array. Let's do that. Let's go over to our applications link, and let's find the client ID for the app. Let's grab this client ID here. We'll come back over to multifactor auth. Let's just place that right here within this array. We'll get rid of everything there. We will paste in our client ID.

Now let's give it a shot in our application. Back over here in our app let's log out. Then, let's log in again. We'll go to log in. We'll choose our Twitter account. What we'll see here is that we need to enter our two step verification code. The way that this works with Google Authenticator is we go into our Google Authenticator app. I'm just opening the application on my phone right now. We actually need to scan this QR code here. If you're in your Google Authenticator app it's just the plus sign up at the top right. We can scan barcode. Then, let's place it up to the screen. There we go. I've got my code and I'm going to enter it now. If the code checks out, we should be able to get in. There we go. We've got our profile and our token saved again.

Applying multifactor auth to our application is very simple with Auth0. I'm sure you can see the benefits of it. It's a really big step in securing our application even more.

<include src="TweetQuote" quoteText="Applying multifactor auth to our application is very simple with Auth0."/>

<hr>

<h2 id="wrapping-up">Wrapping Up</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/Dcs5WdtJHno" frameborder="0" allowfullscreen></iframe>

<script>
$(window).load(function() {
  $('.screencast-anchor').attr('target', '_self');
});
</script>


AngularJS Authentication Screencast Series - Part 4

AngularJS Authentication Screencast Series - Part 3

AngularJS Authentication Screencast Series - Part 2



> Adding authentication to any single page app comes with a set of challenges, and this includes apps built with AngularJS. Auth0 makes the process a lot easier with some open source libraries for saving and sending JSON Web Tokens, as well as a full authentication service that removes the need to write authentication logic yourself. If you want to get all the details of how to add auth to your AngularJS 1.x app, this screencast series is for you. If you'd like, you can go straight to the [code](https://github.com/auth0-blog/angular-auth) or checkout the [AngularJS + Auth0 docs](https://auth0.com/docs/quickstart/spa/angularjs/no-api).

In the first part of the screencast series, we'll take a look at how authentication works for round-trip apps, and the challenges that exist when it comes to using these traditional methods in single page apps. We'll then learn about [JSON Web Tokens](https://jwt.io/introduction), which provide a better way to do [authentication in AngularJS apps](https://auth0.com/learn/angularjs-authentication/).

* **<a class="screencast-anchor" href="#what-well-build" target="_self">What We'll Build</a>**
* **<a class="screencast-anchor" href="#traditional-authentication" target="_self">Traditional Authentication</a>**
* **<a class="screencast-anchor" href="#the-tricky-parts" target="_self">The Tricky Parts of AngularJS Auth</a>**
* **<a class="screencast-anchor" href="#json-web-tokens" target="_self">JSON Web Tokens</a>**

<h2 id="what-well-build">What We'll Build</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/RuubsWkjwrM" frameborder="0" allowfullscreen></iframe>

### **Transcript**

So this course is going to cover all about how to authenticate our angular apps with JSON Web Tokens and we're going to use Auth0 to do this.

So this is a service that provides a really nice login box that's ready to go. And really all we need to do is provide some functions to our application to tie into the service. And once we've done that, we'll be able to get our users' profile and their token, and save those in local storage. And then we can use the token to make requests for secured resources on our server.

So this is what the application will look like in the end. Now let's dive right in and get started.

<hr>

<h2 id="traditional-authentication">Traditional Authentication</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/V_9XLxOGXp8" frameborder="0" allowfullscreen></iframe>

### **Transcript**

To lay the ground work for this course, let's take a look at how authentication is done in what I'll call a traditional web app. A traditional web app has a lot of definitions. I'll think of it as an application where the user has to refresh the page to get some new data or to send data to the server. If the user comes to your website or your web app and they want to submit some data to be saved in the database, when they do that to get a response back, they actually have to go through a full page refresh. Likewise, when they want to get some new data from the server, they actually have to refresh the page to get that data. 

We're probably all quite familiar with this. This is kind of how the web was built. You have to send a request and refresh the page to get new stuff. As you probably know, since you're working with Angular, it's a framework for building what we call single page apps. The single page app, of course, is one where you don't have to go through that full page refresh to submit data or to get new data. Single page apps actually send and receive data through XHR requests which happen behind the scenes. What we get with that ultimately is the feel of a native desktop application which makes for a much nicer user experience. That's probably why you're building applications with Angular. You want to have that snappy fluid desktop-like feel. 

Back to authentication. How does it actually happen in a traditional web app? Typically it looks like this. The user will come to your application. They will log in with their credentials, their user name and their password. Those credentials get submitted and sent to the server where they're checked against a database. If everything matches up, a session gets created on the backend (on the server) for that user. The session is this piece of data that the server can use to know that the user is authenticated. Now when the user needs to navigate to another spot in the application, let's say they go to their profile page next (and that happens through a round trip request), the server is able to know that the user is authenticated. 

This raises the question: how does the server actually know who it is that's making these requests for data. It would seem that the server needs some way to actually be able to verify that the user who has sent the request is the user that's actually authenticated. 

This is where cookies come in. You might be familiar with cookies. These are the small pieces of data that get saved in the user's browser. Cookies actually get automatically sent to the server on every request to it. Since cookies hold pieces of information, what we can do is have that cookie store an identifier for the user. This is typically what happens. When the user's authentication is valid, the response that comes back to them contains a cookie that gets saved. This cookie has an identifier for that user. Then, the cookie automatically gets sent to the server whenever the user navigates to another page. It's the cookie's information that gets verified against the session that tells the server whether or not that user is who they say they are. The server is then able to know that the user should still be authenticated when that session exists on it. Because this happens automatically, the user doesn't need to send their credentials every time and their credentials don't need to be checked against the database every time they make a request, or at least not until the cookie has expired. 

This method of authentication works pretty well for traditional web apps (for those that require the full page refresh), but there are some limitations to using cookies and sessions together for modern applications like the ones that we build with AngularJS. We'll talk about what those limitations are and how to get around them in the next lecture.

<hr>

<h2 id="the-tricky-parts">The Tricky Parts of AngularJS Auth</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/AglJkyH1dt0" frameborder="0" allowfullscreen></iframe>

### **Transcript**

So if you've worked with Angular for any amount of time, you're probably aware that one of the best ways to work with a backend is through a data API, and in particular, a data API that accepts and returns JSON data. Now, this obviously isn't the only way that we can work with data in our Angular application, but it's ultimately one of the easiest and most flexible ways to go about it.

So when we do this, what we're effectively doing is we're building two different applications, two distinct and separate apps. And one of them is for the client side. That's the Angular application. And it's really just concerned with the user's browser. And then we have our server side application, which is built with something like Node.js or Ruby on Rails or PHP or whatever server side language or framework we like.

And then we connect these two applications through a data API. And that communication happens via XHR requests from the client to the server. So when we build our data API, chances are that we're going to want to build a RESTful API. And one of the core tenets of REST is that things should be stateless. And so what this means is that when we construct a request that goes to our API, that request should always return the same resource.

And with traditional roundtrip authentication where we set up sessions to check if the user is authenticated, well that sets up some state on our server, which can effectively change the result that we get back for a given request. And so this breaks that core tenet or REST being stateless. And then there's some issues related to how modern application ecosystems work. And so things are changing with the way that we build and distribute applications these days, and this has some implications for authentication.

So for instance, we can't easily share a user's session across multiple servers. What we're seeing more and more these days is that an application is not going to use just a single server for all of its resources and all of the things it needs to do, but rather it's going to rely on multiple different servers. So with traditional authentication, everything works fine if we have just a single server, but as soon as we get more than one involved, then things get tricky.

There are ways to share sessions across different servers, but it's not really easily done. Another issue is that cookies don't flow downstream. So another pattern that we're starting to see in modern application development is that our server--our application server--might rely on a downstream server or multiple downstream servers to get its work done. Now, the problem with this is that since we need cookies to properly authenticate in a traditional authentication setup, well, cookies can't flow to those downstream servers so we can't really go beyond our single application server.

And then we ultimately want to be able to share our API across different applications. We want to be able to write an application for the web and then maybe also a mobile application. And then, who knows, maybe even a desktop app. But we don't want to have to rely on different data resources for each of those applications. Instead, what we want to be able to do is use that same API across our different apps. And with traditional authentication, this is just pretty tricky when we have to deal with cookies.

So those are some of the issues that are more related to the server side, but what about the front end? What about Angular in particular? Well, like we talked about, in a good Angular setup, our Angular app doesn't have any kind of stateful connection to a backend. Rather, it's going to fulfill its data needs, whatever those needs may be, for sending data or receiving data, through XHR requests to the API.

And so because of this, because of this statelessness, we need to take some things into consideration. So firstly, we need to be able to limit access to certain routes in our Angular app. So certain parts of the application should only be accessible to users who are authenticated. This is just sensible application design. So even though we don't have any kind of stateful authentication going on, we still need to make it possible for Angular to know that a user is logged in or not.

We also need to be able to show or hide certain parts of the user interface depending on the user's authentication state. So for example, we might have a spot in our navbar where the user's name and profile photo show up. Well, we need to be able to either hide or show that depending on whether or not the user is logged in. So again, Angular isn't connected in a stateful way to a backend. 

And given this, how can Angular know whether or not the user is authenticated if there's no kind of session or stateful connection made? And even more fundamentally, how are we able to do any authentication at all if we don't involve sessions and cookies and state? Well, it turns out there's a really nice way to do this with a newer standard called the JSON Web Token. And we'll talk about the JSON Web Token and what it's all about in the next lecture.

<hr>

<h2 id="json-web-tokens">JSON Web Tokens</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/LLWX1Cd8vJ0" frameborder="0" allowfullscreen></iframe>

### **Transcript**

So what exactly is a JSON Web Token? Well it's an open standard under RFC that describes a way to transmit what are known as claims between two parties in a secure way. Now that's a mouthful, so let's break it down. 

Essentially, JWTs communicate JSON objects, and one of the objects in them is a set of claims. So what exactly is a claim? Well put simply, it's a piece of information that is asserted about a subject. And for the case of authentication, the subject is the user. 

So what exactly does a JWT look like? Well here's an example. And as you can see here, this doesn't really mean a whole lot to us as humans, and that's because JWTs are encoded. And in fact, there are three distinct parts that are each encoded as you might have guessed here by this dot separator. 

All right, so why don't we take a look at what a decoded JWT looks like so that we can see what's going on with these three parts. Okay so I'm over here at jwt.io, and this is a website made by Auth0 that gives us some really nice resources and information about JSON Web Tokens and also a really nice debugging tool so that we can actually inspect our tokens. 

So over here on the left, we can drop in and encode a JWT. And then over here on the right, we get the decoded values from it. And this actually reveals to us the three different parts on the token. We've got a header, a payload, and a signature. So let's run through each of these three parts. 

The header contains information about the algorithm and the token type. And so we can see here, our algorithm that we're going to be using is HS256 and the type is JWT for "JSON Web Token". 

Now the payload is where we actually store the claims that we were talking about. So those claims--being assertions about a subject--are going to be stored in this object within the payload. And there are certain claims that are registered with the JWT specification, and these are claims like `sub` for subject, which in this case is our username of John Doe, and `iat` for issued at, that's the time that the token was issued at, and also `exp` for expiry and this gives us an expiry time for the token so that we can limit how long it can be used for. 

And then we've also got claims that we can define our self. So we can provide claims like `name`, and `admin`, and those can be any kind of arbitrary keys and values that we like. Now we aren't forced to use any of the registered claims, and we can provide any kind of arbitrary claims that we want within the payload as well. So this gets really useful for transferring information. 

Now the header and the payload obviously look different over here in the encoded JWT than they do over in the decoded JWT and that's because each of these is Base64 URL encoded. So the objects are encoded and then they're tacked together with this dot separator. 

We also see down here in the signature what looks to be encoding but it's actually a bit different. So what's happening in the signature is that we're taking the encoded header, plus the encoded payload, plus a secret--so this will be a secret that lives on our server--and then we're hashing that using the HS256 algorithm. And so what this does is it effectively secures or digitally signs our token because as long as we have an unguessable secret key, we can be sure that the information within the JSON Web Token doesn't get tampered with.

So obviously the key that we see here which is just the word "secret" isn't all that secure. In reality, we would want a long and unguessable secret key. 

Okay so that's what JSON Web Tokens look like but how are they used for authentication in Angular apps? Well essentially what we need to make that possible is a way for the user to send their credentials to a server and then receive a JSON Web Token back if everything checks out. And then on every subsequent request that gets made to the server for secured resources, the user sends the JSON Web Token back. 

And then back at the server it can be checked against that secret key and be verified. And so how does the user send the JWT back to the server once they have it? Well what we do is we attach it as an `Authorization` header using the `Bearer` scheme. So HTTP requests just need to attach an extra header, which is the JWT and that gives us a way to authenticate and verify our user's identity. 

So that covers what JSON Web Tokens are and how they work. Now that we have that understanding, let's start implementing it in an angular application.

<script>
$(window).load(function() {
  $('.screencast-anchor').attr('target', '_self');
});
</script>


AngularJS Authentication Screencast Series - Part 1

Ionic 2 Beta has been released. Learn how to add JWT authentication to your Ionic 2 app and make secure calls to an API.

Ionic 2 Authentication: How to Secure Your Mobile App with JWT

Learn all about the new Angular 2 router and how to set it up in your app.

Angular 2 Series - Part 4: Component Router In-Depth

f7144da08aeb41a93256f8ae88f507d2?s=64 avatar

f7144da08aeb41a93256f8ae88f507d2?s=64

Ajden Towfeek

This is a guest post by Ajden Towfeek. Ajden is a full-stack developer with focus on Microsoft technologies with 10+ years of experience in commercial software development.



_This is a guest post by Ajden Towfeek. Ajden has worked on everything from embedded devices to large scale enterprise systems during his 10+ years in commercial software development. Since 2007, Ajden has focused on Microsoft technologies and more lately on web technologies. Ajden is also a speaker at conferences and has a passion for teaching. He is a frequent blogger on [http://towfeek.se](http://www.towfeek.se), and you can follow him on twitter [@ajtowf](https://twitter.com/ajtowf). For screencasts on the latest web technology, make sure to check out his [youtube channel](https://www.youtube.com/c/AjdenTowfeek)._

-------------

# Pluralsight Course

I've created a [pluralsight course](http://www.pluralsight.com/courses/authenticating-angular-spa-aspnet-webapi-auth0) on how to implement Auth0 in an AngularJS application going against an ASP.NET WebAPI backend. Using Auth0 is a pluralsight first and so far it's performing well with good rating. Make sure to [check it out](http://www.pluralsight.com/courses/authenticating-angular-spa-aspnet-webapi-auth0) if you have a pluralsight subscription, otherwise I'm hoping the promotional video below can make you get one.  

-------------

<iframe width="640" height="480" src="https://www.youtube.com/embed/gPkhM1GwVYA?rel=0&vq=hd720" frameborder="0" allowfullscreen></iframe>

# Table of contents

The course is split into the following three modules:

* **An Introduction**: Course introduction with brief overview of Auth0, where we also register for a free developer account.
* **Building the Back-end API**: In this module we create the back-end and secure it with Auth0, we also test our API by making secure calls with postman.
* **Building the Front-end SPA**: In this module we create the front-end using AngularJS to communicate securely with our back-end. We use Auth0Lock to get a professional looking login dialog that displays well on any resolution and device.

# Why do a course on Auth0?

First of all, I'm new to using Auth0 as a service, I stumbled upon it when trying to find a quick to implement solution for a client I was working with a couple of months ago. I was amazed by how fast we were up and running and could move on to writing the business logic. Unfortunately, that particular client didn't end up using Auth0 in production for various reasons but I'm currently discussing the possibility of using Auth0 for user management with a new client.    

Aside from consulting I also teach and speak at conferences and to strengthen my brand I decided to try out for becoming a pluralsight author. The [audition](https://youtu.be/QjAfgfTZfho) went well, but angular 2 was off the table since it's still in alpha. When browsing the pluralsight library I noticed there was nothing on Auth0 there, so why not be the first one to contribute with an Auth0 course?

I've also added an Auth0 session to my ASP.NET classroom training after going through ASP.NET Identity to show how identity can be implemented even simpler, and the student reactions to how simple it is to use has been really positive.   

# Working with the Pluralsight team

From the initial contact with the audition to working close with my editor on the course, pluralsight was super professional. I really enjoyed the experience, and I definitely encourage other developers to go through the experience of creating a course. Even if I have some experience from creating [screencasts on youtube](https://www.youtube.com/c/AjdenTowfeek) this was something entirely different.

# Conclusion

After 30 hours of recording and editing the course was finished and it's now live, make sure to [check it out](http://www.pluralsight.com/courses/authenticating-angular-spa-aspnet-webapi-auth0). Auth0 is an awesome service and I'll definitely recommend it to future clients and keep teaching it in my class room training.

<include src="TweetQuote" quoteText="Auth0 is an awesome service and I'll definitely recommend it to future clients."/>


Pluralsight Course on using Auth0 with AngularJS and ASP.NET WebAPI

Learn the differences between $http in Angular 1.x and Http in Angular 2. Find out how to use the RxJS Observables that Http returns.



---
**TL;DR:** Making **HTTP requests in Angular 2 apps** looks somewhat different than what we're used to from Angular 1.x, a key difference being that Angular 2's **Http** returns **observables**. In this tutorial, we cover how to use Http to make requests and how to handle the responses. We'll also see how we can do basic authentication for an Angular 2 app. Check out [the repo](https://github.com/auth0/angular2-http) for the tutorial to see the code.

This is Part 3 in our Angular 2 series. Be sure to check out [Part 1 on Pipes](https://auth0.com/blog/2015/09/03/angular2-series-working-with-pipes/) and [Part 2 on Models](https://auth0.com/blog/2015/09/17/angular-2-series-part-2-domain-models-and-dependency-injection/).

---

It's fair to say that most of Angular 2 looks and feels completely different than Angular 1.x, and the **Http** API is no exception. The **$http** service that Angular 1.x provides works very nicely for most use cases, and is fairly intuitive to use. Angular 2's Http requires that we learn some new concepts, including how to work with **observables**.

In this tutorial, we'll look at some of the key differences in the way that Angular 1.x and 2 implement **HTTP requests**, and we'll also see how to make requests and handle responses. Incidentally, the sample we use to test out **Http** will also let us see the basics of adding authentication to an Angular 2 app.

It's important to note that the Http implementation for Angular 2 is still a [work in progress](https://github.com/angular/angular/issues/2793), and a lot of things are still in flux or aren't complete yet.

## Differences between Angular 1.x $http and Angular 2 Http

**Angular 2's Http implementation** again provides a fairly straightforward way of handling requests, but there are some key differences. For starters, **HTTP calls in Angular 2** by default return observables through [RxJS](https://github.com/Reactive-Extensions/RxJS), whereas $http in Angular 1.x returns promises. Using observable streams gives us the benefit of greater flexibility when it comes to handling the responses coming from HTTP requests. For example, we have the potential of tapping into useful RxJS operators like `retry` so that a failed HTTP request is automatically re-sent, which is useful for cases where users have poor or intermittent network communication. We'll see later in the article how we can implement RxJS operators in our Http observables.

In Angular 2, Http is accessed as an injectable class from `angular2/http` and, just like other classes, we `import` it when we want to use it in our components. Angular 2 also comes with a set of injectable providers for Http, which are imported via `HTTP_PROVIDERS`. With these we get providers such as `RequestOptions` and `ResponseOptions`, which allow us to modify requests and responses by extending the base class for each. In Angular 1.x, we would do this by providing a `transformRequest` or `transformResponse` function to our `$http` options.

In Angular 1.x we can transform requests globally in the application's `config`.

```js
.config(function($httpProvider) {
  $httpProvider.defaults.transformRequest = function(data) {
    return JSON.stringify({name: "Ryan"});
  }
});
```

Whereas in Angular 2, we would extend the `BaseRequestOptions`.

```js
class MyOptions extends BaseRequestOptions {
  body: string = JSON.stringify({name: "Ryan"});
}

bootstrap(App, [HTTP_PROVIDERS, provide(RequestOptions, {useClass:MyOptions})]);
```

## Http in Action

Let's take a look at how we can perform some basic requests with Http. We'll see how to work with `POST` and `GET` requests by using our trusty [NodeJS Chuck Norris quote backend](https://github.com/auth0/nodejs-jwt-authentication-sample), which will require us to retrieve and store a JWT, and thereby implement basic authentication.

## Getting Started

As we have in our other Angular 2 articles, we'll use [Pawel Kozlowski's](https://twitter.com/pkozlowski_os) [ng2-play](https://github.com/pkozlowski-opensource/ng2-play/) repo for this tutorial. To get started, clone the repo and run `npm install`, then `gulp play`.

We also need to get our random quote server running. With the Angular 2 seed project installed, let's clone and install the quote server in the root of our project.

We also need to set up our `app` component by importing what we need and providing a template.

```js
// app.ts

import {Component, View} from 'angular2/angular2';
import {Http, Headers} from 'angular2/http';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
  selector: 'app'
})

@View({
  directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES ],  
  template: `
  <header>
    <h1 class="title">Angular 2 HTTP</h1>
  </header>

  <section>
    <h2>Login</h2>
    <form #f="form" (ng-submit)="authenticate(f.value)">
      <div ng-control-group="credentials">
          <label for="username">Username</label>
          <input
            type="text"
            id="username"
            ng-control="username"
            required>

          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            ng-control="password"
            required>
      </div>

      <button>Login!</button>

    </form>

  </section>

  <section>
    <h2>Random Quote</h2>
    <hr>
      <h3>{{ "{{randomQuote" }}}}</h3>
    <button (click)="getRandomQuote()">Get Random Quote!</button>
  <section>

  <section>
    <h2>Secret Quote</h2>
    <hr>
    <h3>{{ "{{secretQuote" }}}}</h3>
    <button (click)="getSecretQuote()">Get Secret Quote!</button>
  <section>
  `
})

export class App {

  constructor(public http: Http) {

  }

}

bootstrap(App, [HTTP_BINDINGS])
```

As you can see, we've imported some familiar pieces like `Component` and `View`, but we are also pulling in `Http` and `Headers`. We'll see it later on, but we can modify the headers we send in our requests with the `Headers` class.

We're making use of a form for the user to eventually provide their credentials. The form calls an `authenticate` method on submit.

In the `App` class, we're passing `Http` to the constructor so that we can use it in our class methods.

## Simple GET Request

Let's start with a simple `GET` request to the `api/random-quote` route which doesn't require authentication.

```js
getRandomQuote() {
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

logError(err) {
  console.error('There was an error: ' + err);
}
```

The `getRandomQuote` method starts off looking pretty familiar--we do an `http.get` request by passing in a URL as an argument. Remembering `$http` from Angular 1.x, this is where we would tap into the promise that gets returned by using `.then`, but as you can see here, we're doing something pretty different.

As was mentioned earlier, **HTTP calls in Angular 2** return observables, so we need to use RxJS methods to operate on them. The first thing we do is map the values that are returned as text, since our call to the `api/random-quote` endpoint returns text. If we were expecting a JSON response, we would call `res.json()` instead. After this, we need to **subscribe** to it so that we can **observe** values that are returned.

<include src="TweetQuote" quoteText="HTTP calls in Angular 2 return observables, so we need to use RxJS methods to operate on them."/>

An observable subscription takes three functions to handle what happens as the stream is observed. The first function is the **next** case, or what happens when the HTTP call is successful. If the call is successful, we're saying that the data returned should be put on a property `randomQuote` so it can be displayed in the view. The second function is the **error** case, and in our example we are logging any error messages to the console by calling our `logError` method. Finally, the third function defines what happens once the call is **complete**, and here we are simply logging out the things are finished.

Let's test that out to make sure it works.

![angular2 http $http example](https://images.ctfassets.net/23aumh6u8s0i/3OP3Z3TjFP2iMFkiVN3XAD/b75a0e2b9229dc18e43fee1ff97be2fc/angular2-http-1)

## POST Request with Modified Content Type

Our `authenticate` method will need to make a `POST` request to the back end and specify the content type so that we can send our credentials. For this, we'll use `Headers`.

```js
// app.ts

...

class CredentialsModel {
  username: string;
  password: string;
}

...

authenticate(data) {
  var username = data.credentials.username;
  var password = data.credentials.password;

  var creds = "username=" + username + "&password=" + password;

  var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  this.http.post('http://localhost:3001/sessions/create', creds, {
    headers: headers
    })
    .map(res => res.json())
    .subscribe(
      data => this.saveJwt(data.id_token),
      err => this.logError(err),
      () => console.log('Authentication Complete')
    );
}

saveJwt(jwt) {
  if(jwt) {
    localStorage.setItem('id_token', jwt)
  }
}

...
```

The `authenticate` method accepts `data` that is passed down from the view when the form is submitted. We're grabbing the username and password from it and making a `creds` string in the form that the server expects.

We need to say that the content type should be `application/x-www-form-urlencoded` and this can be done by appending a header onto our `headers` instance. Then we simply pass this as a header in the options object when we make the `POST` request. From here, the returned observable is handled in the same way that we saw in the `GET` request, but this time the response is JSON, so we use `res.json()`. We also call the `saveJwt` method and pass it the token that is received to save it in local storage.

## GET Request with Authorization Header

Now that we know how to modify headers, sending the JWT as an `Authorization` header is simple.

```js
// app.ts

...

getSecretQuote() {

  var jwt = localStorage.getItem('id_token');
  var authHeader = new Headers();
  if(jwt) {
    authHeader.append('Authorization', 'Bearer ' + jwt);      
  }

  this.http.get('http://localhost:3001/api/protected/random-quote', {
    headers: authHeader
  })
  .map(res => res.text())
  .subscribe(
    data => this.secretQuote = data,
    err => this.logError(err),
    () => console.log('Secret Quote Complete')
  );

}

...

```

We can check this in the browser to make sure our call to the protected endpoint works.

![angular2 http $http observables rxjs](https://images.ctfassets.net/23aumh6u8s0i/7MDfOrK8h8fqU4MkXg98Zq/aa05c56ac6ec9575ea934901e66c3e14/angular2-http-2)

## What Can We Do with Observables?

You might be wondering why Http doesn't just return promises like it used to, so we can stick to our familiar methods for resolving HTTP calls. The fact of the matter is that we can do much more with observables than promises. With observables, we have a [whole bunch of operators](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/categories.md) to pull from, which let us customize our streams in nearly any way we want.

If you haven't worked with observables before, you can get an idea of how they work in our recent post on [Authenticable Observables](https://auth0.com/blog/2015/09/10/jwt-authentication-with-observables/).

It should be noted that the [Angular team is still deciding](https://github.com/angular/angular/issues/4390) on the best way of implementing the RxJS operators with Http, which means these operators aren't all available for use just yet.

We can get a taste for how they work by plugging in some simple operators. For example, in our `GET` call to `api/random-quote`, we can attach a filter.

```js
// app.ts

...

getRandomQuote() {
  var count = 0;
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .filter(x => x.length > 100)
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

...
```

Now only quotes with a length greater than 100 characters will come through. If we click the "Get Random Quote" button a few times, we see it at work.

We can also delay our subscription if we want. Here we wait two seconds before printing the quote to the screen.

```js
// app.ts

...

  .map(res => res.text())
  .delay(2000)
  .subscribe(
    data => this.randomQuote = data,
    err => this.logError(err),
    () => console.log('Random Quote Complete')
  );

...
```

While that might not be the most useful, what we will really benefit from once Http is solidified are operators like `retry`. If we were expecting network connectivity issues, we could define a number of times to retry the request.

```js
// app.ts

...

  .retry(3)
  .map(res => res.text())
  .subscribe(
    data => this.randomQuote = data,
    err => this.logError(err),
    () => console.log('Random Quote Complete')
  );

...
```

Another benefit of observables is that they can be cancelled. This can be useful for situations where HTTP requests are going on for a long time, perhaps to an unresponsive server somewhere. This is something that isn't easily done with promises, and something that the [Fetch API has yet to implement](https://github.com/whatwg/fetch/issues/27).


## Aside: Using Angular with Auth0

Auth0 issues [JSON Web Tokens](http://jwt.io) on every login for your users. This means that you can have a solid [identity infrastructure](https://auth0.com/docs/identityproviders), including [single sign-on](https://auth0.com/docs/sso/single-sign-on), user management, support for social identity providers (Facebook, Github, Twitter, etc.), enterprise identity providers (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code. We implemented a tight integration with Angular 1. Angular 2 integration is coming as soon as it's on Beta! You can read the [documentation here](https://auth0.com/docs/client-platforms/angularjs) or you can checkout the [SDK on Github](https://github.com/auth0/auth0-angular).

<img src="https://images.ctfassets.net/23aumh6u8s0i/2rne3k2iZ3EtRRpLuafLhM/67acd166eb2dcacba5d573863f1b0b06/angular-and-auth0" style="border: 1px solid #ccc;padding: 10px;"/>

## Wrapping Up

**HTTP requests in Angular 2** definitely look different than they did in Angular 1.x, but with the change comes a big boost in capability. Having requests return observables is great because we will be able to use RxJS's operators to get the returned streams behave the way we like. We'll be able to use operators like `retry` to automatically start a request again if there are network issues.

In this tutorial we saw how Http can be used to make `GET` and `POST` requests, but we can also use other HTTP verbs like `PUT`, `DELETE`, and `PATCH`. We also saw how we can customize the headers we send with the `Headers` class.

As with Angular 2 in general, Http is always going through changes. The Angular team keeps a very good [backlog of Http issues and feature implementations](https://github.com/angular/angular/issues/2793), which is a good place to keep updated on how Http progresses.


Using Angular $Http and Angular 2 Http - Angular 2 Series Part 3

Learn about Angular 2's new Dependency Injection system and how to use models to organize your app.

---

**TL;DR:** Domain models are important for defining and enforcing business logic in applications and are especially relevant as apps become larger and more people work on them. In this article, we show how this can be done in an Angular 2 app by moving logic out of the component and into a model. We also cover how to inject model classes using Angular 2's new Dependency Injection system. Check out the [repo](https://github.com/auth0/angular2-models-di) for the article to see the code.

This is the second part of our Angular 2 series. You can also check out the first part about [Angular 2 pipes](https://auth0.com/blog/2015/09/03/angular2-series-working-with-pipes/).

---

> Auth0's Angular 2 series brings you tutorials on how to implement the latest features from the framework using the most recent Alpha release at the time of writing.

As applications grow in size, it becomes increasingly important that they be well organized with a solid structure in place. This is especially critical as increasing numbers of developers are added to the team. Application architecture should also strongly focus on the business rules that govern the application and protect sensitive methods from being exposed where they shouldn't be.

<include src="TweetQuote" quoteText="As applications grow in size, it becomes important that they be well organized with a solid structure in place"/>

At the same time, it is important that we keep our applications DRY and maintainable by moving logic out of components themselves and into separate classes that can be called upon. A modular approach such as this makes our app's business logic reusable.  

One way we can achieve this type of structure in Angular 2 applications is by using models to organize our business logic. Whereas the term "model" in Angular has typically been used to refer to the View-Model, what we're discussing here is the domain model-or the set of rules and business logic that an application implements for it to adhere to the organization's needs.

The term "domain model" is, of course, a generic one. Domain models are relevant in any kind of application. In this tutorial, we will see how we can abstract business logic to a model in an Angular 2 app and use the new **Dependency Injection (DI)** system to call upon these models. We will also explore the DI system's features and various ways it can be used.

## Getting Started with an Angular 2 app

We'll be writing our app in TypeScript, but everything will work just fine in ES6. If you'd like an Angular 2 starter app in ES6, checkout [Pawel Kozlowski's](https://twitter.com/pkozlowski_os) [ng2-play](https://github.com/pkozlowski-opensource/ng2-play/) repo.

Our sample app will take a user's details as input and use a model to handle those values. Let's start with a simple component called `UsersAppComponent`.

```js
// app.ts

/// <reference path="typings/_custom.d.ts" />

import {Component, View, bootstrap, bind, FORM_DIRECTIVES} from 'angular2/angular2';
import {Inject} from 'angular2/di';

@Component({
  selector: 'users'
})
@View({
  // Form directives to be used in the template
  directives: [FORM_DIRECTIVES],
  templateUrl: 'userTemplate.html'
})

class UsersAppComponent {

  constructor() {}

}

bootstrap(UsersAppComponent);
```
Our template has some simple inputs for the user to provide their information, including checkboxes for them to select which programming languages they know.

```html
  

  <form role="form" #form="form" (ng-submit)="submit(form.value)">
    
    <input type="text" placeholder="Enter your name" [(ng-model)]="user.name">
    <input type="text" placeholder="Enter your email" [(ng-model)]="user.email">
    <h3>Languages</h3>
    <input type="checkbox" [(ng-model)]="user.javascript">JavaScript
    <input type="checkbox" [(ng-model)]="user.ruby">Ruby
    <input type="checkbox" [(ng-model)]="user.php">PHP
    <button>Submit</button>
  </form>
```

## Handling User Data

For our app, we'll want to take the user's input to see how it can be handled with a model. For simplicity, we'll just log the info to the console in these examples, but you would typically be doing HTTP requests to send the user data off to a server to be persisted.

We could set up a simple `User` class that acts as a model for our data and have some additional methods in our `UsersAppComponent` that act upon the form data. We can do this right within our component, but as will become evident later, there are some drawbacks to this. Let's see what it would look like for now. The class arrangement will be:

![angular2 models dependency injection](https://images.ctfassets.net/23aumh6u8s0i/6o3tJOtNbC96nlsVPqjeLs/a54fc2b4d2955d66f1b84410801b03d6/classes-at-start)

```js
// app.ts

...

class User {
  name: string;
  email: string;
  rating: number;
}

@Component({
  selector: 'users'
})
@View({
  directives: [FORM_DIRECTIVES],
  templateUrl: 'userTemplate.html'
})

class UsersAppComponent {

  // We instantiate the user class.
  user = new User();

  submit(userInfo) {
    // HTTP request would go here
    console.log(
      this.user.name,
      this.user.email,
      this.calculateRating(this.user)
    );
  }

  // Method to calculate the user's points
  calculateRating(userInfo) {
    var rating = 0;
    if(userInfo.javascript) {
      rating += 30;
    }
    if(userInfo.ruby) {
      rating += 20;
    }
    if(userInfo.php) {
      rating += 50;
    }
    return rating;
  }
}

...
```
We have two-way data binding set up on our form inputs, and they are bound to the instance of our `User` model. The `submit` method in our component's constructor logs the all the data to the console, including a calculation for the user's rating that it runs with the `calculateRating` method. How the heck did PHP get to be worth 50 points? I guess we'll never know.

## Improving the Model

While this approach works sufficiently well when an application is small, the way we have set things up does have a few drawbacks:

1. The `User` class isn't enforcing which values should be present or not. This can have implications if some operation downstream expects certain values to always be present.
2. The model doesn't have methods of its own to handle the calculation of the user's rating or the submission of the data. What if we wanted to have this same functionality in another of our app's components? We would need to duplicate the code in those other components.
3. While `calculateRating` is trivial in this example, what if we had some important and sensitive method with business logic that is meant only for specific circumstances? We need a way to be certain that such methods can't be used in places they're not supposed to be.
4. We currently have no ability to potentially share models with a JavaScript backend.

Let's see how we can tackle some of these issues. We'll start by moving the model to its own file. We'll eventually want to end up with classes that look more like this:

![angular2 models dependency injection](https://images.ctfassets.net/23aumh6u8s0i/2AZ4VJnqch6kcfIL6DlYlv/6fc64e402d51f1a5e9c12975324c0ac3/classes-at-end)


```js
// models/user.ts

export class User {
  name: string;
  email: string;
  rating: number;

  constructor(userInfo:any) {
    this.name = userInfo.name;
    this.email = userInfo.email;
    this.rating = this.calculateRating(userInfo);
  }

  private calculateRating(userInfo) {
    var rating = 0;
    if(userInfo.javascript) {
      rating += 30;
    }
    if(userInfo.ruby) {
      rating += 20;
    }
    if(userInfo.php) {
      rating += 50;
    }
    return rating;
  }

  save() {
    // HTTP request would go here
    console.log(this.name, this.email, this.rating);
  }
}
```

We're now using a constructor in our `User` method, which will set the values for `name`, `email`, and `rating` when the class is instantiated. We've got our `calculateRating` method in our class now, along with a `save` method to take care of making an HTTP request to save the data.

In our template, let's switch from using `ng-model` for two-way data binding to `ng-control` to get the form values when the form is submitted.

```html
  
  <form role="form" #form="form" (ng-submit)="submit(form.value)">
    <input type="text" placeholder="Enter your name" ng-control="name">
    <input type="text" placeholder="Enter your email" ng-control="email">
    <input type="checkbox" ng-control="javascript">JavaScript
    <input type="checkbox" ng-control="ruby">Ruby
    <input type="checkbox" ng-control="php">PHP
    <button>Submit</button>
  </form>
```

We can now modify the `UsersAppComponent` to instantiate and save a new instance of the model when the form is submitted.

```js
// app.ts

...

import {User} from 'models/user';

...

class UsersAppComponent {

  submit(userInfo) {

    // Instantiate and save when the form is submitted
    this.user = new User(userInfo);
    this.user.save();

  }
}

...

```

The model and the methods that it relies on are now in the same spot and can be used in other parts of the application as well. In the model, we specified that we want `calculateRating` to be `private`, but as it stands, we would still be able to gain access to it from outside the `User` model. This is part of [TypeScript's design](http://typescript.codeplex.com/discussions/451129), but we can put a workaround in if we really wanted to protect `calculateRating`. Although it might not work as an architectural approach in every situation, we could define `calculateRating` as a function within the class constructor, which would prevent it from being accessed elsewhere. The downside here is that the function is not available to other methods within the class.

```js
// models/user.ts

...

constructor(userInfo:any) {

  this.name = userInfo.name;
  this.email = userInfo.email;
  this.rating = calculateRating(userInfo);

  // Function is only available inside the constructor
  // when the logic really needs to be protected.
  function calculateRating(userInfo) {...}
}

...
```

## Moving to Factories

We've seen how we can instantiate a new model and access methods on it, but what if we wanted to take the factory approach? In this approach, instead of instantiating the model directly in our components, we would call a method like `create` on the factory. As applications grow and classes become increasingly complex, this can have certain advantages, especially for maintainability. For example, if we wanted to change the name of a class that gets instantiated, the factory approach allows us to make a change solely to the factory itself and not all the instantiation points around the app.

This is also where Angular 2's Dependency Injection comes in, as we'll need to inject the factory to make use of it.

```js
// models/userFactory.ts

import {User} from './user';

export class UserFactory {

  // Uses the User model to create a new User
  create(userInfo:any) {
    return new User(userInfo);
  }

}
```

We'll need to inject the `UserFactory` into our component's constructor. Angular 2 comes with an `@Inject` decorator, which is used to attach metadata to the component. We also need to include `UserFactory` in an array when the app is bootstrapped so that it is included as a binding.

```js
// app.ts

...

import {UserFactory} from 'models/userFactory';

...

class UsersAppComponent {
  userName: string;
  userRating: number;
  rating: number;

  // We inject the UserFactory
  constructor(@Inject(UserFactory) UserFactory) {  
    this.UserFactory = UserFactory;
  }

  ...
}

// We bind the UserFactory when the component is bootstrapped
bootstrap(UsersAppComponent, [UserFactory]);

```

With `this.UserFactory` pointing to the `UserFactory`, we can now make use of its methods. Let's adjust the `submit` method to use the factory.

```js
// app.ts

...

submit(userInfo) {
  this.user = this.UserFactory.create(userInfo);
  this.user.save();
}

...


```

Now when the user submits the form, `create` and `save` are called with the form data.

We can also use the model approach to get the data for the user that just submitted the form. For example, we could add a `get` method to the `User` class that returns (or in this case logs to the console) the user's data.

```js
// models/user.ts

...

get() {
  console.log(this.name, this.email, this.rating);
}

...
```

Then within the component we can create a `getUser` method to retrieve it.

```js
// app.ts
...

getUser() {
  this.user.get();
}

...
```

## More on Dependency Injection

We used the `@Inject` decorator to bring in `UserFactory` above; however, TypeScript also allows us to use type annotations, which means the constructor can be written as:

```js
// app.ts

...

constructor(UserFactory: UserFactory) {...}

...
```

The array syntax we used to bind `UserFactory` to our component is the shorthand way of doing it. We can also explicitly state what we want to bind to, which gives us the option of binding to other classes. For example, we could bind `User` to `UserFactory` directly.

```js
// app.ts

...

// The UserFactory can be bound to another name, in this case, User
bootstrap(UsersAppComponent, [bind(User).toClass(UserFactory)]);

...
```

With this, `UserFactory` becomes `User` when used in our component.

## Aside: Using Angular with Auth0

Auth0 issues [JSON Web Tokens](http://jwt.io) on every login for your users. This means that you can have a solid [identity infrastructure](https://auth0.com/docs/identityproviders), including [Single Sign On](https://auth0.com/docs/sso/single-sign-on), User Management, support for Social (Facebook, Github, Twitter, etc.), Enterprise (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code. We implemented a tight integration with Angular 1. Angular 2 integration is coming as soon as it's on Beta! You can read the [documentation here](https://auth0.com/docs/client-platforms/angularjs) or you can checkout the [SDK on Github](https://github.com/auth0/auth0-angular).

<img src="https://images.ctfassets.net/23aumh6u8s0i/4PnRDegulvaccUIfNyaAtn/8342312355dc6af44a69c07c66f58be7/pub_w_1219_amp_h_559" style="border: 1px solid #ccc;padding: 10px;"/>

## Wrapping Up

It's important that thought be given to how applications are architected so that they are easier to maintain and can be collaborated on by more developers as team sizes grow. It's also important to protect business logic and keep sensitive methods from being accessed outside the class to which they belong. These effects can be achieved by moving logic into models.

Angular 2 gives us a new Dependency Injection system that allows us to inject classes into our components easily. We had a brief look at how the new DI system works, but for a more thorough overview, we recommend you check out [Pascal Precht](https://twitter.com/PascalPrecht)'s post on [Dependency Injection in Angular 2](http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html).

Angular 2 Series - Part 2: Domain Models and Dependency Injection

Learn how to implement pipes (formerly known as filters) in your Angular 2 apps

---

**TL;DR:** In this first installment of the Angular 2 series, we take a look at **pipes** which replace filters from Angular 1.x. Many of the filters from Angular 1.x carry over to pipes, but we also get some new ones. Check out [the repo](https://github.com/auth0/angular2-pipes) for this tutorial to see the pipes in action and to learn how to create your own custom pipes. To see an example of a full Angular 2 app, read Auth0's tutorial on [creating your first Angular 2 app](https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/).

---

> Auth0's Angular 2 series brings you tutorials on how to implement the latest features from the framework using the most recent Alpha release at the time of writing.

## From Filters to Pipes

AngularJS 1.x filters are helpful for formatting output in our templates. With Angular 2, we get this same great feature, but they are now called **pipes**. At the time of this writing, Angular 1.x and Angular 2 have an equal number of filters to pipes, but there isn't direct crossover. The following table shows a comparison:

<table class="table">
<thead>
<tr>
<th> Filter/Pipe Name </th>
<th style="text-align:center;"> Angular 1.x </th>
<th style="text-align:center;"> Angular 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> currency         </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> date             </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> uppercase        </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> json             </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> limitTo          </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> lowercase        </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> number           </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;">           </td>
</tr>
<tr>
<td> orderBy          </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;">           </td>
</tr>
<tr>
<td> filter           </td>
<td style="text-align:center;"> ✓    </td>
<td style="text-align:center;">           </td>
</tr>
<tr>
<td> async            </td>
<td style="text-align:center;">             </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> decimal          </td>
<td style="text-align:center;">             </td>
<td style="text-align:center;"> ✓  </td>
</tr>
<tr>
<td> percent          </td>
<td style="text-align:center;">             </td>
<td style="text-align:center;"> ✓  </td>
</tr>
</tbody>
</table>

In this article, we will explore the features provided by some of Angular 2's pipes that aren't comparable to Angular 1.x filters. We'll also learn how to create a custom pipe and use it in our templates.

You'll need to have an Angular 2 sandbox set up for this tutorial. A good one to get started with is [ng2-play](https://github.com/pkozlowski-opensource/ng2-play) by [Pawel Kozlowski](https://twitter.com/pkozlowski_os).

## Basic Pipes

Many of the pipes provided by Angular 2 will be familiar if you've worked with filters in Angular 1.x. Pipes are accessed in our templates in the same way that filters were--with the "pipe" character `|`. For example, we can use the `date` pipe to transform a date object in any way we like by providing it with an argument for formatting:

```js
// app.ts

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'pipes'
})
@View({
  templateUrl: 'pipesTemplate.html'
})
// Component controller
class PipesAppComponent {
  date: Date;

  constructor() {
    this.date = new Date();
  }
}

bootstrap(PipesAppComponent);
```

We pointed our `@View` decorator to a `templateUrl` in which we make use of the `date` pipe:

```html
  
  <h1>Dates</h1>
  
  <p>{{ "{{date | date:'mediumDate'" }}}}</p>
  
  <p>{{ "{{date | date:'yMMMMd'" }}}}</p>
  
  <p>{{ "{{date | date:'shortTime'" }}}}</p>
```

![angular2](https://images.ctfassets.net/23aumh6u8s0i/37BF7NE33IEQ0xMA2lAHlk/8ab9d0d3f3f2d9be6ccb3cc8f602f2ae/angular2-pipes-1-1)

## New Pipes

The `decimal` and `percent` pipes are new in Angular 2. These take an argument that describes the "digit info" that should be used--that is, how many integer and fraction digits the number should be formatted with. The argument we pass for formatting follows this pattern: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}`.

**Note:** The `decimal` pipe is accessed using `number` in our templates.

```js
// app.ts

...

@View({
  templateUrl: 'pipesTemplate.html'
})

class PipesAppComponent {
  grade: number;
  rating: number;

  constructor() {
    this.grade = 0.99;
    this.rating = 9.1243;
  }
}

...
```

```html
  <h1>Decimals/Percentages</h1>
  
  <p>{{ "{{grade | percent:'.2'" }}}}</p>
  
  <p>{{ "{{rating | number:'2.1-2'" }}}}</p>
```
![angular2](https://images.ctfassets.net/23aumh6u8s0i/4XFENZUIJ6yoSfLSPVdEJt/e69dc9dc5ab1824a6ef9c193d2215124/angular2-pipes-1-2)

## The Async Pipe

Angular 2 provides a special pipe known as `async`, which allows us to bind our templates directly to values that arrive asynchronously. This ability is great for working with promises and observables. To see how this works, we'll create a simple promise and have it resolve with a string.

<include src="TweetQuote" quoteText="Angular 2's async allows us to bind our templates directly to values that arrive asynchronously"/>

```js
// app.ts

...

@Component({
  selector: 'pipes',
  changeDetection: 'ON_PUSH'
})
@View({
  templateUrl: 'pipesTemplate.html',
})

class PipesAppComponent {
  promise: Promise;

  constructor() {
    this.promise = new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve("Hey, I'm from a promise.");
      }, 2000)
    });
  }
}

...
```

```html
  
  <h1>Async</h1>
  <p>{{ "{{ promise | async" }}}}</p>

```

After a 2 second delay, the value from the resolved promise will be displayed on the screen.

![angular2](https://images.ctfassets.net/23aumh6u8s0i/5TsNZysQufm6z3ja3Fb7vA/e349949ba860e421ab91e22207fbcf35/angular2-pipes-1-3)


## Custom Pipes

Before Alpha 35, we had to configure our custom pipes with a `pipes` object. However, we can now define a pipe with the decorator `@Pipe` and use it by adding a `pipes` property to the `@View` decorator with the name of the pipe class. This makes it easier and more convenient to register our custom pipes.

```js
// app.ts

import {Component, View, bootstrap, Pipe, PipeTransform} from 'angular2/angular2';

...

// We use the @Pipe decorator to register the name of the pipe
@Pipe({
  name: 'tempConvert'
})
// The work of the pipe is handled in the tranform method with our pipe's class
class TempConvertPipe implements PipeTransform {
  transform(value: number, args: any[]) {
    if(value && !isNaN(value) && args[0] === 'celsius') {
      var temp = (value - 32) * 5/9;
      var places = args[1];
      return temp.toFixed(places) + ' C';       
    }

    return;
  }
}

...

@View({
  templateUrl: 'pipesTemplate.html',

  // We can pass the pipe class name into the pipes key to make it usable in our views
  pipes: [TempConvertPipe]
})

class PipesAppComponent {
  temperature: number;

  constructor() {
    this.temperature = 85;
  }
}
```

```html
  <h1>Custom Pipes - Convert Temperature</h1>
  
  <h3>Fahrenheit: {{ "{{temperature + ' F'" }}}}</h3>
  
  <h3>Celsius: {{ "{{temperature | tempConvert:'celsius':1" }}}}</h3>
```
We use the `transform` method to do any logic necessary to convert the `value` that is being passed in. We can get ahold of the arguments array as the second parameter and pass in as many as we like from the template. As you can see here, we check the type of conversion that we want (e.g., Fahrenheit to Celsius), convert the `value` passed in, and then return the converted value to the number of decimal places specified in the second argument of the pipe.

As mentioned above, we need to provide an array to the `pipes` property in the `@View` decorator to use the new pipe.

![angular2](https://images.ctfassets.net/23aumh6u8s0i/4CierHg40QFc5hYSp4qlCl/9354d43b0c97946d05ac5a032c5b5f9e/angular2-pipes-1-4)

## Aside: Using Angular with Auth0

Auth0 issues [JSON Web Tokens](http://jwt.io) on every login for your users. This means that you can have a solid [identity infrastructure](https://auth0.com/docs/identityproviders), including [Single Sign On](https://auth0.com/docs/sso/single-sign-on), User Management, support for Social (Facebook, Github, Twitter, etc.), Enterprise (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code. We implemented a tight integration with Angular 1. Angular 2 integration is coming as soon as it's on Beta! You can read the [documentation here](https://auth0.com/docs/client-platforms/angularjs) or you can checkout the [SDK on Github](https://github.com/auth0/auth0-angular).

<img src="https://images.ctfassets.net/23aumh6u8s0i/4PnRDegulvaccUIfNyaAtn/8342312355dc6af44a69c07c66f58be7/pub_w_1219_amp_h_559" style="border: 1px solid #ccc;padding: 10px;"/>

## Wrapping Up

Angular 2 provides some great pipes that carry over well from the filters we are used to in Angular 1.x. We also get some new pipes that give us special functionality, such as the `async` pipe, which binds our templates to asynchronous resources. It's also easy to create our own pipes via the `@Pipe` decorator and the `pipes` key in our `@View` decorators.

You can find the code for this tutorial on [GitHub](https://github.com/auth0/angular2-pipes).

"angularjs"