: Complex web apps made simple

What is angular?

Angular is what HTML would have been if it had been designed for building web applications. It provides your application’s plumbing so you can focus on what your app does, rather than how to get your web browser to do what you need.

Angular is an extensible client-side HTML compiler and a JavaScript web framework for building interactive client-side web applications with very declarative, reusable and testable code that plays to strengths of both HTML and JavaScript.

Live Example

Below is an angular mini demo of simple password generator example which shows of MVC, dependency injection of services (XHR), and data-binding.

                      <div ng:controller="PasswordController">
                       Password:
                       <input type="password" name="password" placeholder="enter password"/>
                       <input type="checkbox" name="showPwd">
                       <span ng:show="showPwd">{{password}}</span>
                       <br/>
                       Password strength:
                       <span ng:class="strength">{{strength}}</span>
                       <button ng:click="generate()">Generate</button>
                      </div>

                      <script>
                      var SERVICE_URL = 'http://angularjs.org/generatePassword.php?callback=JSON_CALLBACK';
                      // Dependency Inject $xhr service
                      function PasswordController($xhr){
                        // reset the state of the model to defaults
                        this.password = '';
                        this.strength = null;
                        this.showPwd = true;

                        // watch the password field and grade it.
                        this.$watch('password', function(){
                          if (this.password.length > 8) {
                            this.strength = 'strong';
                          } else if (this.password.length > 3) {
                            this.strength = 'medium';
                          } else {
                            this.strength = 'weak';
                          }
                        });

                        // behavior
                        this.generate = function(){
                          var self = this;
                          $xhr('JSON', SERVICE_URL, function(code, response){
                            self.password = response.password;
                          });
                        }
                      }
                      </script>

                      <style>
                       .strong { background-color: lightgreen;}
                       .medium { background-color: yellow;}
                       .weak { background-color: red; color: white;}
                      </style>

You can fiddle with the source code at jsfiddle.

Complexity kills. Use angular. Here’s why:

  • Write less code. A lot less. Forget about writing all that extra JavaScript to handle event listeners, DOM updates, formatters, and input validators. Angular comes with autobinding, built-in validators and formatters which take care of these. And you can extend or replace these services at will. With these and other services, you’ll write about 10x less code than writing your app without angular.
  • Automatic view/model synchronization. Tired of writing code to keep your view and model in sync? Thanks to angular’s 2-way data binding, your model is always the single source of truth for your application state and your view is simply a projection of your model. You are only responsible for your business logic in a controller and the associated HTML template.
  • No setup. Nothing to download. No server required. No compilers to configure. No environment variables to set. Angular’s UI templates run on the client so you never have to wait on the server to see your changes in the application.
  • Readable code that is easy to maintain. Angular apps are specified declaratively through custom HTML tags and attributes that specify the intent of your application. By defining UI templates and widgets in HTML, you can read angular code and understand what it’s supposed to do. Plus, less code means less to read, maintain and test.
  • Testable code. Angular comes with a set of services that are useful for building web apps. The services are dependency injected, which makes it easy to swap services or create mocks for testing. Some services are: history management, URL router, XHR requests, and data caching out of the box.
  • Build reusable components with trivial effort. Angular lets you write UI templates and widgets that you can reuse throughout your app.
  • Plays well with others. You can easily use angular with the frameworks and libraries that you are already using. Mix and match functionality freely.

Sounds awesome. But what parts do I need to write?

  • HTML and CSS: Standard HTML plus custom tags and attributes, which bring dynamic nature to HTML.
  • Controllers: Angular apps follow the model-view-controller pattern. You’re responsible for the logic that's custom to your application which is encapsulated in one or more controllers. These are implemented in JavaScript.
  • (optional) Server-side data service. Write this in your technology of choice.

How do I get started with angular?