Lesson Monday

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

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 AngularJS framework. Version 1.0 was released to the public in 2012. Version 2.0 was later released in mid 2016. Angular 4 was released in March 2017, but little documentation has been published for it at this time, so we'll be learning Angular 2. If you reference resources outside of our curriculum, be sure they are about Angular 2, not Angular 1 or 4.

Who Uses Angular?

As of January 2017, websites built in AngularJS (at the time of this writing, in January 2017) 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. (We'll use Angular's CLI next week.) 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 2 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: