Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Paypal
Weather.com
istockphoto.com
HTML 5 is a revision of the Hypertext Markup Language (HTML), the
standard markup language for describing the contents and...
HTML Code Structure
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Content -->
</body>
</html>
<Tags>
<html></html>
Non-semantic Tags
Tells nothing about its content
Example: <div>, <span>
HTML - Before
Semantic Tags
Semantic tags clearly describes its meaning to both
the browser and the developer
Example: <header>, <nav>, ...
HTML5 - Now
Default Display
Every HTML element has a default display value
depending on what type of element it is. The default
displa...
Block Elements
A block-level element always starts on a new line and
takes up the full width available (stretches out to t...
Inline Elements
An inline element does not start on a new line and only
takes up as much width as necessary.
Examples: <sp...
Attributes
Attributes provide additional information about HTML
elements.
Attribute Examples
<!-- lang --> <html lang=“en”></html>
<!-- title --> <p title=“Header Text”></p>
<!-- a --> <a href=“/a...
CSS stands for Cascading Style Sheet. It is a stylesheet language
that describes the presentation of an HTML.
Style Sheet
It’s what the browser reads for the HTML document to
be formatted according to the information provided.
3 Ways to Insert CSS
External Style Sheet
A type of styling where you can make a separate CSS stylesheet file from
your HTML file.
<head>
<link...
Internal Style Sheet
A type of style where you can apply an entire stylesheet inside a html file.
<head>
<style>
body {
ba...
Inline Style
A type of styling where you can apply a unique style for a single element.
<h1 style=”color:red;”></h1>
Syntax
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements.
<!-- element --> <p></p>
<!-- id --> <p
id=""></...
Element Selector
The element selector selects elements based on the element name.
<!-- HTML --> <p></p>
<!-- CSS --> p {
<...
id Selector
The id selector uses the id attribute/name of an HTML element to
select a specific element.
<!-- HTML --> <p i...
class Selector
The class selector selects elements with a specific class attribute.
<!-- HTML --> <p class=””></p>
<!-- CS...
Bootstrap is the most popular HTML, CSS, JS framework
for responsive, mobile first projects on the web.
Installation
Link: http://getbootstrap.com/getting-started/
Bootstrap CDN:
<head>
<link rel=”stylesheet”
href=”https://max...
Grid System
Bootstrap’s grid system allows up to 12 columns across the page.
The number in the .col-lg-* classes indicates how many columns the div should span (out of 12).
Grid Example:
Example
<div class="container">
<section class="col-lg-8">
<!-- content →
</section>
<section class="col-lg-4">
<!-- conte...
JavaScript is the programming language of HTML and the Web.
JS Variables
var y = 1;
var pi = 3.14;
var str = “This is a string”;
var x;
Arithmetic Operators
Operators Description Example Result
+ Addition x + 2 7
- Subtraction x - 2 3
* Multiplication x * 2 ...
Comparison Operators
Operators Description Example Result
== Equal x == 5 true
!= Not equal x != 5 false
> Greater than x ...
JS Arrays
var books = ["book1", "book2", "book3"];
or
var books = new Array("book1", "book2", "book3");
Properties of Arrays
Property Description
Length Refers to the number of
elements inside an array
Index Used to access or ...
Accessing Arrays
var books = ["book1", "book2", "book3"];
var len = books.length; // = 3;
var firstElement = books[0]; // ...
Functions
Syntax:
function functionName(parameters) {
// code to perform a certain task
}
function getSum(a, b) {
return a...
JavaScript Objects
Analogy:
Book is an object.
Book has properties like title and author.
JavaScript Objects
var book = { title: “Programming”, author: “Bill Gates” };
Accessing property of an object:
var title =...
DOM
Document Object Model is the programming interface of the HTML.
DOM as Tree
Power of JS
With the object model, JavaScript gets all the power it needs to
create dynamic HTML:
JavaScript can change al...
Manipulating DOM
<p id=“demo”>Demo</p>
var x = document.getElementById(“demo”);
x.style.color = "red";
https://git-scm.com/
Commands
git clone
allows you to copy an existing Git repository
git checkout
allows you to switch branches
allows you to ...
Git Installation
1.Go to: https://git-scm.com/downloads
2.Click the appropriate link depending on your operating
system.
3...
Cloning
1. Open git bash
2. cd /Users/username/Desktop
3. git clone https://github.com/GAPLabs/webcamp2016-angularjs.git
4...
DEMO Application
Chunks of application development, follow along as I discuss:
STEP - 1 “Setting Up an Angular App”
STEP -...
Step-1 takeaways
Bootstrapping an Angular App using ng-app directive
Angular expressions
Step-1 Branch
git checkout step-1
ng-app syntax
<element ng-app> </element>
Evaluating Expression
{{ expression }}
Angular Conceptual Overview
Restore Step-1 Branch
git checkout index.html
Step-2 takeaways
Data Binding using ng-model directive
Step-2 Branch
git checkout step-2
ng-model syntax
<element ng-model="name"> </element>
Restore Step-2 Branch
git checkout index.html
Step-3 takeaways
Angular Modules
Angular MVC Architecture using $scope object
Looping your array using ng-repeat directive
Step-3 Branch
git checkout step-3
Modules
Modules serves as the container of controllers
Module Syntax
angular.module(module_name, [dependencies])
ng-app syntax with module name
<element ng-app="module name"> </element>
Model, View, Controller Architecture
Controller Syntax
var moduleObj = angular.module(module_name, [dependencies]);
moduleObj.controller(controller_name, funct...
$scope object
ng-controller syntax
<element ng-controller="controller name"> </element>
ng-repeat syntax
<element ng-repeat="expression"> </element>
Restore Step-3 Branch
git checkout
index.html
git checkout js/app.js
Step-4 takeaways
Filters in Angular
Step-4 Branch
git checkout step-4
AngularJS Filters
currency - Format a number to a currency format.
date - Format a date to a specified format.
filter - Se...
Restore Step-4 Branch
git checkout index.html
Step-5 Branch
git checkout step-5
Step - 5 takeaways
Event handling using ng-click directive
ng-click syntax
<element ng-click="expression"> </element>
Restore Step-5 Branch
git checkout index.html
git checkout js/app.js
ACTIVITY Branch
git checkout step-6
Activity
Allow users to delete a book
a. Create a delete function in your controller
HINTS:
- use JS Array splice()
- each...
ng-Show syntax
<element ng-show="expression"> </element>
Angular JS
Angular JS
Upcoming SlideShare
Loading in …5
×

Angular JS

312 views

Published on

A GapLabs WebCamp 2016 Presentation For Angular JS talk.

Published in: Engineering
  • Be the first to comment

Angular JS

  1. 1. Paypal
  2. 2. Weather.com
  3. 3. istockphoto.com
  4. 4. HTML 5 is a revision of the Hypertext Markup Language (HTML), the standard markup language for describing the contents and appearance of Web pages.
  5. 5. HTML Code Structure <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- Content --> </body> </html>
  6. 6. <Tags>
  7. 7. <html></html>
  8. 8. Non-semantic Tags Tells nothing about its content Example: <div>, <span>
  9. 9. HTML - Before
  10. 10. Semantic Tags Semantic tags clearly describes its meaning to both the browser and the developer Example: <header>, <nav>, <section>, <article>, <footer>
  11. 11. HTML5 - Now
  12. 12. Default Display Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
  13. 13. Block Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples: <div>, <h1> - <h6>, <p>
  14. 14. Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. Examples: <span>, <a>, <img>
  15. 15. Attributes Attributes provide additional information about HTML elements.
  16. 16. Attribute Examples <!-- lang --> <html lang=“en”></html> <!-- title --> <p title=“Header Text”></p> <!-- a --> <a href=“/about.html”></a> <!-- script --> <script src=“https://use.fontawesome.com/9acf1d0516.js”></script> <!-- input --> <input type=“text”> <!-- img --> <img src=“images/photo.jpg” alt=“”> <!-- link --> <link href=“https://fonts.googleapis.com/css?”>
  17. 17. CSS stands for Cascading Style Sheet. It is a stylesheet language that describes the presentation of an HTML.
  18. 18. Style Sheet It’s what the browser reads for the HTML document to be formatted according to the information provided.
  19. 19. 3 Ways to Insert CSS
  20. 20. External Style Sheet A type of styling where you can make a separate CSS stylesheet file from your HTML file. <head> <link href=”stylesheets/style.css” rel=”stylesheet” /> </head>
  21. 21. Internal Style Sheet A type of style where you can apply an entire stylesheet inside a html file. <head> <style> body { background-color: red; } </style> </head>
  22. 22. Inline Style A type of styling where you can apply a unique style for a single element. <h1 style=”color:red;”></h1>
  23. 23. Syntax
  24. 24. CSS Selectors CSS selectors are used to "find" (or select) HTML elements. <!-- element --> <p></p> <!-- id --> <p id=""></p> <!-- class --> <p class=""></p>
  25. 25. Element Selector The element selector selects elements based on the element name. <!-- HTML --> <p></p> <!-- CSS --> p { <!-- Property Declaration -- > }
  26. 26. id Selector The id selector uses the id attribute/name of an HTML element to select a specific element. <!-- HTML --> <p id=””></p> <!-- CSS --> #<!-- id name --> { <!-- Property Declaration --> }
  27. 27. class Selector The class selector selects elements with a specific class attribute. <!-- HTML --> <p class=””></p> <!-- CSS --> .<!-- class name --> { <!-- Property Declaration --> }
  28. 28. Bootstrap is the most popular HTML, CSS, JS framework for responsive, mobile first projects on the web.
  29. 29. Installation Link: http://getbootstrap.com/getting-started/ Bootstrap CDN: <head> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/3.3.6/css/bootstrap.min.css”> </head>
  30. 30. Grid System Bootstrap’s grid system allows up to 12 columns across the page.
  31. 31. The number in the .col-lg-* classes indicates how many columns the div should span (out of 12). Grid Example:
  32. 32. Example <div class="container"> <section class="col-lg-8"> <!-- content → </section> <section class="col-lg-4"> <!-- content → </section> </div>
  33. 33. JavaScript is the programming language of HTML and the Web.
  34. 34. JS Variables var y = 1; var pi = 3.14; var str = “This is a string”; var x;
  35. 35. Arithmetic Operators Operators Description Example Result + Addition x + 2 7 - Subtraction x - 2 3 * Multiplication x * 2 10 / Division x / 2 2.5 let x = 5;
  36. 36. Comparison Operators Operators Description Example Result == Equal x == 5 true != Not equal x != 5 false > Greater than x > 5 false >= Greater than or equal to x >= 5 true < Less than x < 5 false <= Less than or equal to x <= 5 true let x = 5;
  37. 37. JS Arrays var books = ["book1", "book2", "book3"]; or var books = new Array("book1", "book2", "book3");
  38. 38. Properties of Arrays Property Description Length Refers to the number of elements inside an array Index Used to access or refer to an element in an array.
  39. 39. Accessing Arrays var books = ["book1", "book2", "book3"]; var len = books.length; // = 3; var firstElement = books[0]; // = “book1”; var lastElement = books[len-1]; // = “book3”;
  40. 40. Functions Syntax: function functionName(parameters) { // code to perform a certain task } function getSum(a, b) { return a + b; } var sum = getSum(4, 3);
  41. 41. JavaScript Objects Analogy: Book is an object. Book has properties like title and author.
  42. 42. JavaScript Objects var book = { title: “Programming”, author: “Bill Gates” }; Accessing property of an object: var title = book.title; or var author = book[‘author’];
  43. 43. DOM Document Object Model is the programming interface of the HTML.
  44. 44. DOM as Tree
  45. 45. Power of JS With the object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes
  46. 46. Manipulating DOM <p id=“demo”>Demo</p> var x = document.getElementById(“demo”); x.style.color = "red";
  47. 47. https://git-scm.com/
  48. 48. Commands git clone allows you to copy an existing Git repository git checkout allows you to switch branches allows you to restore modified files
  49. 49. Git Installation 1.Go to: https://git-scm.com/downloads 2.Click the appropriate link depending on your operating system. 3.Follow the instructions in downloading git. 4.For Windows users, run the git bash desktop application once the application has been downloaded.
  50. 50. Cloning 1. Open git bash 2. cd /Users/username/Desktop 3. git clone https://github.com/GAPLabs/webcamp2016-angularjs.git 4. cd webcamp2016-angularjs Viewing 1.Go to webcamp2016-angularjs folder in desktop 2.Open index.html in chrome browser Cloning and Viewing Demo App
  51. 51. DEMO Application Chunks of application development, follow along as I discuss: STEP - 1 “Setting Up an Angular App” STEP - 2 “Knowing Data Binding” STEP - 3 “Angular App Development Pattern” STEP - 4 “How to Filter Your Data” STEP - 5 “Wrapping Up Our App”
  52. 52. Step-1 takeaways Bootstrapping an Angular App using ng-app directive Angular expressions
  53. 53. Step-1 Branch git checkout step-1
  54. 54. ng-app syntax <element ng-app> </element>
  55. 55. Evaluating Expression {{ expression }}
  56. 56. Angular Conceptual Overview
  57. 57. Restore Step-1 Branch git checkout index.html
  58. 58. Step-2 takeaways Data Binding using ng-model directive
  59. 59. Step-2 Branch git checkout step-2
  60. 60. ng-model syntax <element ng-model="name"> </element>
  61. 61. Restore Step-2 Branch git checkout index.html
  62. 62. Step-3 takeaways Angular Modules Angular MVC Architecture using $scope object Looping your array using ng-repeat directive
  63. 63. Step-3 Branch git checkout step-3
  64. 64. Modules Modules serves as the container of controllers
  65. 65. Module Syntax angular.module(module_name, [dependencies])
  66. 66. ng-app syntax with module name <element ng-app="module name"> </element>
  67. 67. Model, View, Controller Architecture
  68. 68. Controller Syntax var moduleObj = angular.module(module_name, [dependencies]); moduleObj.controller(controller_name, function($scope){ });
  69. 69. $scope object
  70. 70. ng-controller syntax <element ng-controller="controller name"> </element>
  71. 71. ng-repeat syntax <element ng-repeat="expression"> </element>
  72. 72. Restore Step-3 Branch git checkout index.html git checkout js/app.js
  73. 73. Step-4 takeaways Filters in Angular
  74. 74. Step-4 Branch git checkout step-4
  75. 75. AngularJS Filters currency - Format a number to a currency format. date - Format a date to a specified format. filter - Select a subset of items from an array. lowercase - Format a string to lower case. uppercase - Format a string to upper case.
  76. 76. Restore Step-4 Branch git checkout index.html
  77. 77. Step-5 Branch git checkout step-5
  78. 78. Step - 5 takeaways Event handling using ng-click directive
  79. 79. ng-click syntax <element ng-click="expression"> </element>
  80. 80. Restore Step-5 Branch git checkout index.html git checkout js/app.js
  81. 81. ACTIVITY Branch git checkout step-6
  82. 82. Activity Allow users to delete a book a. Create a delete function in your controller HINTS: - use JS Array splice() - each ng-repeat item has $index a. Attach the delete method to each delete button b. Display “No books found” if all books are deleted HINT: - use ng-show directive
  83. 83. ng-Show syntax <element ng-show="expression"> </element>

×