SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS 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).

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAngularJS Client-Side AngularJS 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-Side AngularJS, like jQuery and JavaScript, can be written to communicate with a back-end (server-side) API.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery Getting Started Go to angularjs.org and grab the AngularJS JavaScript file to include in your web page.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery Debugging Angular If 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.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryDirectives A directive connects an HTML tag to JavaScript code. You can mark an HTML tag with a directive that is associated with a JavaScript function.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryModules A 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 Name Dependency Injection Leave empty for now yourPage.html Directive

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryExpressions Expressions are written directly into your HTML page. They are wrapped in double curly brackets {{ your expression }} Try these: {{“hello” + “, world!”}} = {{2 + 2}} 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.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryControllers Controllers let you define properties and functions and attach them to your HTML. app.controller(“MyAppController”, function() { this.someProperty = “someValue”; });

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryControllers Your controller's name should be camel case and have “Controller” at the end app.controller(“MyAppController”, function() { this.someProperty = “someValue”; });

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryControllers The second parameter is an anonymous function. It will be executed when the controller is called in the HTML. app.controller(“MyAppController”, function() { this.someProperty = “someValue”; });

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryControllers Set property values and make functions associated with your controller app.controller(“MyAppController”, function() { this.someProperty = “someValue”; this.someFunction = function (param1, param2) {... } });

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryClosure 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() { }); })();

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryng-controller You 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. {{appCtrl.title}} “as appCtrl” gives the MyAppController an alias of “appCtrl”

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery ng-show and ng-hide Directives Toggle the visibility of an element based on an expression...

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery ng-repeat Directive Loop over items in an array with ng-repeat: {{product.name}} {{product.price}}

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery ng-click Directive Evaluate an expression when an element is clicked: You have selected product #{{selected}} First Product Second Product This is a silly example, not very useful, but it demonstrates ng-click.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery 2-Way Data Binding AngularJS 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!!

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery 2-Way Data Binding – Silly Example 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). Thanks for clicking! = 5”> Stop clicking me!! Click

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery 2-Way Data Binding – Silly Example 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: Thanks for clicking! = 5”> Stop clicking me!! Click

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryng-class Hello This span will have the CSS class special applied to it if the expression myCtrl.isSpecial evaluates to true.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryng-src Important note regarding images: If you want to specify the URL to an image using an AngularJS expression, you cannot simply type: Due to timing of when the image loads vs when the expression is evaluated, you have to use the ng-src directive:

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryFilters Make 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' }}

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryFilters Other filters available: currency date json limitTo lowercase number orderBy uppercase

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery ng-model Directive Hello, {{firstName}}! Bind a form element to a property

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryServices AngularJS 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 });

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery Dependency Injection You 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) { }]);