Quick and Beautiful Apps in Angular

Lunch and Learn

Who am I?

➲ Rodney Kendall● Senior Full-Stack Development Guru

➲ ~30 Years (already???) experience➲ .Net, SQL, Javascript, Angular, you name it,

I've probably at least dabbled in it.➲ rodney.kendall@smartdata.net➲ https://www.linkedin.com/in/rodneyk

What are we doing today?

➲ Learn how to create a cool app in Angular➲ See how easy it is, with just a little “coding”➲ Should have some idea of Javascript● No problem if you don't, we'll walk through it!

➲ See some cool coding standards and easy to read code

➲ See how easy it is to make this app

REALLY COOL (not just COOL)

What is Angular?

➲ https://angular.io/➲ Framework for mobile and desktop

development● User interface and integration all in one

➲ Easy to use, and easy to reuse➲ Everything you need for a great user

experience with Angular Material!➲ Uses Typescript➲ Not AngularJS (that's 'old school')

Note: Angular features at https://angular.io/features

Cross Platform

➲ Web● Use modern web platform capabilities to deliver app-like

experiences. High performance, offline, and zero-step installation.

➲ Native● Build native mobile apps with strategies from Cordova,

Ionic, or NativeScript.➲ Desktop● Create desktop-installed apps across Mac, Windows, and

Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

➲ All in ONE!

Speed and Performance➲ Code Generation● Angular turns your templates into code that's highly

optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

➲ Universal● Serve the first view of your application on Node.js, .NET,

PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO (Search Engine Optimization).

➲ Code Splitting● Angular apps load quickly with the new Component

Router, which delivers automatic code-splitting so users only load code required to render the view they request.

Productivity

➲ Templates● Quickly create UI views with simple and powerful

template syntax.➲ Angular CLI (Command-Line Interface)● Command line tools: start building fast, add components

and tests, then instantly deploy.➲ IDEs (Integrated Development Environments)● Get intelligent code completion, instant errors, and other

feedback in popular editors and IDEs.

Full Development Story

➲ Testing● With Karma for unit tests, you can know if you've broken

things every time you save, and Protractor makes your scenario tests run faster and in a stable manner.

➲ Animation● Create high-performance, complex choreographies and

animation timelines with very little code through Angular's intuitive API.

➲ Accessibility● Create accessible applications with ARIA-enabled

components, developer guides, and built-in a11y (numeronym (cool word of the day!) for 'accessibility') test infrastructure.

Why Angular Material?

➲ Ease of use➲ Modern UI appearance➲ Eye-popping built-in features➲ Works great across the web, mobile, and

desktop➲ FAST!➲ “Themeable” – make it your own➲ Angular's friend

Let's make an App!

➲ Use news API at http://newsapi.org ● Free for developers!

➲ Goals:● Make it look good● Search the headlines by keyword● Limit the sources to search● Easy for us and the user

Take a look!100%

Awesome!

Installation*** Only needed one time ***

➲ Node.js from https://nodejs.org● LTS version recommended

➲ Angular● npm install -g @angular/core● npm install -g @angular/cli

➲ Verify the install● 'node -v', 'npm -v', and 'ng v'

Create the base automatically

➲ ng new news-reader➲ cd news-reader➲ What do we have so far? QUICK DEMO!➲ ng serve➲ http://localhost:4200

Add Angular Material

➲ ng add @angular/material➲ What did that do?● Added references in 'package.json'● Add import information to app.module.ts● Changed other files, too

➲ Let's take a look!➲ ng serve➲ http://localhost:4200

Setup News Feed

➲ https://newsapi.org● Get API Key

Styles.css

Angular.json

"styles": ["./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css","src/styles.css"],

Manual changes app.module.ts (Not 100% automatic, but close!)

Create the Service (The Food)

➲ Service: Way to get data from anywhere➲ ng g service news➲ On to coding!

Source.ts (What's this?)

App.component.ts (The Brain)

App.component.html (The Face)

App.component.css (The Makeup)ALMOST DONE!

Icons

➲ Source: https://newsapi.org/sources● Lookup each from the news site and download the icons,

one-by-one

➲ Put them: src/assets/sources

➲ Great news! I already did this part...

➲ Time to see what we made!

What's next?

➲ Add comments➲ Add likes (and maybe dislikes?)➲ Change the color scheme➲ Other ideas?