Mr Branding

Wednesday, November 16, 2016

The Ultimate Angular CLI Reference Guide

On September 15, 2016, Angular 2 Final was released.

Where Angular 1.x was limited to a framework, Angular 2 has grown into an ambitious platform that allows you to develop fast and scalable applications across all platforms such as web, mobile web, native mobile and even native desktop.

With this transition to a platform, tooling has become more important than ever. However, setting up and configuring tooling is not always easy. To make sure Angular developers can focus on building applications with as little friction as possible, the Angular team is putting a lot of effort in providing developers with a high quality development toolset.

Part of that toolset are close integrations with a wide array of IDE's and editors. Another part of that toolset is Angular CLI.

In this article we have a look at what Angular CLI is, what it can do for you, and how it performs some of its magic behind the scenes. Even if you already use Angular CLI, this article can serve as a reference to better understand its inner workings.

Technically you are not required to use Angular CLI to develop an Angular 2 application, but its many features can highly improve the quality of your code and save you a lot of time along the way.

So let's get started!

What Is Angular CLI?

Angular CLI is a Command Line Interface (CLI) to automate your development workflow. It allows you to:

create a new Angular application
run a development server with LiveReload support to preview your application during development
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
deploy your application to a server

Before we have a look at each of the above in detail, let's first see how you can install Angular CLI.

Prerequisites

Before you can use Angular CLI, you must have Node.js 4.0.0 and npm 3.0.0 or higher installed on your system.

You can download the latest version of Node.js for your Operating System and consult the latest installation instructions on the official Node.js website.

If you already have Node.js and npm installed, you can verify their version by running:

$ node -v # => displays your Node.js version 
$ npm -v # => displays your npm version

Once you have Node.js installed, you can use the npm command to install TypeScript:

$ npm install -g typescript@2.0.2

Although TypeScript is technically not an absolute requirement, it is highly recommended by the Angular team, so I recommend you install it to make working with Angular 2 as comfortable as possible.

Now that you have Node.js and TypeScript installed, you can install Angular CLI.

Installing Angular CLI

To install Angular CLI, run:

$ npm install -g angular-cli

which will install the ng command globally on your system.

To verify whether your installation completed successfully, you can run:

$ ng version

which displays the version you have installed:

angular-cli: 1.0.0-beta.17
node: 6.1.0
os: darwin x64

Depending on your system setup, you may see the following warning in Angular CLI's output:

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ift.tt/22TlJJ7 for more info.

This warning tells you two things:

Angular CLI is based on Ember CLI, the CLI of the Ember framework.
Watchman is not installed on your system

Watchman

Watchman is a scalable file watching service built by the Facebook Engineering team that offers better performance than similar services.

Angular CLI will fall back to NodeWatcher if you don't have Watchman installed.

However, you may benefit from improved performance if you install Watchman, so it's definitely worth checking out the installation instructions to see if Watchman supports your operating system.

If you are running Mac OS X, you can install Watchman using Homebrew:

$ brew install watchman

Now that you have Angular CLI installed, let's use it to create a new application.

Creating a New Angular Application

There are two ways to create a new application using Angular CLI:

ng init: create a new application in the current directory
ng new: create a new directory and run ng init inside the new directory

So ng new is similar to ng init except that it also creates a directory for you.

Assuming you haven't created a directory yet, let's use ng new to create a new project:

$ ng new my-app

Behind the scenes, the following happens:

a new directory my-app is created
all source files and directories for your new Angular application are created based on the name you specified (my-app) and best-practices from the official Angular Style Guide
npm dependencies are installed
TypeScript is configured for you
the Karma unit test runner is configured for you
the Protractor end-to-end test framework is configured for you
environment files with default settings are created

You will learn more about each of these aspects in the following sections.

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

my-app
├── README.md
├── angular-cli.json
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── index.ts
│   │   └── shared
│   │       └── index.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json
│   └── typings.d.ts
└── tslint.json

Available Options

