Up and running with Angular 7 in 7 minutes

1. Install node js

https://nodejs.org/en/download/

Verify by checking versions as follows.

node -v
npm -v



2. Install the latest version of Angular CLI

npm install -g @angular/cli

Verify by checking version.

ng version

2.1 Install specific version of Angular CLI

// uninstall previous version of angular cli

npm uninstall -g @angular/cli

npm cache clean

// install a specific version of angular

npm i -g  @angular/cli@8.3.29

3. Install Git

https://git-scm.com/downloads

// Use without --global if setting these values on project by project basis
git config --global user.email
git config --global user.name

If a valid email and name is not displayed, set one up using:

git config --global user.email "email@example.com"
git config --global user.name"Your Name"



4. Verify Sass is installed

Verify by checking version.

npm sass -v

If not installed:

npm install -g sass




5. Create an Angular app

Change to directory where you would like to create the application.

ng new helloang

Routing: Yes
Choose Sass



6. Serve the application

cd helloang

ng serve --open

Setting up a simple HTTP Server for local web development

watch-http-server

It works similarly to http-server but automatically reloads the webpage when it changes on disk. This is very useful during developement.

npm install -g watch-http-server

See: watch-http-server


1. Install NodeJS from https://nodejs.org

2.  Install watch-http-server or http-server npm package

npm install -g watch-http-server

or

npm install -g http-server

3. From command line, change to the directory containing your static web files (e.g. html, javascript, css etc) in the command line window, e.g:

cd \temp\website

4. Start the server from the website directory with following command line command.

watch-http-server -o -a localhost

or

http-server


Or run it with more more options

watch-http-server --help

C:\Users\srazzaq>watch-http-server --help
usage: http-server [path] [options]

options:
  -p                 Port to use [8080]
  -a                 Address to use [0.0.0.0]
  -d                 Show directory listings [true]
  -i                 Display autoIndex [true]
  -e --ext           Default file extension if none supplied [none]
  -s --silent        Suppress log messages from output
  --cors             Enable CORS via the 'Access-Control-Allow-Origin' header
  -o                 Open browser window after staring the server
  -c                 Cache time (max-age) in seconds [3600], e.g. -c10 for 10 seconds.
                     To disable caching, use -c-1.

  -S --ssl           Enable https.
  -C --cert          Path to ssl cert file (default: cert.pem).
  -K --key           Path to ssl key file (default: key.pem).

  -h --help          Print this list and exit.


5. The watch-http-server will start and print the local http address where the website can be reached. It is typically http://localhost:8080. Open your browser and go to the address http://localhost:8080 and you should see the index file in your web site directory from Step 3.

Bootstrap Summary

Bootstrap Layout

- A separate div for navbar class (container or container-fluid class)
- A separate top-level content div (container or container-fluid class)
- container-fluid makes the element take up the full width of the screen (visually the content is left aligned on all screen resolutions).
- container has a a fixed size for each screen resolution. Therefore, on larger resolutions the content appears horizontally centered.
- Within top-level content div, define a div with "row" class
- Each row has 12 equal size logical units
- Use divs to specify one more columns that fit within the 12 units (e.g. col-md-4 and col-md-8)
- Use col-offset to move the columns from their natural position (to create space between columns)
- Use pull/push to move columns without have to change the order in which divs are coded
- "row" can be nested within a column with its own 12 units
- Can define multiple rows on page

Responsive Design - Automatic Sizing of Elements

- Columns will stack on smaller devices (for example, when using col-md-6 for two elements, those elements will stack on small screen sizes)
- To keep from stacking use col-sm-6 or  col-xs-6
- col-lg-6 will cause the columns to stack for all but large screens
- Hide a component on a device of particular size (e.g. to hide on small and extra small devices, use hidden-sm hidden-xs).
- Use visible-md to show on medium size device only. Example, <div class="jumbotron visible-lg visible-md"> to show on medium and large devices only.
- Say you have two divs with class="col-sm-10 col-md-6" and class="col-sm-2 col-md-6". On small devices the column size ratio will 10:2, on medium 1:1.
- We can size the buttons properly based on the screen resolution. Multiple sizes can be specified for a button so that they occupy proper number of columns. For example,
<div class="col-xs-5 col-sm-3 col-md-2 col-lg-1">
  <input type="submit" value="Submit" class="btn btn-success btn-block" />
</div>
Note: btn-block causes the button to occupy the entire column.

Styling

