SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS AngularJS is a client-side...

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

AngularJSAngularJS

AngularJS is a client-side JavaScript Framework for adding interactivity to HTML

Some features & benefits: Keeps your JavaScript more simple and organized Plays nice with jQuery Fast Promotes maintainable software

Note: These slides and what we go over today is just the tip of the iceberg. This is just to get you started and does not cover many best practices, code organization, etc. I recommend taking an online class on AngularJS (links on the website).


AngularJSAngularJSClient-SideAngularJS is for front-end (client-side) development only.

You can use it with JavaScript and/or jQuery to manipulate the DOM, make web service calls, etc.

Communicates with Server-SideAngularJS, like jQuery and JavaScript, can be written to

communicate with a back-end (server-side) API.


Getting StartedGetting StartedGo to angularjs.org and grab the AngularJS JavaScript file to include

in your web page.


Debugging AngularDebugging AngularIf you get an error message in your console, it's probably not going to be very

readable. To make it easier to debug your application, temporarily include the non-minified AngularJS file in your HTML.

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>


DirectivesDirectivesA directive connects an HTML tag to JavaScript code.

You can mark an HTML tag with a directive that is associated with a JavaScript function.


ModulesModulesA module contains a part of your application. You can have multiple

modules, each separated logically into different sections.

This helps keep your code organized and maintainable.

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

app.js

Create a module NameDependency InjectionLeave empty for now

yourPage.html

<html ng-app=”myApp”>

Directive


ExpressionsExpressionsExpressions are written directly into your HTML page.

They are wrapped in double curly brackets {{ your expression }}

Try these:

<h1>{{“hello” + “, world!”}}</h1>

<p>2 + 2 = {{2 + 2}}</p>

In order for this to work, you will need to have a module in place to tell Angular that you want the expressions inside your module's HTML to be evaluated.


ControllersControllersControllers let you define properties and functions and attach them to your

HTML.

app.controller(“MyAppController”, function() {

this.someProperty = “someValue”;

});


ControllersControllersYour controller's name should be camel case and have “Controller” at the

end



});


ControllersControllersThe second parameter is an anonymous function. It will be executed

when the controller is called in the HTML.



});


ControllersControllers

Set property values and make functions associated with your controller



this.someFunction = function (param1, param2) {...

}

});


ClosureClosure

Wrap the whole thing in a JavaScript closure. This creates a separate scope for the code contained in the closure, and the () at the end means the function will be executed right after it's read.

(function () {var app = angular.module(“myApp”, [ ]);app.controller(“MyAppController”, function() {

});})();


ng-controllerng-controllerYou have your controller defined in JavaScript, now attach it to your HTML.

You pick which part of your HTML you want to use the controller.

<div ng-controller=”MyAppController as appCtrl”><h1>{{appCtrl.title}}

</div>

“as appCtrl” gives the MyAppController an alias of “appCtrl”


ng-show and ng-hide Directivesng-show and ng-hide DirectivesToggle the visibility of an element based on an expression

<p ng-show=”appCtrl.seeMe”>...</p>

<p ng-hide=”appCtrl.hideMe”>...</p>


ng-repeat Directiveng-repeat DirectiveLoop over items in an array with ng-repeat:

<table ng-controller=”StoreController as storeCtrl”> <tr ng-repeat=”product in storeCtrl.products”> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr></table>


ng-click Directiveng-click DirectiveEvaluate an expression when an element is clicked:

You have selected product #{{selected}}<button type=”button” ng-click=”selected = 1”>First

Product</button><button type=”button” ng-click=”selected = 2”>Second

Product</button>

This is a silly example, not very useful, but it demonstrates ng-click.


2-Way Data Binding2-Way Data BindingAngularJS supports 2-way data binding. You can display (read) the value of a property on the screen using an expression.

Additionally, if you change the value of a property (like we just did with ng-click) or allow the user to enter a value for the property into an input field, it will be immediately updated everywhere else on the screen and in the markup.

This is where things start getting pretty cool!!


2-Way Data Binding – Silly 2-Way Data Binding – Silly ExampleExample

This will create a button that complains if you click it too many times. The code is simple – it's all right here (though you do have to create your module and put it in an ng-app directive).

<span ng-show=”clicks < 5”>Thanks for clicking!

</span><span ng-show=”clicks >= 5”>

Stop clicking me!!</span><button ng-click=”clicks = clicks + 1”>Click</button>


2-Way Data Binding – Silly 2-Way Data Binding – Silly ExampleExample

That example is fine, it works (even if it's nonsense), but there is only so much logic we can put inside ng-click before it gets ugly.

Instead, use a controller:

<div ng-controller=”MyAppController as myCtrl”><span ng-show=”myCtrl.clicks < 5”>

Thanks for clicking!</span><span ng-show=”myCtrl.clicks >= 5”>

Stop clicking me!!</span><button ng-click=”myCtrl.click()”>Click</button>

</div>


ng-classng-class<span ng-class=”{ special: myCtrl.isSpecial }”>Hello</span>

This span will have the CSS class special applied to it if the expression myCtrl.isSpecial evaluates to true.


ng-srcng-srcImportant note regarding images:

If you want to specify the URL to an image using an AngularJS expression, you cannot simply type:

<img src=”{{someExpression}}” />

Due to timing of when the image loads vs when the expression is evaluated, you have to use the ng-src directive:

<img ng-src=”{{someExpression}}” />


FiltersFiltersMake a price look like a currency using a filter:

{{product.price | currency}}

The pipe here is much like a pipe in UNIX commands. This means “send the output of the first expression into the second expression.”

currency is an expression built into AngularJS.

Options – Some filters let you specify options

{{ someDate | date:'MM/dd/yyyy' }}


FiltersFiltersOther filters available:currencydatejsonlimitTolowercasenumberorderByuppercase


ng-model Directiveng-model Directive<h1>Hello, {{firstName}}!</h1><input type=”text” ng-model=”firstName”/>

Bind a form element to a property


ServicesServicesAngularJS has built in services for web service calls, logging, etc.

One way to make a web service call, similar to how we did it with jQuery:

$http.get('URL', {parameter:value, parameter:value}).success(function(data) {

//callback});


Dependency InjectionDependency InjectionYou can't use the $http service in AngularJS at first. You have to inject it into your controller like so:

app.controller('MyAppController', ['$http', function($http) {

}]);

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS AngularJS is a client-side...

Documents

Transcript of SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS AngularJS is a client-side...