Angular.js: Part II

Forms and APIs

{review}

M-V-C

Model: the data structure

View: visual display of your model (DOM)

Controller: manages models, retrieves data

M-V-C

controller

controller

Syntax/concept review

Angular directive

<input ng-model="name">

Angular expression

<text ng-repeat="title in titles">{{title}}</text>

Create a module

var myApp = angular.module('myApp', [])

Adding a controller

myApp.controller('myCtrl', function($scope) {
    // Get and set variables
})

{forms}

Forms

Forms are awesome

<!-- Angular HTML properties enforce restrictions -->
<input ng-minlength="NUMBER">

Angular functionality for validation, formatting

<!-- Stores variables for reference -->
myForm.name.$invalid
<!-- Conditional visibility -->
<p ng-show="myForm.name.$invalid">Error</p>
<!-- Conditional Classes -->
<p ng-class="{'DESIRED_CLASS' : EXPRESSION TO BE EVALUATED}"></p>

{fork then clone this repo}

{start running a local server}

cd Desktop/angular-2
python -m SimpleHTTPServer 8080
# See page at localhost:8080/form

{complete form exercise with a partner}

API

"Application Programming Interface"

Protocols, tools for building software

Exposes components (data) in specified formats

Allows web queries of content

Ajax request

Asynchronous data request

Syntax:

var data;
$.ajax({
     url:'https:..../json?year=2015&$limit=50000',
     type: "get",
     success:function(dat) {
       data = dat
       // Do something w/ your data!
     }, 
     dataType:"json"
}) 

Used to get/push data from servers/databases

Angular $http request

Angular applications often need data

Syntax:

var myApp = angular.module('myApp', [])

myApp.controller('myCtrl', function($scope, $http) {
    $http.get('URL')
         .then(function(response) {
                $scope.data = response.data
         })
    
})

Built in request format

{complete data-request exercise}

API

Spotify Challenge

Use a form for requesting data

Use directives to display data

Do something interesting

Assignments

Spotify challenge (due before class in one week)

angular2

By Michael Freeman