- Nav buttons, Pills, Breadcrumbs, Pagination (using lists). Can be stacked vertically.
- "alert" class to prominently display text
- "table" class to apply formatting to an HTML table. table table-condensed table-striped table-hover and several others. Can apply styles to rows.
- Turn a link a button into stylized button using btn btn-danger btn-primary btn-large,... classes.
- Button containing div with btn-group causes no space between the buttons
- Supports modal dialog box
- Override bootstrap styles in your own CSS file (use the same class name as in bootstrap, provide own formatting).
- Provides classes that apply formatting to HTML form elements
- Input groups allow you to combine controls (e.g. show the currency sign before an edit control)

Snippets

Button Group

div class btn-group pull-right

<div class="btn-group">
<a class="btn btn-default" href="url" data-toggle="tooltip" title="View transaction details"><span class="glyphicon glyphicon-info-sign"></span></a>
    <a class="btn btn-default" href="url" data-toggle="tooltip" title="Edit transaction"><span class="glyphicon glyphicon-pencil"></span></a>
</div>

Body

// so that the content is not pushed to corners
body {
  margin: 30px
}

Third-party Controls

• Date and Time Picker - bootstrap-datetimepicker (Smalot)
• Toggle Switch - bootstrap-switch
• Application Wizard - bootstrap-application-wizard
• Bootstrap Form Helpers
• Fuel UX (tree control)
• jQueryUI widgets (datepicker, autocomplete)
• Bootstrap typeahead.js and .css (autocomplete), hogan.js for templating

Data Binding

• Manual
• Knockout.js
• Angular.js

Modern Web Architecture

Service Tier

REST, Xml, or JSON results returned to the Client

Responsive Web Clients

Single page sites (e.g. Angular.js)

Workers

Background processes working off queues

SEO Optimization

SEO (Search Engine Optimization) are measures taken to make a website easily searchable through a Search engine.

Directories

Add website to directory such as http://www.dmoz.org/

Navigate to appropriate category to add your website

Popular Search Engines

• google.com
• bing.com
• search.yahoo.com
• altavista.com

Important Tags for SEO

Title
<title> appears in the search result; make it meaningful; use keywords in title
Use keywords people are likely to use to search for your site
Use different titles for different pages to increase the chance of being found

Use potential keywords to find top organic results that you want to target.

Find how often the potential and other related keywords are used on the top sites http://seokeywordanalysis.com/seotools/

Description
Beginning text of <body> appears as description in search result. To override this behavior, explicitly specify the description in the metadata section (head tag) of one or more pages. Limit to about 155 characters.

<meta name="description" content="this is useful information.."/>

Use appropriate text (full sentences/phrases) for other tags such heading tags and alt tags that a search engine might use to categorize your site.

Other Tags for SEO

author - for publishers

keyword - comma-delimited list of keywords. Mostly ignored by search engines due to spamming (repeating) keywords

robots - "noindex, nofollow" to instruct search engine not to index the page and not to follow the links on the page

Page Content Specification
<meta http-equiv="content-type" content="text/html;charset=x"/>
where x can be UTF-8 for English or some language specific character set (Chinese, Japanese)

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

Promoting Website

Provide useful tools or information to entice users and search engines

See also:
http://www.ehow.com/promote-your-website/

CSS Styles

Purpose

HTML deals with the web page content and its structure, CSS with its layout and appearance and JavaScript with the associated interaction and business logic. CSS is used to describe how an element on a Web page looks.

CSS Reference

http://www.w3schools.com/css/css_intro.asp
http://www.w3schools.com/cssref/default.asp

Colors

http://www.allprofitallfree.com/color-wheel2.html

Validating CSS

http://jigsaw.w3.org/css-validator/

Trying out CSS

http://dabblet.com/

Style Rules

/* CSS comment */
selector{
  property1:value;
  property2:value;
}

selector indicates the type of element the style applies to
property:value property is any CSS property and value is any acceptable value for that property

Style Inheritance

A nested element inherits style properties of its container element. By explicitly specifying a style, a nested element can override the inherited style.

<body style="text-align:center;">
<!-- override alignment for this paragraph -->
<p style="text-align:left;">
</p>
</body>

How to apply styles?

Styles can be applied to: <tags>, element with specified id, all elements belonging to class

1. <tags>
h1{
  color : navy;
}

// apply to multiple tags
h1, h2 {
  color : navy;
}

2. Apply to an element with a given ID
// apply to any element with an id of pageheading
#pageheading{
  font-weight: bold;
}

// only apply to h1 with an id of pageheading
h1#pageheading{
  font-weight: bold;
}

3. Apply to elements of a class
// apply to any element with a class of topheading
.topheading{
  color: navy;
}
// only apply to h1 with a class of topheading
h1.topheading {
  color:navy;
}

