AngularJS Introduction Directives, Modules, Expressions, - PowerPoint PPT Presentation

AngularJS Introduction Directives, Modules, Expressions, Controllers

Why Angular • Good choice for creating dynamic website with JavaScript • Angular helps you organize your JavaScript • Angular helps you create responsive (fast) websites • Angular plays well with jQuery • Angular is easy to test

Traditional page-refresh- response cycle

Responsive webpage

RESTful applications

So what is AngularJS • A client-side JavaScript framework for adding interactivity to HTML • AngularJS is used to tell our HTML when to trigger our JavaScript • In AngularJS we add behavior to our HTML by using Directives. A marker on a HTML tag that tells Angular to run or reference some o JavaScript code.

Building AngularJS app • We will be building an AngularJS app from scratch • Flatlander Grafted Gems store app Thumbnails of different products o Can tab through different info about each of them o We have reviews and can add our own review using a form o

First steps • Download the framework from the official website Create a folder to develop app ( gemStore ) o Go to https://angularjs.org/ o Choose Stable branch (1.4.x) o Choose Minified build. o Download and save in gemStore folder o • Download bootstrap Go to http://getbootstrap.com/ o Download Bootstrap – compiled and minified CSS, JavaScript, and fonts o Save it in genStore folder and unzip it. o Copy bootstrap.min.css from nested css folder to gemStore. o o

Set’s setup our editor before we begin • Open Sublime Text 3 • Install Package Control Follow instructions from https://packagecontrol.io/installation o Restart Sublime Text when instructed to do so o • Packages to install with package control This site suggests a few packages to install -- o https://www.exratione.com/2014/01/setting-up-sublime-text-3-for- javascript-development/ Ctrl + Shift + P then enter “install p” to install a package o Install SublimeLinter, SublimeLinter-jshint, and JSHint (via npm) o Ctrl + Shift + P then enter “list p” to list installed packages o

Next Step • Create index.html and enter boilerplate html code. • Create app.js and write first piece of code – Module • Module: Where we write pieces of our Angular app. o That's how we keep our code encapsulated. o Because of this it makes our code more maintainable. o

First Module var app = angular.module('store', []); • angular => we are using the angularJS framework. • module => we are creating a module. • store => module name • [] => List of dependencies -- other libraries we might need. Use an empty array if none.

Evaluating expressions • Allow you to insert dynamic values into your HTML. <p> 4 + 6 = {{4 + 6}} Numerical </p> operation <p> {{"hello" + " you"}} String operation </p>

Working with Controllers • Controllers help us get data unto the page • Data is usually in the form of JavaScript objects • How do we get the data out of the variable that stores the JavaScript object unto our page? • Controllers are where we define our apps behavior by defining functions and values

Understanding Scope • Suppose we attached the store controller to a <div> element. • What would happen if we try to access one of the properties of the store controller outside the div? • The scope of a controller is constrained to the element to which it is attached.

Using built-in Directives • ng-app : attach the application module to the page. • ng-controller : attach a controller function to the page/element • ng-show : used with an expression. Show element only if expression evaluates to a truthy. • ng-hide : Hide element only if expression evaluates to a truthy. • ng-repeat : takes a special expression. Repeat a section for each item in an Array.

What we have learned so far • Directives - HTML annotations that trigger JavaScript behaviors. • Modules - Where our application components live. • Controllers - where we add application behavior. • Expressions - How values get displayed within the page.

Resources https://angularjs.org • https://code.angularjs.org/1.4.8/docs/api • http://campus.codeschool.com/courses/shaping-up-with- • angular-js/intro https://github.com/johnpapa/angular-styleguide • http://getbootstrap.com/css/ •