--dry-run: boolean, default false, perform dry-run so no changes are written to filesystem
--verbose: boolean, default false
--link-cli: boolean, default false, automatically link the angular-cli package (more info)
--skip-npm: boolean, default false, skip npm install
--skip-bower: boolean, default true, skip bower install
--skip-git: boolean, default false, don't initialize Git repository
--directory: string, name of directory to create, by default this is the same as the application name
--source-dir: string, default 'src', name of source directory
--style: string, default 'css', the style language to use ('css', 'less' or 'scss')
--prefix: string, default 'app', the prefix to use when generating new components
--mobile: boolean, default false, generate a Progressive Web App application (see section on upcoming features)
--routing: boolean, default false, add module with routing information and import it in main app module
--inline-style: boolean, default false, use inline styles when generating the new application
--inline-template: boolean, default false, use inline templates when generating the new application

Let's see how you can start your application so you can see it in action.

Running Your Application

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

$ cd my-app

and run:

$ ng serve

to start the built-in development server on port 4200:

** NG Live Development Server is running on http://localhost:4200. **
3935ms building modules
Hash: fd7ad6cf3503757e22e0
Version: webpack 2.1.0-beta.25
Time: 6526ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.78 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.86 MB    0, 2  [emitted]  main
       styles.map    14.1 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  472 bytes          [emitted]
assets/.npmignore    0 bytes          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0
webpack: bundle is now VALID.

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

Application works

Behind the scenes, the following happens:

Angular CLI loads its configuration from angular-cli.json
Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
Angular CLI starts webpack dev server to preview the result on localhost:4200

Notice that the ng serve command does not exit and return to your terminal prompt after step 3.

Instead, because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.

To stop the process and return to your prompt, press ctrl-c.

Adding Features to Your Angular Application

You can use the ng generate command to add features to your existing application:

Continue reading %The Ultimate Angular CLI Reference Guide%

by Jurgen Van de Moere via SitePoint

Quick Tip: The Convenient Magic of Eloquent Observers

If you've used Eloquent on medium to large projects before, you may have encountered a situation where you want to take action when something happens to your models. Eloquent provides a convenient way to do so.

Laravel Logo

The Observer Pattern

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. - Wikipedia

In our case, Eloquent models can notify us about changes on a given model.

Model Events

Eloquent provides a handful of useful events to monitor the model state: creating, created, updating, updated, deleting, deleted, saving, saved, restoring, restored.

Notice the "ing/ed" difference.

creating: Called before saving the new member.
created: Called after saving the member.

Eloquent also fires similar events that we can listen for. The below example attaches a listener to the creating event on the Member model.

Event::listen("eloquent.created: App\\Member", function(Member $member) {
    // do something
});

Continue reading %Quick Tip: The Convenient Magic of Eloquent Observers%

by Younes Rafie via SitePoint

This Week's HTML5, CSS and Browser Tech News #266

— Read this e-mail on the Web

FrontEnd Focus

Issue 266 — November 16, 2016

Debugging The Web with Paul Irish

In 30 minutes, Paul Irish shares what’s new in Chrome’s DevTools and how they’ll help you when debugging your sites and front-end work. A lot of useful stuff here.

Paul Irish

An Intro to Monkey Testing with Gremlins.js

Monkey testing is a method of testing that generates random user input - clicks, swipes, entering input - with the sole purpose of finding issues with, or entirely breaking, your app.

Alicia Sedlock

The Power of the rgba() Color Function in CSS

A look at some of the tricks you can pull off with the rgba color function (well supported by all modern browsers).

Ahmad Shadeed

Try Kendo UI - the most complete JavaScript/HTML UI library with 70+ widgets

Kendo UI delivers everything you need to build modern web applications under tight deadlines - from the must-haves Data Grids & DropDowns to Spreadsheet & Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps.

progress Sponsor

Firefox 50 Released: What's New for Developers

Firefox 50 is a big release for developers with lots of tweaks to the developer tools, but WebRTC, the Web Audio API, Pointer Lock API, Drag and Drop API, and more have been improved.

Mozilla

You, Me And The Emoji: Character Sets, Encoding And Emoji

An incredibly extensive/deep look at Unicode, character sets and encodings on the Web, and how emoji fits into the big picture.

Rob Reed

Lazy Loading Responsive Adsense Ads

Osvaldus Valutis looks at what can done to improve the loading of ads when working to optimize your site.