Applying to nested elements

// apply to a:hover under footer, ul, li
div#footer ul li a:hover{
text-decoration : underline;
}

// apply to p under div only
div p{
 color : red;
}

// apply to any p under body
body p {
  color : red;
}

Applying to Multiple Elements

// apply to h1 and h2 tags, to element with id of someelementid
// and to all elements of class of redclass
h1, h2, #someelementid, .redclass{
  color: red;
}

How to enter style rules?

1. Inline - Style is specified inside an HTML tag

<p style="text-align:left;">

2. Internal - The style rules are specified in the head section of an HTML document using the style tag.

<head>
  <style type="text/css">
    body{
       text-align:center;
       background-color:yellow;
       color: navy;
    }
  </style>
</head>

3. External File - Style rules can be placed in a separate file and referenced from HTML. Omit <style..> tag when entering style rules in stylesheet.css

<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>

Different stylesheets can specified for different media.

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>

Alternate style sheets can be specified (some browsers allow users the choice of the available style sheets). To specify an alternate style sheet, add multiple link tags and specify "alternate stylesheet" in the rel attributes.

<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="alternate stylesheet" href="oldschool.css" type="text/css" />
<link rel="alternate stylesheet" href="techno.css" type="text/css" />
</head>

Aside: External file can also be referenced using the @import url(style.css) in the head section wrapped by style tag. Multiple import statements can be specified. import can also be used within an external css file to reference another css file.

<head>
<style type="text/css">
@import url(sheet1.css);
@import ulr(sheet2.css);
p {left-margin: 10px;}
</style>
</head>

Styling a Table

<!-- table should occupy the entire width of the container -->
<!-- cellspacing of 2 will allow the background color of container such as -->
<!-- div to show through -->
<table style="width:100%;cellspacing:2;cellpadding:2" rules="all | row | col">
  <!-- background of the entire row -->
  <tr style="background-color:yellow">
     <!-- equally divide the space between the two columns -->
     <td style="width:50%">first cell</td>
     <td style="width:50%">second cell</td>
  </tr>
</table>

Styling a Layout

// style rule that horizontally centers a div
// wrapper is the id of the outermost layout div
#wrapper{
  width: 760px;
  margin:0 auto; // top/bottom margin is zero; automatically calc left/right margin
  border: thin 1px #fe9900
}
auto automatically calculates left and right margins so that they are equal; causing the div to be horizontally centered.
auto does not work for top/bottom margins

Use float attribute (float: left) to create side navigation. Apply float to side navigation div and have the main div float next to the nav div. Set percentage width for nav div (e.g. 25%). Set margin-left for main div to 30% to have it display next to the nav div.

Styling a Paragraph

Create a margin (indentation) for a paragraph
style="margin: 16px"

Centering Content

Centering horizontally

margin: 0 auto;

0 is top and bottom; can be set to anything and will take effect.

auto: puts equal amount of margin on left and right side causing the element to center horizontally

Centering vertically

assuming box is 100px

position: absolute;

top: 50%;     // 50% down from the top

margin-top: -50x   // move the center of the box to the 50% line

Centering both horizontally and vertically

Put the element in a container.

Assuming the contained box is 100px

// box - align horizontally within the container

margin: 0 auto;

// container - align vertically

position: absolute;

top: 50%;

margin-top: -50px;

left: 0;

width: 100%;

Colors

Standard, named colors
black, gray, silver, white, red, maroon, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua

Hex Codes
Colors can be specified using a hex code.

rrggbb

rr is the hex value for red
gg is the hex value for green
bb is the hex value for blue

00 means color is excluded
ff means color is fully show

000000 - hex code for black
ffffff - hex code for white
fff073 - hex code for a shade of yellow

When specify color using the hex code, # must precede the hex code.
background-color:"#fff073";

Using hex codes, one of 16.1 million colors can be specified.

Each hex digit can have up to 16 different values.

For rr, there are 16 * 16 = 256 values possible
For gg, there are 16 * 16 = 256 values possible
For bb, there are 16 * 16 = 256 values possible

For a combination of rr, gg, and bb, there are 256 * 256 * 256 = 16,777,216 values possible
http://www.allprofitallfree.com/color-wheel2.html
http://colorschemedesigner.com/
http://colorsontheweb.com/colorwheel.asp

HTML

HTML deals with the web page content and its structure, CSS with its layout and appearance and JavaScript with the associated interaction and business logic.

HTML Tag Reference

http://www.w3schools.com/tags/ref_byfunc.asp

HTML Special Characters

