Angular JS – HTML enhanced for web apps!

View Github Repository Open presentation in a new window

bwolvin

See all presentation from bwolvin

Angular JS – HTML enhanced for web apps!

0 0

Angular

Introduction to Angular

On Github bwolvin / Angular

Angular JS

HTML enhanced for web apps!

Single Page Application Framework

Challenges with Single Page Application Frameworks

  • DOM Manipulation
  • History
  • Module Loading
  • Routing
  • Caching
  • Object Modeling
  • Data Binding

AngularJS provides a robust "SPA" framework for building robust client-centric applications

Advantages of Angular

  • Entirely client-side, so anywhere JavaScript can run, AngularJS can run
  • Extend HTML vocabulary for your application
  • 2-way Data Binding
  • Angular runs right out of the box with no library dependencies
  • Getting started with AngularJS is incredibly easy

Hello World

<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
    </head>
    <body>
        <div>
          <label>Name:</label>
          <input type="text" ng-model="yourName" placeholder="Enter a name here">
          <hr>
          <h1>Hello, {{yourName}}!</h1>
        </div>
    </body>
</html>

Directives

Teach an Old Dog New Tricks

Angular uses directives to plug its action into the page.

  • ng-app: Entry point of Angular to the page.
  • ng-bind: Changes text of an element to the value of an expression
  • ng-controller: Specifies the JavaScript class for the given action
  • ng-repeat: Creates the very clean loop structures in your page.

Ok, but let's get started

Add the ng-app directive to the tag

< html lang='en' ng-app>

Add the Angular < script > tag to the end of your tag:

<head>...meta and stylesheet tags...
<script src="lib/angular/angular.js" ></script>

The name of the Javascript class in the controller tells Angular what code to run

<div ng-controller="TodoCtrl">

ng-repeat is a repeater directive that loops through the current collection and does the specified action

 <ul class="unstyled">
    <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
    </li>
</ul>

Sprinkle a little Javascript in

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

    $scope.remaining = function() {
        var count = 0;
        angular.forEach($scope.todos, function(todo) {
          count += todo.done ? 0 : 1;
        });
        return count;
    };
}

Mix in some css

.done-true {
  text-decoration: line-through;
  color: grey;
}

Let's Keep going

<form ng-submit="addTodo()">
        <input type="text" ng-model="todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
</form>

$scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

Further Reading

  • http://angularjs.org
  • http://www.youtube.com/watch?v=i9MHigUZKEM
  • http://builtwith.angularjs.org/

The End

HTML/CSS ~ EPAM Empathy Lab ~