CSS Tricks

Jobs

Job Offers Without the Hassle - Try HiredSick of pushy recruiters, and dead end interviews? Try Hired to hear from over 4,000 innovative companies looking for their next great team member. Hired

In brief

Safari Technology Preview Release 17 Is Now Available news
Jon Davis

Google Says There Are 2 Billion Chrome Browsers in Use Today news
Nick Statt

Intent to Ship CSS Grid Layout in Chrome news
Manuel Rego

Kranky Geek WebRTC Event (San Francisco, Nov 22) news
A Google-hosted WebRTC event later this month focusing on mobile real time communications.
Kranky Geek

Using Y-Axis Transforms and Matrices in CSS tutorial
Sitepoint

Creating SVG 'Invisible Pen' Effects with Vivus.js tutorial
Ivaylo Gerchev

Things I've Learned About CSS Grid Layout tutorial
Oliver Williams

Throwaway Code opinion
Do you create code meant to be thrown away? Corgibytes’ Chief Code Whisperer Scott Ford explains why he does.
Corgibytes Sponsor

Is Model-View-Controller Dead On The Front End? opinion
Alex Moldovan

Don't Use Long Polling - Just Use WebSockets opinion
Jonathan Gros-Dubois

The SVG 2 Conundrum opinion
Will SVG 2 ever make it into widespread production?
Chris Coyier

Sprite Spirit: Image Sprites to Animation tools
Generator and SCSS Mixin that brings image sprites to life.
Elior Shalev Tabeka

Simulate Slow Connections with The Network Throttling Tool tools
Firefox DevTools has now a network throttling tool to simulate slow connections.
Firefox Nightly News

Using The New CSS Coverage Tool in DevTools tools
Discover what CSS is unused on a page, even during page interaction.
Umar Hansa

Discover the world’s most trusted SQL Server comparison tool tools
Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas.
Red Gate Sponsor

deck.gl: Large Scale WebGL-Powered Data Visualization code
A WebGL-powered framework for visual exploratory data analysis of large datasets.
Uber

Clarity: A HTML/CSS/UX Design System and Angular 2 Components code
Jumpstart projects with a UI kit, set of Angular 2 components, and HTML/CSS framework from VMware.
VMware

Milligram: A Minimalist CSS Framework (2KB gzipped) code

CSS-Only Sliding Panels using Transforms code demo
CodePen

Chrome-Style Tabs Reproduced with HTML/CSS/ES6 demo
Adam Schwartz

Using box-decoration-break For Multi-Line Padded Text demo
Nick Salloum

Curated by Peter Cooper and published by Cooperpress. If you like this, you may also enjoy: JavaScript Weekly, Node Weekly, and React Status.

Stop getting FrontEnd Focus : Change email address : Read this issue on the Web

by via FrontEnd Focus

This Week in Mobile Web Development (#134)

Read this on the Web

Mobile Web Weekly

November 16, 2016 #134

Brian Rinaldi recommends

The Diminishing Use Case of Hybrid Apps — TJ VanToll says that, while hybrid isn’t going away, use cases that it once fit are better served by progressive web apps or JavaScript-driven native apps.
TJ VanToll

Brian Rinaldi recommends

Rethinking Text Input on Touch Screens — Chris argues that we’ve used a 200 year old typewriter technology for text input on touch devices and it doesn’t work well.
Two Wrongs

Brian Rinaldi recommends

Lazy Loading Responsive Adsense Ads — Osvaldus Valutis looks at what can done to improve the loading of ads when optimizing your site.
CSS Tricks

Teaching Millions Worldwide: 3,000 Tuts+ Translations Published!

Getting Started With React and JSX

How to Track Social Media Metrics on Four Social Networks

Are your social media marketing efforts working? Wondering which key performance indicators (KPIs) matter on each platform? In addition to revenue, there is real value in knowing how many people engage with your social media posts. In this article, you’ll discover which KPIs to track for Twitter, Facebook, LinkedIn, and Instagram. #1: Delve Into Twitter [...]

This post How to Track Social Media Metrics on Four Social Networks first appeared on .
- Your Guide to the Social Media Jungle

by Joe Griffin via