Web_Designer_Issue_262_2017

Which front-end frameWork?
WHAT’S NEW
IN ANGULAR 4?
After a bumpy ride moving from
AngularJS to Angular 2, the latest
release is less intimidating
CREATE A COMMENTS PAGE WITH ANGULAR
Let’s create the outline of a simple comments page, which will enable us to
post a comment and view existing ones
Released in March 2017, Angular 4 introduces
a relatively small set of changes compared to
Angular 2. This will come as particularly
good news for AngularJS developers who
had dificulty with Angular 2’s extensive and
fundamental changes. If you’re already
developing in Angular 2, the modifications
you’ll need to make range from ‘none’ to
‘very minor’.
Some of the more notable changes
introduced in version 4 include:
• Movement of animations to their
own package in @angular/platformbrowser/animations
• Replacement of the template tag with
ng-template, since template is now an
HTML5 tag for web components
• Introduces if/else syntax in templates,
which will be very useful for
conditional templates
• Numerous minor improvements, such as
a titlecase pipe and email validator – plus,
of course, bug fixes
On top of these changes, there’s also significant
optimisation to deliver more compact, faster
code. In particular, Ahead-of-Time (AoT)
compilation has undergone a major overhaul,
which the Angular team have found to yield
substantial reductions in the size of
distributables. It’s also worth mentioning
that Angular now utilises semantic versioning,
whereby major changes to core libraries
increment the leading version number.
Complete re-writes should be a thing of the
past, and as a result, we should start calling
it simply ‘Angular’, rather than ‘Angular 2’ or
‘Angular 4’. Oh, and the Angular team
skipped version 3.
Angular is probably the best-known JavaScript
front-end framework, and with good reason. It’s
designed to enable development of cross-platform,
high-performance web applications, which are
built from custom components. Component
functionality is written in TypeScript, which is a
powerful superset of JavaScript. It’s typical to run
Angular with a Node.js server, which we’ll do here.
01. PLAN THE COMPONENTS
In a component-based world, before we start
developing it helps to think about how we would
break down our page. Within our comments page
component (AppComponent), we’ll have several
other components: a new comment submission
box (CommentBoxComponent), and a comment
history section (CommentHistoryComponent),
which will be a collection of individual comments
(CommentComponent).
02. SET UP AN ANGULAR PROJECT
The easiest way to get Angular up and running is
using the Angular CLI, a command-line interface
that can create projects, files, deployments and so
on. To do this, you’ll need to install Node.js and
npm (nodejs.org/en and npmjs.com). Once you’ve
done this, in your console or command line, you
can use:
npm install g @angular/cli
This will install the Angular CLI globally. We can
then create a new project using:
ng new angular-app
This will create a project folder and a set of files to
get you started. From the project directory, we can
then have the CLI build and launch our app:
ng serve --open
03. CREATE OUR COMPONENTS
We’ll want to create several Angular components
in line with our design, which the CLI can do for us:
ng generate component comment-box
ng generate component comment-history
ng generate component comment-history/comment
04. THE COMMENT COMPONENT
A component in Angular consists of TypeScript
that defines its behaviour, with HTML and CSS
defining its appearance. You can see each of these
has been generated by the CLI for the Comment
component. Let’s start by modifying its
appearance in the HTML file to allow for a text
variable and some Like/Dislike buttons:
{{text}}
Like
Dislike
To enable the text field to be populated by the
parent component, we need to add an input
property to the TypeScript file:
export class CommentComponent implements
OnInit {
@Input() text: string;
...
68 ________________________________________________________________ feature