wELCOME TO THE

ANGULARJS

CODE CLUB

 

HELP YOURSELF TO PIZZA!

Angularjs cODE clUB

jAKE COLLINS, ADAM KELLY, ADAM KELSALL, IAN DERBYSHIRE

Introduction

  1. What you will need
  2. Overview of AngularJS Basics
  3. The Club (including Exercises)
    • Controllers
    • Services
    • Factories
    • Directives
    • Scope
  4. Wrap-up

What you will need

  1. Refreshments
  2. Laptop
  3. WiFi/Internet Access
  4. Install Google Chrome
  5. Download ZIP from GitHub 

 

Got all these? Let's get started!

What is Angularjs?

  • A JavaScript Framework, using HTML as view templates
  • MVC(*) - Model, View, Controller (Whatever)
  • Two versions - 1.* and 2
  • Open Source
  • Maintained mainly by Google
  • E2E testing
  • Hybrid-mobile Applications (Iconic, Cordova)

 

The Essential StRUCTURE

A single page application requires an essential structure to work. This is:

  1. index.html
  2. app.js (a main file that controls routing, etc)
  3. HTML views
  4. Controllers linked to views

 

The actual structure of the application can be in any format you like. There are however common practices, we'll be going over one type structure within the code club. This can be adapted to best suit you or the project.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
    </script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter your name">
      
      <h1>Welcome to the Code Club, {{yourName}}!</h1>
    </div>
  </body>
</html>

Getting Started - angular Bits

What do we have?

  1. ng-app directive - tells where the Angular should appear
  2. angular.min.js - load the AngularJS library from either external or local resource
  3. ng-model directive - One form of two-way binding, this links the input box and model. Any changes will reflect within the model 
  4. {{yourName}} - Display data from the model or scope. 
    1. What will happen with {{1+2}}?
codeClubApp.controller('HomeController', function($scope) {

    $scope.title = "NCL Code Club";

});

coNTROLLERS

The structure of the application, will place logic within controllers. Simple readable JavaScript will be written within these files. This is the code that sits behind the view.

 

 

 

 

.controller - within Angular we need define this as a controller

'HomeController' - Provide the controller to define what it is and must be unique.

$scope - inject dependencies within the brackets of function

  1. ​How can $scope.title be used?

EXERCISE!

Add two controllers, one template/view

codeClubApp.service('DataServices', function($http) {
    this.sayHello = function() {
        return "Hello, Code Club!"
    };
});

SERVICES

  • Services can be used to share data in your app, but also make reusable HTTP requests to third party API's
  • AngularJS will only invoke the service, if the application component, depends on it.  
  • What do you think this is doing?

EXERCISE!

Add service to pull data from our 'API'

FACTORIES

codeClubApp.factory('DataFactory', function($http) {
    return {
        listAttendees: () => $http.get('data/attendenceList.json'),
    };
});
  • Notice something? - Factories and Services have a very similar syntax, with very little between them.
  • What's the difference? - 
    • Factory - returns an object
    • Service - constructor method that is called with 'new'
  • Deep within AngularJS a service, renders a factory?! Weird, right?

EXERCISE!

Create basket factory for

storing its contents

ng-app - tell angular where the start of the app is

ng-repeat - repeats an object

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<h3>Hello World!!</h3>'
  };
});

Directives

  • AngularJS is built upon directives. These are prefixed with "ng-". These in-built directives help to speed up the process in creating a SPA.
  • There are two types of directives - those that are included within Angular, and those that are custom built.
  • Custom directives typically add some sort of behaviour to DOM elements

EXERCISE!

Add interpolation and ng-repeat

directive to display the movies

Scope

EXERCISE!

Add a function to add more

films to the movie page

lAST eXERCISE!

Combine knowledge to populate

basket contents and calculate total

WRAP UP

AngularJS Code Club

By Adam Kelly

Made with Slides.com

AngularJS Code Club

Slides to assist an angular code club

  • 311

More from Adam Kelly