Lesson Tuesday

Now that we understand more about the MVC architecture in general, let's turn our focus back to Angular.

History

AngularJS (also referred to as Angular or Angular.js) is an open-source front-end framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons as a tool to allow web designers to interact with both the front and back-ends of an application.

Hevery eventually began working on a project called Google Feedback for Google. As the project's codebase became larger and more difficult to manage, Hevery grew frustrated. He bet his manager he could rewrite the entire application using Angular in much less code. And he was right. He reduced the project from 17,000 lines of code to a mere 1,500.

Needless to say, this caught Google's attention. Google is now the primary company supporting and maintaining the Angular framework. Version 1.0 was released to the public in 2012. The first version is referred to as AngularJS and all subsequent releases are referred to as just Angular. Version 2.0 was later released in mid 2016. Angular 4 was released in March 2017, and Angular 5 was released in November 2017. At the time of this writing, the dev team has plans to release versions 6 and 7 by the end of 2018.

As you can see, new versions of Angular are released rapidly. This curriculum works with Angular 5. Fortunately, the ways we can use Angular have not changed much from 2 to 4 to 5, so you'll be able to follow along even if you're using 2, 4, or a later version of Angular. Just make sure to reference the correct Angular version's documentation, and while there aren't many large changes, there are a few subtle differences between versions.

Who Uses Angular?

As of January 2018, websites built in Angular include:

There are many more. You can see an even more comprehensive list at the Made with Angular site.

Why Use Angular?

Why should we (or any of those sites above) use Angular?

  • We can create more using less code. By using a framework, we can get projects up and running quicker and with much less code. This is because the framework itself handles the majority of the "boilerplate" code.

  • Support from Google. As technology grows and changes, Google will continue releasing updates for Angular. This extends the life of your own application or project. While support from Google doesn't necessarily mean a framework is inherently better, it can mean a framework will be well-supported into the future.

  • Widely-available documentation and resources. Because AngularJS is so popular, documentation and other resources are widely available online.

  • Built-in tools make tasks quicker and easier. Angular makes coding common tasks easier and more streamlined via its Command Line Interface (CLI) tool. This allows us to generate new portions of our application directly from the command line. Angular also contains tools that listen and react to various events, which means we don't need lengthy jQuery and can keep our code more organized and concise.

Angular Resources

As with any language, you'll likely find yourself referencing documentation fairly frequently while developing, debugging, or simply trying something new. The Angular documentation can be found at the Official Angular Site

Notable sections of the documentation include:

  • If you'd like to explore Angular beyond what our curriculum offers, the Tutorial area walks you through the creation of an Angular application from start to finish.

  • The Cheatsheet area provides a handy reference guide to common syntax. (If the content here doesn't make sense yet, it will soon!)

  • The Styleguide area outlines best practices in naming, structuring projects, etc.

Are you ready? Let's get started!

Overview


  • Angular 2 is a client-side MVC developed in 2009, and later picked up by Google. Google continues to support it.

  • The benefits of developing in Angular 2 include: It allows us to create more functionality using less code, take advantage of built-in tools to make common coding tasks easier, and boasts a thorough and widely-available documentation.

Additional Resources


The Angular documentation can be found at the Official Angular Site. Notable sections include: