AngularJS – A "brief" two-hour tutorial... – What does this html do?

View Github Repository Open presentation in a new window

askarby

See all presentation from askarby

AngularJS – A "brief" two-hour tutorial... – What does this html do?

0 0

goto-ang-pres

Slides for GotoNight in Esbjerg, tuesday June 10th, 2014.

On Github askarby / goto-ang-pres

AngularJS

A "brief" two-hour tutorial...

Created by Anders Bruhn Skarby / @askarby

Short presentation

  • Name: Anders Bruhn Skarby
  • Occupation: Software developer of 10 years
  • Experience: Web developer hacking web apps for 15 years
  • Day job: Schneider Electric
    • Yes, we're hiring...

Preface

Slides and code will be made available on github!

Requirements

To follow along you'll need to have some basic knowledge of:

  • JavaScript
  • HTML
  • CSS

Presentation form

This presentation will be a mix of the following three elements:

  • Slides
  • Live coding
  • Using git to speed things up

Head up: Don't be afraid to interrupt if you have a question.

What does this html do?

<html>
    <head>...</head>
    <body>
        <div id="container1">
            <ul></ul>
            <button id="btn1"><button/>
        </div>
        <div id="container2">
            <input id="inp1"/>
            <textarea id="edt1"><textarea/>
            <button id="btn2"><button/>
        </div>
        ...
    </body>
</html>

That's an unfair question

I'm not showing the entire code

I don't need to

Here's the important parts

<html>
    <head>
        <script src="..." />
        <script>...</script>
        ...
    </head>
    <body>
        <script src="..." />
        <script src="..." />
        <script>...<(script>
        <script>...</script>
        ...
    </body>
</html>

This is Bad!

Because:

  • No clue what's going on
  • Most likely id / class-based query selectors in .js-files
  • .js-files may import other files
  • Unmaintainable

AngularJS to the resque

New HTML

<html>
    <head>...</head>
    <body ng-app="notepad" ng-controller="MainCtrl">
        <notelist id="container1">
            <ul>
                <li ng-repeat="note in notes">{{note.title}}</li>
            </ul>
            <button id="btn1" ng-click="createNewNote()"><button/>
        </notelist>
        <editor id="container2">
            <input id="inp1" ng-model="note.title"/>
            <textarea id="edt1" ng-model="note.content"><textarea/>
            <button id="btn2" ng-click="save()">Save note<button/>
        </editor>
        ...
    </body>
</html>

So we got

  • New and custom:
    • Elements
    • Attributes
  • Resulting in:
    • Markup indicating application intent

Angular provides

  • MVC framework
  • Databinding
  • Directives
  • Dependency injection
  • Testable code

Demo time!

Twatter - Advanced example

An AngularJS Twitter-clone, using Twitter's API for data

git tag -l -n1

Setup

  • NodeJS Server (ExpressJS) for backend
  • Grunt - for building application, live-reload etc.
  • Bower - for acquiring frontend dependencies

Initial application - v1.0

  • Styled (CSS)
  • ngRoute
  • ng-view

git checkout v1.0

Routing

  • ngRoute
    • configured through provider
    • listens for hash change (history hook)
    • arguments in $routeParams
  • ngView
    • holds "hydrated" view

Log in - Twitter

  • Dependency injection
  • Rest abstraction
  • twitter-api.js
  • ngResource / $resource

git checkout v1.1

Dependency injection

  • By JavaScript name
    • may result in obfuscation / minification issues
    • array-dialect as workaround
  • Can be:
    • Service - new instance of function
    • Factory - result returned by invoking function
    • Provider - a configurable factory (from config-phase of angular)

Rest abstraction

  • ngResource (injected as $resource)
  • Builds upon
    • $http service
    • Promises ($q service)
  • High-level abstract -> fluent REST interop

Retrieve tweets

  • Additional operation in twitter-api.js
  • Adding search functionality to main.js

git checkout v1.2

Filtering

  • "filter"-filter
  • Custom filter
    • single-arg function returning true / false
  • pipe in ngRepeat
    • ng-repeat="...| filter: <string|object>"
  • example: filtering on retrieved tweets

git checkout v1.3

Custom elements - Directives

  • Enhance the DOM
  • Re-usable components
  • Composable
  • example: google-maps.js

git checkout v1.4

Animation

  • ngAnimate module
  • Hooks into common AngularJS directives
    • ngRepeat
    • ngView
    • ngIf
    • ngSwitch
  • Enhanceable through $animate-service

git checkout v1.5

Animation methods

  • JavaScript based
  • CSS3 keyframe based
  • CSS3 transition based
    • example: main.scss

More information at:

THE END

BY Anders Bruhn Skarby / @askarby