11. Semantic Tags
Semantic tags clearly describes its meaning to both
the browser and the developer
Example: <header>, <nav>, <section>, <article>, <footer>
13. 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.
14. 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>
15. 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>
21. 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>
22. 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>
23. Inline Style
A type of styling where you can apply a unique style for a single element.
<h1 style=”color:red;”></h1>
25. CSS Selectors
CSS selectors are used to "find" (or select) HTML elements.
<!-- element --> <p></p>
<!-- id --> <p
id=""></p>
<!-- class --> <p
class=""></p>
26. Element Selector
The element selector selects elements based on the element name.
<!-- HTML --> <p></p>
<!-- CSS --> p {
<!-- Property Declaration --
>
}
27. 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
-->
}
28. class Selector
The class selector selects elements with a specific class attribute.
<!-- HTML --> <p class=””></p>
<!-- CSS --> .<!-- class name --> {
<!-- Property Declaration
-->
}
29. Bootstrap is the most popular HTML, CSS, JS framework
for responsive, mobile first projects on the web.
37. 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;
38. JS Arrays
var books = ["book1", "book2", "book3"];
or
var books = new Array("book1", "book2", "book3");
39. 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.
40. Accessing Arrays
var books = ["book1", "book2", "book3"];
var len = books.length; // = 3;
var firstElement = books[0]; // =
“book1”;
var lastElement = books[len-1]; // = “book3”;
43. JavaScript Objects
var book = { title: “Programming”, author: “Bill Gates” };
Accessing property of an object:
var title = book.title;
or
var author = book[‘author’];
46. 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
49. Commands
git clone
allows you to copy an existing Git repository
git checkout
allows you to switch branches
allows you to restore modified files
50. 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.
51.
52. 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
53. 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”
77. 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.
84. 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