Download - Introduction to angular js july 6th 2014
![Page 2: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/2.jpg)
TRADITIONAL PAGE REQUEST
!Backend Application!
Database!
Server Response with Webpage and Assets
Client Side!Server Side!
Javascript
CSS
HTML
Request URL from server
New Request to server
Server Response with Webpage and Assets
![Page 3: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/3.jpg)
TRADITIONAL WEB APP MODERN PAGE REQUEST
!Backend Application!
Database!
Server Response with JSON Data
Server Response with Webpage and Assets
Client Side!Server Side!
Javascript
CSS
HTML
Request URL from server
New Request to server
![Page 4: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/4.jpg)
TYPICAL APP ARCHITECTURE
Client
Server
Database
![Page 5: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/5.jpg)
WHAT IS ANGULARJS?❖ Client-side MVC framework: http://angularjs.org
❖ Problem: Updating page without reload
❖ Solution: Angular.js declarative, 2-way data binding
<html> <head></head> <body> ... </body> </html> !!
function Hello(){ alert('Hi there!'); } !
index.html app.js
![Page 6: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/6.jpg)
❖ ANGULAR JS
➡ download from http://angularjs.org
➡ angular.min.js
❖ TWITTER BOOTSTRAP
➡ download from http://getbootstrap.com
➡ bootstrap.min.css
HOW TO GET STARTED?
![Page 7: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/7.jpg)
TEMPLATE START
<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src=“js/angular.min.js"></script> </head> <body> </body> </html>
STARTING TEMPLATE
index.html
![Page 8: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/8.jpg)
DIRECTIVES
❖ Directive: marker on a HTML element (such as an attribute,
element name, comment or CSS class) that tell the angular
compiler to attach a specified behavior to the HTML element.
<html> <head></head> <body ng-controller="Hello"> ... </body> </html> !!
index.html
function Hello(){ alert('Hi there!'); } !
app.js
![Page 9: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/9.jpg)
MODULES
❖ Modules: Apps are structured in modules that can depend on
other modules and can contain controllers, services, directives
and filters
// declare a module var app = angular.module("myApp", []);
app.js
module API module name dependencies
index.html
<!—- reference the new module —> <html ng-app="myApp"></html>
to bootstrap the module use the directive
ng-app to reference module by name
![Page 10: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/10.jpg)
SAMPLE CODE
index.html
<!DOCTYPE html> <!—- reference the new module module —-> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <!--include our new module--> <script type="text/javascript" src="js/app.js"></script> </head> <body>
</body> </html>
SAMPLE CODE
![Page 11: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/11.jpg)
Expressions
❖ Expressions: JavaScript-like code snippets that are usually
placed in bindings such as {{ expression }}.
index.html
numeric operation
string operation
<p> {{"I have "}} {{4 + 6}} dollars </p>
<p> I have 10 dollars </p> //after evaluation
![Page 12: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/12.jpg)
SAMPLE CODE
index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> </body> </html>
SAMPLE CODE
<p> {{"I have "}} {{4 + 6}} dollars </p>
![Page 13: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/13.jpg)
CONTROLLERS
❖ Controllers: contain the application behavior. Controllers
populate the scope with all the necessary data for the view.
❖ Using proper separation of concerns, controllers should never
contain anything related to the DOM.
app.js
var info = { firstName: 'John', lastName:'Smith', email: '[email protected]', phone:'777.922.2321' };
var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ ! });
app.js
![Page 14: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/14.jpg)
SAMPLE CODE
app.js
var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; }); !var info = { firstName: 'John', lastName:'Smith', email: '[email protected]', phone:'777.922.2321' };
STORE DATA IN CONTROLLER
![Page 15: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/15.jpg)
SAMPLE CODE
index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> ! !!!!! </body> </html> !
WHERE TO ADD ON HTML
<h1>Contact Info</h1> <div> <label>First Name:</label><br/> <label>Last Name:</label><br/> <label>Email:</label><br/> <label>Phone Number:</label> </div>
![Page 16: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/16.jpg)
SAMPLE CODE
index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> <h1>Contact Info</h1> <div ng-controller="ContactsController as contacts"> <label>First Name:</label><br/> <label>Last Name:</label><br/> <label>Email:</label><br/> <label>Phone Number:</label> </div> </body> </html> !
ATTACHING CONTROLLER
directive controller name
alias
![Page 17: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/17.jpg)
SAMPLE CODE
index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> <h1>Contact Info</h1> <div ng-controller="ContactsController as contacts"> <label>First Name: {{contacts.contact.firstName}}</label><br/> <label>Last Name: {{contacts.contact.lastName}}</label><br/> <label>Email: {{contacts.contact.email}}</label><br/> <label>Phone Number: {{contacts.contact.phone}}</label> </div> </body> </html> !
DISPLAY CONTACT
![Page 18: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/18.jpg)
SCOPE
❖ Scope: an object that refers to the application model. It is an
execution context for expressions.
❖ Scopes are arranged in hierarchical structure which mimic the
DOM structure of the application.
❖ Scopes can watch expressions and propagate events.
![Page 19: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/19.jpg)
SAMPLE CODE
index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body> <h1>Contact Info</h1> <div ng-controller="ContactsController as contacts"> <label>First Name: {{contacts.contact.firstName}}</label><br/> <label>Last Name: {{contacts.contact.lastName}}</label><br/> <label>Email: {{contacts.contact.email}}</label><br/> <label>Phone Number: {{contacts.contact.phone}}</label> </div> {{contacts.contact.phone}} <!—-will not print a value —-> </body> </html> !
UNDERSTANDING SCOPE
![Page 20: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/20.jpg)
SAMPLE CODE
<body ng-controller="ContactsController as contacts"> <div > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model=“contacts.newContact.firstName”/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/> </div> </body> index.html
INSERT NEW CONTACT
![Page 21: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/21.jpg)
SAMPLE CODE
<body ng-controller="ContactsController as contacts"> <button type="button">Add Contact</button> ! <div > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model=“contacts.newContact.firstName”/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/> </div> </body> index.html
ADDING A BUTTON
![Page 22: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/22.jpg)
SAMPLE CODE
<body ng-controller="ContactsController as contacts"> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> ! <div > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model=“contacts.newContact.firstName”/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model=“contacts.newContact.phone"/> </div> </body> index.html
ADDING A BUTTON
directive
event name method name parameters
![Page 23: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/23.jpg)
SAMPLE CODE
<body ng-controller"ContactsController as contacts”> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> ! <div ng-show="contacts.isAddNewContact" > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model="contacts.newContact.firstName"/> <br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model=“contacts.newContact.phone"/> </div> </body> index.html
SET VISIBILITY
![Page 24: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/24.jpg)
SAMPLE CODE
app.js
var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; this.newContact ={}; this.isAddNewContact = false; this.addNewContact = function(){ this.isAddNewContact = true; } }); !var info = { firstName: 'John', lastName:'Smith', email: '[email protected]', phone:'777.922.2321' });
ADD DATA IN CONTROLLER
![Page 25: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/25.jpg)
SAMPLE CODE
<body ng-controller="ContactsController as contacts"> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> ! <div ng-show="contacts.isAddNewContact" > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model="contacts.newContact.firstName"/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/> <button type="button" ng-click="contacts.saveContact()">Save</button> </div> </body>
index.html
ADD SAVE BUTTON
![Page 26: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/26.jpg)
SAMPLE CODE
app.js
var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; this.newContact ={}; this.isAddNewContact = false; this.addNewContact = function(){ this.isAddNewContact = true; }; this.saveContact = function(){ this.contact = this.newContact; this.isAddNewContact = false; } });
SAVE IN CONTROLLER
![Page 28: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/28.jpg)
Resources
![Page 29: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/29.jpg)
!
❖ Courses -http://campus.codeschool.com/courses/shaping-up-with-angular-js
❖ AngularJS - http://angularjs.org
![Page 30: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/30.jpg)
SAMPLE CODE
index.html
<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body ng-controller="ContactsController as contacts"> <button type="button" ng-click="contacts.addNewContact()">Add Contact</button> <div ng-show="contacts.isAddNewContact" > <h1>New Contact Info</h1> <label>First Name:</label> <input type="text" ng-model="contacts.newContact.firstName"/><br/> <label>Last Name:</label> <input type="text" ng-model="contacts.newContact.lastName"/><br/> <label>Email:</label> <input type="text" ng-model="contacts.newContact.email"/><br/> <label>Phone Number:</label> <input type="text" ng-model="contacts.newContact.phone"/><br/> <button type="button" ng-click="contacts.saveContact()">Save Contact</button> </div> <h1>Contact Info</h1> <div > <label>First Name: {{contacts.contact.firstName}}</label> <label>Last Name: {{contacts.contact.lastName}}</label> <label>Email: {{contacts.contact.email}}</label> <label>Phone Number: {{contacts.contact.phone}}</label> </div> </body> </html>
FULL HTML
![Page 31: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/31.jpg)
SAMPLE CODE
app.js
(function(){ var app = angular.module('myApp', [ ]); app.controller('ContactsController', function(){ this.contact = info; this.newContact ={}; this.isAddNewContact = false; this.addNewContact = function( ){ this.isAddNewContact = true; }; this.saveContact = function(){ this.contact = this.newContact; this.isAddNewContact = false; } }); var info = { firstName: 'John', lastName:'Smith', email: '[email protected]', phone:'777.922.2321' }; !})();
FULL JS
![Page 32: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/32.jpg)
Angular Components: 1 of 3
❖ Modules: Apps are structured in modules that can depend on other
modules and can contain controllers, services, directives and filters
❖ Controllers contain the application behavior. Controllers populate
the scope with all the necessary data for the view. Using proper
separation of concerns, controllers should never contain anything
related to the DOM.
❖ Scope is used to link the controllers and the views to which they
are binded
![Page 33: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/33.jpg)
Angular Components: 2 of 3
❖ Directives: allows you to extend HTML to answer the needs of web
applications. Directives let you specify how your page should be
structured for the data available in a given scope.
❖ Data Binding: allow defining the binding between the data in the
scope and the content of the views.
❖ Filters: allow modifying the way data is displayed.
❖ Partial Views: used specially in single page applications.
![Page 34: Introduction to angular js july 6th 2014](https://reader033.vdocument.in/reader033/viewer/2022052321/54b73dc44a7959be4c8b4839/html5/thumbnails/34.jpg)
Angular Components: 3 of 3
❖ Services: allow reusing code that should be abstracted from
controller. Services can be injected in controllers or in other
services.
❖ Dependency Injection: retrieves some elements of the application
that should be configured when the module will be loaded
❖ Events: $broadcast and $emit