A Quick Tutorials on Angular 2 Platform Concepts and Examples

Angular 2 and Introduction

Angular 2 is an open source JavaScript/TypeScript framework to build web applications in HTML and JavaScript/TypeScript and has been conceived as a mobile first approach.
Features
  • Angular2 is faster and easier than AngularJS.
  • It supports latest version of browsers and also supports old browsers.
  • It is a cross platform framework.
  • Angular 2 is mainly focused on mobile applications.
  • Code structure is very simplified than the previous version of Angular.

dvantages
  • If an application is a heavy load, then Angular2 keeps it fully UI responsive.
  • It uses server side rendering for fast views on mobile.
  • It works well with ECMAScript and other languages that compile to JavaScript.
  • It uses dependency injection to maintain apps without writing too long code.
  • Everything will be the component based approach.
  • The TypeScript is a super set of JavaScript which is migrated to TypeScript and code written in TypeScript makes less prone to run time erros.

Set-up Development Environment


  • Step-1: Create a project folder in local drive by typing below command:
     makdir angular2-demo
    
     cd angular2-demo
    
    
  • Step-2: Creating Configuration Files
tsconfig.json

Need to create tsconfig.json which is the TypeScript compiler configuration file. It guides the compiler to generate JavaScript files.

{
    "compilerOptions": {
      "target": "es5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    },
    "exclude": [
      "node_modules",
      "typings/main",
      "typings/main.d.ts"
    ]
    }
 
typing.json

A large number of libraries of the JavaScript extends JavaScript environment with features and syntax which is not natively recognized by the TypeScript compiler.
The typing.json file is used to identify TypeScript definition file in Angular application.

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/ jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}

* core-js: It brings ES2015/ES6 capabilities to our ES5 browsers.
* jasmine: It is the typing for Jasmine test framework.
* node: It is used for the code that references objects in the nodejs environment.

package.json

The package.json will contain the packages that our apps require. These packages are installed and maintained with npm.

{
 "name": "angular2-demo",
 "version": "1.0.0",
 "scripts": {
   "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
   "tsc": "tsc",
   "tsc:w": "tsc -w",
   "lite": "lite-server",
   "typings": "typings",
   "postinstall": "typings install"
 },
 "license": "ISC",
 "dependencies": {
   "angular2": "2.0.0-beta.7",
   "systemjs": "0.19.22",
   "es6-promise": "^3.0.2",
   "es6-shim": "^0.33.3",
   "reflect-metadata": "0.1.2",
   "rxjs": "5.0.0-beta.2",
   "zone.js": "0.5.15"
 },
 "devDependencies": {
   "concurrently": "^2.0.0",
   "lite-server": "^2.1.0",
   "typescript": "^1.7.5",
   "typings":"^0.6.8"
 }
}

Creating Our First Angular Component

  • A component is the fundamental concept of Angular.
  • A component is a class that controls a view template - a part of a web page where information to the user is displayed and user feedback is responded.
  • Components are required to build Angular apps.


environment_app.component.ts

The files which need to create need to be saved with .ts extension. Create a file called environment_app.component.ts in app/ folder.

import {Component, View} from "angular2/core";

@Component({
  selector: 'my-app'
})

@View({
 template: '<br />
<h2>
My First Angular 2 App</h2>
'
})

export class AppComponent {
}

  • The above code will import the Component and View package from angular2/core.
  • The @Component is an Angular2 decorator that allows us to associate metadata with the component class.
  • The my-app can be used as HTML tag to injecting and can be used as a component.
  • The @view contains a template that tells Angular how to render a view.
  • The export specifies that, this component will be available outside the file.


environment_main.ts

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"

bootstrap(AppComponent);

index.html

<html>
<head>
<title>Hello Angular2</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
   <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
   <script src="https://code.angularjs.org/tools/system.js"></script>
   <script src="https://code.angularjs.org/tools/typescript.js"></script>
   <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
   <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
   <script>
     System.config({
       transpiler: 'typescript',
       typescriptOptions: { emitDecoratorMetadata: true },
       packages: {'app': {defaultExtension: 'ts'}},
       map: { 'app': './angular2/src/app' }
     });
     System.import('app/environment_main')
           .then(null, console.error.bind(console));
   </script>
 </head>
