Intro to AngularJS

Cleveland Javascript Meetup Group
01.27.2014


Anurag Saxena
Github: saxenanurag


Agenda

  • Introduction to AngularJS
  • Show basic examples

What is AngularJS

Angular is a JavaScript Model - View - View Model (MVVM) Framework

Falls in the family of other MVVM frameworks - KnockoutJS and KendoUI

Used for making Single Page Applications (SPA Applications)

Complete Client Side Solution - But can also be used on the server side in a MEAN (Mongo-Express-Angular-Node) Stack



MVC/MV-P/MV-VM/MV-WTF

All modern JavaScript frameworks fall under some kind of Model-View-Controller (or their combination) framework. These frameworks do the regular stuff and help us in working on the problem on hand. They also help in avoiding spaghetti code. 

Models - represent domain-specific knowledge and data in an application

Views - the UI in an application (eg. your markup and templates). They should know the existence of your model in order to observe them, but not communicate with them

Controllers - handle inputs (clicks, user actions etc) in an applications. Based on the input, the controller updates the state of a model, but does not communicate this directly to the View. The View observes the model for any updates. 

All of this helps in separating concerns within our web application

Model-View-ViewModel

(MVVM)

In a MVC framework, the View has access to the complete model, which can cause performance and security issues. 

MVVM allows use to create view-specific formatted subsets of the model, which can contain the logic and the state, thereby avoid exposing the entire model to the views.

This provides security and performance to a web-app

But it also increases complexity. Thats when a good framework comes to the rescue! 




The Zen of Angular

Angular is built around the belief that declarative code is better than imperative code when it comes to building UIs and writing software components together, while imperative code is excellent for business logic

The Zen of Angular

  • It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves the testability of the code
  • It is a really, really good idea to regard app testing as equal importance to app writing. Testing difficulty is dramatically affected by the way the code is structured
  • It is an excellent idea to decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides
  • It is very helpful indeed if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing
  • It is always good to make common tasks trivial and difficult tasks possible

    • Features

    • Built-in HTML Template Engine
    • Declarative, uses view to derive behavior
    • 2-way data binding (The model and the view are in sync)
    • Built in filters to query over datasets
    • Model change listeners
    • Dependency Injection
    • Support for REST
    • jQuery built in
    • Great Debugger - Batarang
    • Testing - Unit testing and E2E Testing


    Angular Directives

    Create Custom Tags!
     <directive></directive>

    • One of the best features of Angular is the ability to create directives. 
    • Directives are reusable web components
    • Basically, Angular gives you the ability to create domain-specific HTML tags that can be used anywhere within the application or across applications (depending on the design)
    • Maybe Angular Directives and Testing can be a Talk for CLE-JS!





    Demo

    clejs-angular

    By Anurag Saxena

    Made with Slides.com

    clejs-angular

    • 698

    More from Anurag Saxena