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
• ur 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

JavaScript code.

Building AngularJS app

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

First steps

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

Set’s setup our editor before we begin

• Open Sublime Text 3
• Install Package Control
• Follow instructions from https://packagecontrol.io/installation
• Restart Sublime Text when instructed to do so
• Packages to install with package control
• This site suggests a few packages to install --

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
• Install SublimeLinter, SublimeLinter-jshint, and JSHint (via npm)
• Ctrl + Shift + P then enter “list p” to list installed packages

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.
• That's how we keep our code encapsulated.
• Because of this it makes our code more maintainable.

First Module

• 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.

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

Evaluating expressions

• Allow you to insert dynamic values into your HTML.

<p> 4 + 6 = {{4 + 6}} </p> <p> {{"hello" + " you"}} </p> Numerical

• peration

String

• peration

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
• nly 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/