<body>
  <my-app>Loading...</my-app>
</body>
</html>


  • TypeScript compiler in the watch mode.
  • The lite-server(static server) loads the index.html in a browser and refreshes the bowser as application files change.


Angular 2 Architecture

  • Module - A block of code which can be used to perform a single task.
  • Component - A controller class with a template which mainly deals with a view of the app and logic on the page.
  • Template - Tells Angular how to display the component.
  • Metadata - A way of processing the class.
  • Data Binding - A process of coordinating app data values by declaring binding b/w sources and target HTML elements. There are 4 type of bindings: Interpolation, Property Binding, Event Binding, Two-way Binding.
  • Service - JavaScript functions that are responsible for doing a specific task only.
  • Directive - Represents the metadata. There are 3 types of directives: Component Directive, Decorator Directive, Template Directive.
  • Dependency Injection - A desing pattern that passes an object as dependencies in different components across the app.


Angular 2- Modules

  • Angular follow modular structure. The Angular apps will contain many modules, each dedicated to the single purpose.
  • A module exports some classes, function and values from its code. The Component is a fundamental block of Angular and multiple components will make up an app.
  • A module can be a library for another module. For instance, the angular2/core library which is a primary Angular library module will be imported by another component.


Angular 2 Components

  • The component is a controller class with a template which mainly deals with a view of the application.
  • The component knows how to render itself and configure dependency injection.
  • The component contains two important things; one is view and another one is some logic.


Angular 2 Templates

  • The component's view can be defined by using the template.
  • The template describes how the component is rendered on the page.

Angular 2 Metadata

  • A way of processing the class.
  • We can use metadata to the class to tell Angular that a XYZ is a component and metadata can be attached to typescript by using the decorator.


Angular 2 Data Binding

  • Data binding is the synchronization of data b/w the model and view components.
  • To display the component property, we can put its name in the view template, enclosed in double curly braces.
  • Two way data binding merges property and event binding in a single notation using the directive ngModel.


Data Display

  • Can display data with the help of binding controls in the UI.
  • Angular will display the data by using interpolation and other binding properties such as using binding in HTML template to the Angular component properties.

User Input

  • Binding to user input events.
  • User input from $event Object.
  • User input from Local Template Variable.
  • Key event filtering.
  • On blur event.

Angular 2 Form

  • The form-group, form-control and btn classes from Bootstrap.
  • The [(ngModel)] for data binding and ngControl directive to keep track of control state for us.
  • The ngControl is one among in ngForm directive family which is used for vaildation and tracking the form elements.
  • The ngSubmit directive is used for handling the submisison of the form.

Angular 2 Services

  • Services are the JavaScript functions that are responsible for doing a specific task only.
  • Angular services are injected using Dependency Injection mechanism and include the value, function or feature which is required by the app.

Angular 2 Directives

  • Templates of the Angular are dynamic, when these templates are rendered by Angular, it changes the DOM according to the directive fed instructions.
  • The directive is a class which contains metadata which will be attached to the class by the @Directive decorator.
  • Angular has three kinds of directives:


Component
It is a directive-with-a-template and the @Component decorator which is indeed a @Directive decorator wherein the template-oriented feature is extended.

Structural directive
It alters the layout of the DOM by adding, replacing and removing its elements.

Attribute directives
It changes the appearance or behavior of a DOM element. These directives looks like regular HTML attributes in templates.

Dependency Injection

  • DI is a design pattern that passes an object as dependencies in different components across the application.
  • It creates a new instance of class along with its required dependencies.
  • The DI is stimulated into the framework and can be used everywhere.


Remember the below points:

  • The injector mechanism maintains service instance and can be created using a provider.
  • The provider is a way of creating a service.
  • We can register the providers along with injectors.

Comments

Post a Comment

Popular posts from this blog

Angular 2/4 NGX Translate Complete Implementation with Example

Angular 2/4 and TypeScript Dynamically Access/Append HTML Nodes