See Full List

How to Validate HTML

http://validator.w3.org/

Minimal Html Page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="description" content="this is useful information.."/>
  </head>
  <body>
  </body>
</html>

Minimal Html Page with jQuery Script and CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="description" content="this is useful information.."/>
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  </head>
  <body>
  </body>
</html>

XHTML Page with Layout

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="description" content="this is useful information.."/>
  </head>
  <body>
    <div id="header"></div>
    <div id="nav"></div>
    <div id="main"></div>
    <div id="footer"></div>
  </body>
</html>

HTML5 Page with Layout

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="description" content="this is useful information.."/>
  </head>
  <body>
    <header></ header >
    <nav></nav>
    <div id="main"></div>
    <div id="footer"></div>
  </body>
</html>

When using new HTML5 tags, to support old browsers, the CSS should include the following.

address, article, aside, canvas,
figcaption, figure, footer, header,
hgroup, nav, section, summary {
display: block;
}

XHTML and HTML5 rules

• Tags and attributes are entered in lowercase 
• Closing tags are required 
• Empty tags end with />. For example, <br /> 
• Only one root element is allowed i.e. <html>...</html>

Viewport meta tag

To control the size and scaling of the page, for instance when you are making a mobile-optimized web app with a native feel. It is here that the viewport meta tag and the new @viewport rule come in handy: they enable you to override that default 980px viewport value, define a maximum viewport height, and more, allowing you to manipulate the browser’s display and zoom behavior as you please.

Overriding the default viewport can be done by including a viewport meta tag in the <head> section of your page.

<meta name="viewport" content="width=device-width">

Block Elements

Block level elements occupy 100% of the available page width. Can specify less 100% as width to create element smaller than the container.

• body - styling can be applied to body. <body style="text-align:center;">
• div - used to divide a page into sections (divisions) instead of tables. OK to use tables within a div. div elements are usually named using an id attribute. The name used for id should indicate the purpose of the div. div should be styled using the id. Place a comment after diiv end tag for readability of nested div tags.  
• h1, h2, h3, h4, h5, h6 - Used for creating an outline of the page; not formatting of displayed text
• img - Attributes: src, alt, height,width. If only height or width are supplied, the other dimension is calculated based on the original size aspect ratio. Supported formats: gif, jpeg, png. Enclose img tag in p tag to separate from surrounding text. Public domain clip art http://www.clker.com/ . Public domain photos http://public-domain-photos.com/ . More clip art and photos http://www.graphicsfactory.com/
• li - item within an ordered or unordered list
• ol - ordered list
• ul - unordered list

Inline Elements

• a - create a link. Attributes: href, target 
• a - anchor. <a name="QB12"/>. To create a link href="#QB12" 
• em - italicized 
• strong - bold 
• <!-- comments -->

Accesskey

The accesskey attribute specifies a shortcut key to activate/focus an element.

<a href="http://sal-razzaq.blogspot.com/" accesskey="c">My Blog</a>

Attributes Used for Styling

• id - used to name an element. Must start with with a letter, no spaces. Must be unique on a given page. Is case-sensitive.
• name - name of the field on a form; serialized for form post; unique on a given form.
• class - used for styling a group of elements belonging to class. Multiple classes can be specified for an element <h1 class="navytext main"></h1>
• style - for specifying inline styles for the element

Layout Types

• Liquid or fluid layout - Layout and elements within layout resize with size of the browser window
• Fixed layout - Page contents maintain a constant width. Horizontal scroll bar may appear.

body tag is not a good candidate for the creating a layout since it's CSS styles are not universally supported for body tag. Use div tag and style it with CSS metadata. Every div is as wide as the containing element (that is, the default width="100%"). Name the outer most div with an id of "container" or "wrapper". Place a comment after div end tag:

<body><div id="wrapper"></div><!-- end wrapper--></body>

Preferred fixed width layouts are 760px (800x600) or 980px (1024x768)

Tables

• table - Attributes: border, cellspacing (space between cells), cellpadding (space between content of cell box and the edge of the cell box) 
• tr - table row 
• th - table header and footer cell (boldface) 
• td - table data cell . Attributes: colspan (merge cells from multiple columns), align (left, center, right), rowspan (merges cell on multiple rows) 
• <td>&nbsp;</td> - to display empty cell

<table rules="all | row | col">

  <thead>

    <tr>

       <th></th>

   </tr>

  </thead>

  <tfoot>

    <tr>

       <th></th>

    </tr>

  </tfoot>

  <tbody>

    <tr>

       <td></td>

    </tr>

</tbody>

</table>