Angular 2By High School Technology Services myhsts.org

http://myhsts.org/

Overview of Angular and the MVVM Design PatternBy High School Technology Services myhsts.org

http://myhsts.org/

What is Angular ?

▪ AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

▪ AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?

What is Angular ?

The impedance mismatch between dynamic applications and static documents is often solved with:

▪ a library - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.

▪ frameworks - a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. E.g., durandal, ember, etc.

What is Angular ?

AngularJS takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. AngularJS teaches the browser new syntax through a construct we call directives. Examples include:

▪ Data binding, as in {{}}.▪ DOM control structures for repeating, showing and hiding DOM fragments.▪ Support for forms and form validation.▪ Attaching new behavior to DOM elements, such as DOM event handling.▪ Grouping of HTML into reusable components.

Angular Architecture

▪ Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript.

▪ The framework consists of several libraries, some of them core and some optional.▪ You write Angular applications by composing HTML templates with Angularized markup, writing

component classes to manage those templates, adding application logic in services, and boxing components and services in modules.

▪ Then you launch the app by bootstrapping the root module. Angular takes over, presenting your application content in a browser and responding to user interactions according to the instructions you've provided.

▪ Of course, there is more to it than this. You'll learn the details in the pages that follow. For now, focus on the big picture on the next slide -

Angular Architecture

Features and Benefits of Angular

Features and Benefits of Angular

Features and Benefits of Angular

Features and Benefits of Angular

Setting up Angular

▪ Good tools make application development quicker and easier to maintain than if you did everything by hand.

▪ The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

▪ Set up the Development Environment▪ You need to set up your development environment before you can do anything.▪ Install Node.js® and npm if they are not already on your machine.

▪ Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Setting up Angular

Install the Angular CLI globally.

Choosing an IDE

▪ The Integrated Development Environment also known as IDE is used for writing, reading, viewing and process programs. The best IDE for angular 2 or the latest angular version 4.0+ is dependent on some factors. If you preferred a particular IDE effective for a framework or program, it does not it would for another. The overall benefit of a particular IDE viz-a-viz a program or framework like angular 2 is based on how easy is to for the programmer to use.

▪ Angular 2 codes are typescript, html and css based. The syntax are quite unique and a number of extensions and plugins have been developed on various IDE’s to support Angular 2. The basic features of the IDE’s listed as the best for Angular 2 is good for beginners, while advanced features are available for experts and pros.

Choosing an IDE

Factors taken into consideration before choosing the best IDE

▪ Support▪ Interface and ease of navigation▪ Third party extension and plugin integration.▪ Debugger▪ Integration with Git▪ Linting, Autocomplete and suggestion▪ Auto save feature▪ Memory and processor usage (How light is the IDE)▪ Stability▪ Cost

Some IDEs for quick development - VSCode, Sublime Text, Atom, Brackets, WebStorm etc.

Creating a Simple Application with Angular

Assuming you’ve installed angular-cli - Create a new project. Generate a new project and skeleton application by running the following commands:

Creating a Simple Application with Angular

Creating a Simple Application with Angular

▪ cd into the project folder and run - ng serve -o

▪ The project will open in default browser on port 4200.

Looking Forward

Now that we understand what Angular is and have built a simple application let’s learn about a superset of JavaScript which will help us build powerful data driven Angular applications. We’ll cover -

▪ TypeScript Basics▪ TypeScript vs ECMAScript 6▪ Types -

▪ Working with Built-In Types▪ Custom Types

▪ Utilities -▪ Using Fat Arrow Syntax▪ Template Strings

▪ Transpiling TypeScript into JavaScript▪ TypeScript Compiler Configuration▪ TypeScript Declaration Files▪ Installing Typings Files

Thank YouBy High School Technology Services myhsts.org

http://myhsts.org/