Building web apps with – AngularJS

View Github Repository Open presentation in a new window

adamturtle

See all presentation from adamturtle

Building web apps with – AngularJS

0 0

AngularJS-Talk

On Github adamturtle / AngularJS-Talk

Building web apps with

AngularJS

What is Angular?

An open-source web application framework, maintained by Google and the community, that assists with creating single-page applications. Wikipedia

What is Angular?

  • JavaScript MVC framework
  • Released in 2009
  • Current version 1.3.0
  • Vanilla Javascript (mostly) – no dependencies
  • Declaritive programming style – what vs how

Angular Features

  • Efficient DOM manipulation
  • Write less code
  • Promotes better organisation of front-end logic
  • Works well with other libraries
  • Templating
  • Routing
  • Data binding
  • History manipulation
  • Ajax

When to use

  • Single-page applications
  • Projects interfacing with external API
  • Any project with data manipulations

Installing Angular

  <!doctype html>
    <html>
      <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js">
        </script>
      </head>
      <body>
      ...

Installing Angular

  $ bower install angular

Then add a <script> to your index.html:

  <script src="/bower_components/angular/angular.js"></script>

How Angular works

  • Directives, filters and data binding
  • Views, controllers and scope
  • Modules, routes and factories

Directives

Extends the functionality of HTML

Directives are markers on a DOM element that attach behaviours. Essentially creates components

what HTML would have been, had it been designed for building web-apps

AngularJS docs

Directives

ngApp

  <!doctype html>
    <html ng-app>
      <head>
        ...
      </head>
      <body>
      </body>
    </html>

Directive

"Angularizes" the page

"Sets the scope for the page

  <html ng-app>
    <head></head>

      <body ng-init="name='Nicolas Cage'">

        <p> Hello, {{ name }} </p>

      </body>
  </html>

Directive

Expression

ngRepeat

Filters

Modify output of directives and expressions

Filters

  <html ng-app>
    <head></head>

      <body ng-init="name='Nicolas Cage'">

        <p> Hello, {{ name | uppercase }} </p>

      </body>
  </html>

Filter

Proof

Data binding

Automatic synchronization of data between the model and view components.

The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

Angular Docs

Data binding

Data binding

Using a directive:

Data binding

Other directives/filters

Directives

  • ngClick
  • ngSubmit
  • ngShow / ngHide
  • ngClassngClassOddngClassEven
  • ngInclude

Filters

  • currency
  • date
  • limitTo
  • json

Of course, define your own directives and filters

MVC

Models ↔ Views ↔ Controllers

Connecting the parts together

$scope

$scope is the glue between the application controller and the view.

view  ↔  $scope  ↔  controller

  • Also known as "view model".
  • Views and controllers don't need to know about each other

$scope

Modules

Reusable containers for different features of your app.

Modules

Anatomy of a module

Creating a module

Dependency Injection

Easily manage the modules, services, factories etc. that your controller needs

AJAX using Dependency Injection

Models

Angular data providers

Models

Creating a service

Routing

Easy deep linking in single-page apps.

Routing

angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        template: 'partials/home.html',
      })
      .when('/about', {
        template: 'partials/about.html',
      })
      .when('/contact', {
          template: 'contact.html',
          controller: 'contactCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
})
.controller('contactCtrl', function($scope) {
   $scope.email = 'nicolas@cage.com';
    ...
});

Putting it all together

Turtle's amazing first Angular app

https://github.com/adamturtle/ExampleAngularApp

Final Thoughts

  • ☒ It's not for every project.
  • ☒Learning curve
  • ☑Promotes better code structure
  • ☑Easier for other devs in team
  • ☑May be better for SEO

Further reading

Thanks

for not falling asleep