angularjs-intro-lightning-talk

HTML enhanced for web apps!

Today i will discuss

What AngularJS is
Hello, World example of AngularJS
What makes AngularJS cool

A backstory...

History of Angular

In 2009...

@mhevery

Back in 2009, Misko Hevery and 2 began working on an internal project called Google Feedback
3 devs were working on Google Feedback
6 months and 17,000 lines of codes later

Misko began to grow frustrated with how difficult it was to test and modify the cod
Misko made a bet with his manager

that he could rewrite the entire app using his side project getAngular in 2 weeks
So did he win the bet?

No! Rewriting 17,000 lines of codes in 2 weeks is absurd!

He was still able to finish the app in 3 weeks

code was just 1,500 lines long. Eventually, he's manager took notice and AngularJS was born.

What is AngularJS?

MVW JavaScript Framework

I assume that most of you has heard of MVC
MVC is a really old architectural pattern that helps in the separation of concerns
several spinoffs like MVVM and MVP
Stands for model view whatever
Why do we need an architectural pattern? Isn't it done at the server-side already? Why do we need to port it to the client-side?
recent years - browser wars - JS faster
there are a lot more things that we can do in the browser
a lot more things mean - longer code

JS is hard to maintain - global variables, dynamic types
This is a typical web application. Business logic and DOM manipulation code are usually inside one file
It feels like a kludge when you code like this
So what we want is...

...modularized code
cleaner code with a separation of concerns
HTML stay clean for UI, business logic only in one JS module, maybe separation of UI behaviors based on JS

Principles

Structure

Source: http://theconstructor.org/structural-engg/analysis/structural-design-process/1673

Testability

Source: http://cartoontester.blogspot.com/2012/02/testability-explained.html

D.R.Y.

Source: http://phillihp.com/2011/06/22/learn-object-oriented-php-ruby/

If we do these, we'll be able to recognize these benefits
Structure of code - defines numerous concepts to properly organize your web application into modules, services, factories, and directives
Reusability - enhances HTML by attaching directives, new tags and attributes
Testability - dependency injection, mocks

Hello, Angular! Demo

Hello, {{name}}

short code, no JavaScript, there are several interesting things in the HTML

Anatomy of the 'Hello, Angular' App

directives - new kinds of markups, special behavior to attributes or elements
ng-app - directive that automatically initializes the application
ng-model - directive stores/updates the value of the input field into/from a variable
double curly braces {{ expression }} - JavaScript-like code snippet that allows to read and write variables
template - HTML file
view - loaded, transformed DOM
Code can still be messy...

Our First Controller Demo

Now that we've seen the model and the view
...AngularJS allows us to create controllers so that we can nicely separate different components of the app
Demo - provide a way to display a list of items

HTML Code

<html ng-app="todoApp">						
	<body ng-controller="TodoCtrl">

{{todo.text}}

</body> </html>

JS Code

var app = angular.module('todoApp', []);

app.controller('TodoCtrl', function($scope){
  $scope.todos = [
  { text: 'Create presentation', done: true },
  { text: 'Send email', done: false }
  ];
});

ng-app directive (on the tag) now specifies the todoApp module
controller allows us to establish data-binding between the model and the view.
ngController directive, located on the tag. mapped to TodoCtrl
controller scope is available to all bindings located within the body tag
data to the $scope that was injected into our controller function.

Upgraded Todo Application Demo

Strikethrough of completed tasks
Add new task
Clear Completed

HTML Code

       
  
    
    {{todo.text}}
  


Add
Clear Completed

JS Code

$scope.addTask = function() {
  $scope.todos.push( { text: $scope.newTask, done: false } );
  $scope.newTask = "";
}

$scope.clearCompleted = function() {
  $scope.todos = $scope.todos.filter(function(todo) {
    return !todo.done;
  })
}

Testability

stability, inspires confidence, easier to change code, improve the design
UI / DOM code separated from business logic, it becomes easier to test business logic
Dependency injection can mock out services, providers, etc.

Test for addTask()

it('+1 task when adding task', function() {
  var controller = createController(),
    todosLen = $scope.todos.length;

  $scope.newTask = 'Aha!';
  $scope.addTask();
  
  expect($scope.todos.length).toEqual(todosLen + 1);
  expect($scope.todos[todosLen].text).toEqual('Aha!');
});

Test for clearCompleted()

it('remove completed items', function() {
  var controller = createController(),
    todosLen = $scope.todos.length;

  $scope.newTask = 'Aha!';
  $scope.addTask();
  $scope.todos[todosLen].done = false;
  
  $scope.clearCompleted();

  expect($scope.todos.length).toEqual(todosLen + 1);
});

test cases have no noise. Just pure business logic

Imperative vs. Declarative Demo

Declaratively say what you want to do Reusable

HTML Code

Summer Photos!

JS Code

var app = angular.module('directivesApp', ['ui.bootstrap']);

app.controller('MyCtrl', function($scope){
  $scope.alertType = 'success';

  $scope.slides = [
    { active: true, image: 'images/summer1.jpg', text: 'Summer 1' },
    { active: false, image: 'images/summer2.jpg', text: 'Summer 2' },
    { active: false, image: 'images/summer3.jpg', text: 'Summer 3' },
    { active: false, image: 'images/summer4.jpg', text: 'Summer 4' },
  ];
});

Float Label Design Pattern Demo

AngularJS is awesome

but, it may NOT always be the best approach...

Lots of AJAX
UIs that have complex interactions
Single-Page Application Architecture

Just because AngularJS is shiny and cool, it doesn't mean that we absolutely have to use it
Just like other frameworks and libraries, we still need to weigh the pros and cons
UIs have complex interactions - 2-way data binding, changes in the model will be automatically refected on the view
you’re performing a whole bunch of AJAX with jQuery and showing and hiding content

There are other MV* frameworks

Just to be fair with the other MV* frameworks, I'd like to mention that there are others out there
Addy Osmani and team has done a spendid job of recreating the same application using different MV* frameworks
provide separation of concerns
enforce coding practices
enable the separation of user-interface views from data model and application flow/behavioral logic
lead to fine-grain reusable components and well-organized code

AngularJS is still awesome!

Cool Features - 2-way binding, directives, filters, services, i18n
What was presented here was just the tip of the iceberg
Huge community, with google's backing
Nice tools such us batarang

HTML enhanced for web apps! – A backstory... – What is AngularJS?

pamlesleylu

HTML enhanced for web apps! – A backstory... – What is AngularJS?

0 0