angular-is-badass-presentation

View Github Repository Open presentation in a new window

the-control-group

See all presentation from the-control-group

angular-is-badass-presentation

0 1

angular-is-badass-presentation

On Github the-control-group / angular-is-badass-presentation

Learn how to become an Angular Badass

TCG. May 20. Chris McKenzie

Code Along

Clone Me

https://github.com/the-control-group/angular-is-badass-workshop

What is Angular?

  • Html made for web apps!
  • built by Google
  • Badass!
Put your speaker notes here. You can see them pressing 's'.

How to get it

Put your speaker notes here. You can see them pressing 's'.

Structure of an app

The Basics

app/
├── index.html  
├── angular.js
└── app.js

More structure examples here!

Touch on different structures for larger apps.

The Index Html

Where dreams come true!

(and angular is declared king)

<html ng-app="badassApp">
  <head>
    <title>My badass angular app</title>
  </head>
  <body ng-controller="mainCtl">

  <!-- angular.js should go here -->
  </body>
</html>
angular is built on the premise that html should play a bigger part in a dynamic app. angular does this by adding custom elements and attributes * and declarative two way data binding!

Okay, but what does it all mean?

  • ng-app declares the element as the host for our badassApp angular app
  • ng-controller says that this element is the host for the controller mainCtl in our app
The best part is that you use multiple

The App js

angular.module('badassApp', [])
.controller('mainCtl', function($scope){
  $scope.awesomeThings = [
    'angular',
    'thecontrolgroup',
    'the frontend team'
  ];
});

What is going on?

  • scope is where the magic happens!
  • the html tag has now been bound to our angular app
  • the body tag has also been bound but it is bound to the controller scope
Talk about scope and how it relates to traditional scope

Two way data binding

  • no js required
  • Build realtime interactive UI

Demo

Dependency injection

  • dependencies injected as function variables
  • Like reflection in JS
  • No need for AMD

Demo

Building a Todo app

(demo)