Angular CLI – A command line interface for Angular

Angular CLI (Command Line Interface) is a high quality development tool-set for developers. Angular CLI features can highly improve the quality of your code and save you a lot of time. The big part of getting started with Angular is the set up. With the help of Angular CLI you can easily set up the project and also it allows you to do the following things.

  • Create a new angular application
  • Run a development server
  • Add features to your existing angular application
  • Run your application’s unit tests
  • Run your application’s end-to-end (E2E) tests
  • Build your application for deployment to production

Before you can use the Angular CLI, you must have node.js 6.9.0 or above installed on your system, if you already have node.js installed, you can verify the versions by running

$ node -v  // Dsiplay the node.js version

Related: What you need to know about Angular CLI to improve your code

Installing Angular CLI

To install CLI, run

$ npm install -g @angular/cli

That’s it! Now you can start using the CLI to build your applications.

Creating a New Angular Application

To create new app, just run

$ ng new my-app

At this point you have a working Angular application and your new directory my-app looks like

Running Your Application

To preview your new application in your browser, navigate to its directory

$ cd my-app

and run

$ ng serve

You can now open your browser and navigate to http://localhost:4200/ to see your application in action

Generate Parts of Your Application

Using ng generate command you can create a new component, Directive, Services, Module, Class, Pipe, Route and so on.

You can use the ng generate (or just ng g) command to add features to your existing application:

Add a class to your application
ng generate class
my-new-class

Add a component to your application
ng generate component
my-new-component

Add a directive to your application
ng generate directive
my-new-directive

Add an enum to your application
ng generate enum
my-new-enum

Add a module to your application
ng generate module
my-new-module

Add a pipe to your application
ng generate pipe
my-new-pipe

Add a service to your application
ng generate service
my-new-service

Angular-cli will add reference to components, directives and pipes automatically in the app.module.ts.

Building Your Application for Production

Running ng serve builds and bundles your Angular application automatically to a virtual file system during development. However, when your application is ready for production, you will need real files that you can deploy to your server.

To build and bundle your application for deployment, run:$ ng build

Reference links:

https://angular.io/docs/ts/latest/cli-quickstart.html

https://github.com/angular/angular-cli


Create Your First Accelerated Mobile Page With Google AMP

What is AMP?

AMP stands for Accelerated Mobile Pages, an open source initiative backed by Google aiming to improve the performance of the mobile web. AMP allows publishers to create fast, interactive, optimized web pages that load instantly on all devices. All existing publishers support AMP pages because they drastically increases the web traffic and exposure.

How will AMP be used?

Google will be using AMP to quickly serve web pages on mobile devices without users having to click through a specific website to view the content. You can view a demo of AMP within Google’s search results on your mobile. Just Google any topic or news you will see a carousel of AMP articles from so many publishers.

How Does AMP Work?

AMP uses existing web technologies. It allows only a subset of the HTML, JS(Javascript) language. All the CSS has to be inline. It basically prevents the developer from using code which takes a long time to load and render. It optimizes the pages by caching the HTML, images and JS using CDN (Content Delivery Network).

AMP consists of three basic parts:

  1. AMP HTML: A subset of HTML, this markup language has some custom tags and properties and many restrictions. But if you are familiar with regular HTML, you should not have difficulty adapting existing pages to AMP HTML.
  1. AMP JS: A JavaScript framework for mobile pages. For the most part, it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP.
  1. Google AMP Cache: It is a proxy-based content delivery network for delivering all valid AMP documents., it will take your AMP-enabled pages, cache them and automatically make some performance optimization.

Create Your First AMP Page

Step 1: Create Your AMP HTML Page

The following markup is a decent starting point or boilerplate. Copy this and save it to a file with a .html extension.

<!doctype html>
 <html amp lang="en">
 <head>
 <meta charset="utf-8">
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <title>Hello, AMPs</title>
 <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 <script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "headline": "Open-source framework for publishing content",
 "datePublished": "2015-10-07T12:02:41Z",
 "image": [
 "logo.jpg"
 ]
 }
 </script>
 <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
 </head>
 <body>
 <h1>Welcome to the mobile web</h1>
 </body>
 </html>

 Step 2: Include an Image

Most HTML tags can be used directly in AMP HTML, but certain tags, such as the <img> tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags, here’s the code required to embed an image into the page:

&lt;amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"&gt;&lt;/amp-img&gt;

Step 3: Modify Presentation and Layout

AMPs are web pages; any styling to the page and its elements is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the <head>, called <style amp-custom>:

<style amp-custom>
 /* any custom style goes here */
 body {
 background-color: white;
 }
 amp-img {
 background-color: gray;
 border: 1px solid black;
 }
 </style>

On a normal HTML page, you almost exclusively use CSS to lay out elements. But for performance reasons, AMP requires all elements to have an explicit size set from the get-go.

Step 4: Preview and Validate

Preview the AMP page just as you would preview any other static HTML site. There’s no build step or pre-processing required. Either:

  • Open it directly in the browser from the file system
  • Use a local web server like Apache 2 or Nginx.

Next, make sure that your AMP page is actually valid AMP, or it won’t get discovered and distributed by third-party platforms like Google Search. To validate:

1.Open your page in your browser.

2.Add “#development=1” to the URL, for example, http://localhost:8000/example.amp.html#development=1.

3.Open the Chrome DevTools console and check for validation errors.

Step 5: Prepare Your Page for Discovery and Distribution

In some cases, you might want to have both a non-AMP and an AMP version of the same page. In that case

Add the following to the non-AMP page:

<link rel="amphtml" href="https://www.example.com/url/to/amp/example.amp.html">

And this to the AMP page:
<link rel=”canonical” href=”https://www.example.com/url/to/full/example.amp.html”>

If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:
<link rel=”canonical” href=”https://www.example.com/url/to/full/example.amp.html”>

Congrats! You’ve tested your page locally and fixed all validation errors, which means your first AMP page is ready to ship.

Components / Tags:

The AMP HTML library provides components/tags that are:

Built-in: such as amp-img, amp-video, and amp-pixel.

Extended: (e.g., <script async custom-element=”amp-audio” …).

Experimental: Components that are released but are not yet ready for wide use.

Reference link:

https://www.ampproject.org/docs/reference/components

Useful links:

https://www.ampproject.org

https://ampbyexample.com/

https://github.com/ampproject/amphtml