Angular 2 Tutorial for Beginners

Angular 2 Tutorial for Beginners

  • 2016-09-21
  • 1211

Completely a New Era

The current Angular 1.x framework cannot work with new web components, as it lends itself to mobile applications and pushes its own module and class API against the standards. To answer these issues, the angularjs team is coming up with the angularjs 2.0 framework. angularjs 2.0 is a reimaging of angularjs 1.x for the modern web browser.

So what is Angular 2? How about we take a gander at its center and characterizing highlights:

  1. a full system with backing for structures, http solicitations, and a great deal more. It’s a finished toolbox to building a web application.

  2. ES6 and TypeScript perfect implying that it plays well with ES6 modules, class frameworks, and has sort support.

  3. Keen Dependency Injection which can be utilized to go in classes and administrations with particular arrangement (over the application) or pass them to be named and utilized under an alternate name. Yet, you can in any case utilize your ES6 modules for anything that doesn’t fit the DI plan. You likewise utilize need to infuse orders for templating.

  4. Effective templating that is basically HTML with sugar language structure that permits you to exploit two-way tying, occasions, and so forth right in your layouts. Worked in mandates take into account considerably all the more effective templating with foreach circles (for of), ngIf and others.

  5. Modular. Angular 2 is broken down to numerous sub-packages

6 . Angular Universal. A task that permits sharing Angular code between different stages. There is work to make Angular work on the back-end and with NativeScript as a component of application improvement.

All of what sounds simply like Angular 1 however it’s equitable so much better. It’s modernized Angular.

May Be there is some diffrence

1 .Genuine fast, we should examine what’s distinctive. Hold up, hold up, too long of a rundown, we should discuss what continued through to the end:

2 .despite everything you utilize HTML formats with Angular2 sentence structure on top of it for extra usefulness
there are still two-path ties regardless of what you’ve been told

3 .mandates exist (yet in an alternate structure)

4 .administrations are still there (yet nothing else… well, sort of)

5 .AngularJS still has its very own DI however you can go around it on the off chance that you please.

There are a lot of things that changed, obviously. One of the biggest changes was slimming down the API. There are no more “providers” and “factories”, etc. Everything is just either Injectable (a class that can be DIed) or not. There is also no scope, everything is attached to your component class. There are no controllers. And everything is much faster.

note Actually, there are still factories and other types of services as I understand it but they’re low-level and should be used only in very specific instances. Think of them in terms of “private” (or Angular 2 internal) implementations. For all intents and purposes, you can forget about them.

In angularjs 1.x, the routing was designed to handle a few simple cases. As the framework grew, more features were added to it. angularjs 2.0 includes the following basic routing features, but will still be able to extend:

  • JSON route configuration
  • Optional convention over configuration
  • Static, parameterized, and splat route patterns
  • URL resolver
  • Query string
  • Push state or hash change
  • Navigation model
  • Document title updates
  • 404 route handling
  • Location service
  • History manipulation
  • Child router
  • Screen activate:
*   `canActivate`
*   `activate`
*   `deactivate`

Dependency Injection

The main feature of angularjs 1.xwas Dependency Injection (DI). It is very easy to used DI and follow the divide and conquer software development approach. In this way, the complex problems can be abstracted together and the applications that are developed in this way can be assembled at runtime with the use of DI. However, there are few issues in the angularjs 1.x framework. First, the DI implementation was associated with minification; DI was dependent on parsing parameter names from functions, and whenever the names were changed, they were no longer matching with the services, controllers, and other components. Second, the missing features, which are more common to advance server-side DI features, are available in .NET and Java. These two features add constraints to scope control and child injectors.

Annotations

With the use of AtScript in the angularjs 2.0 framework, a way to relate metadata with any function was introduced. The formatting data for metadata with AtScript is strong in the face of minification and is easy to write by pointer with ES5.

The instance scope

In the angularjs framework 1.x, in the DI container, all the instances were singletons. The same is the case with angularjs 2.0 by default. However, to get different behavior, we need to use services, providers, constants, and so on. The following code can be used to create a new instance every time the DI. It will become more useful if you create your own scope identifiers for use in the combination with child injectors, as shown:

@TransientScope

Export class MyClass{…}

The child injector

The child injector is a major new feature in angularjs 2.0. The child injector is inherited from its parent; however, the child injector has the ability to override the parents at the child level. Using this new feature, we can call certain type of objects in the application that will be automatically overridden in various scopes. For example, when a new route has a child route ability, each child route creates its own child injector. This allows each route to inherit from parent routes or to override those services during different navigation scenarios.

Some Changes in Directives too

Directives in the angularjs framework are meant to extend the HTML. In angularjs 1.x, the Directive Definition Object (DDO) is used to create directives. In angularjs 2.0, the directives are made simpler. There are three types of directives in angularjs 2.0:

  • The component directive: This is a collection of a view and a controller to create custom components. It can be used as an HTML element as well as a router that can map routes to the components.
  • The decorator directive: Use this directive to decorate the HTML element with additional behavior, such as ng-show.
  • The template directive: This directive transforms HTML into a reusable template. The directive developer can control how the template is instantiated and inserted into the DOM, such as ng-if and ng-repeat.

The controller in angularjs 2.0 is not a part of the component. However, the component contains the view and controller, where view is an HTML and controller is JavaScript. In angularjs 2.0, the developer creates a class with some annotations, as shown in the following code:

@dirComponent({

Selector: 'divTabContainter'

Directives:[NgRepeat]

})

Export class TabContainer{

    constructor (panes:Query<Pane>){

    this.panes=panes
      }
select(selectPane:Pane){…}

}

In the preceding code, the controller of the component is a class. The dependencies are injected automatically into the constructor because the child injectors will be used. It can get access to any service up to the DOM hierarchy as well as it will local to service element. It can be seen in the preceding code that Query is injected. This is a special collection that is automatically synchronized with the child elements and lets us know when anything is added or removed.

Lets try Tutorial of angularjs 2

Angular team has released a tutorial on how to get started, where they explain how to setup the project and run a simple Hello World example.

We will follow the same here. The tutorial they have provided is quite self explanatory with some “Googling”.

To get started, create a new folder named ng2 and open a new terminal/prompt here.

Make sure you have Git installed, and run


├── angular2
│   └── src
│       ├── change_detection
│       │   ├── parser
│       │   └── pipes
│       ├── core
│       │   ├── annotations
│       │   ├── compiler
│       │   │   ├── pipeline
│       │   │   ├── shadow_dom_emulation
│       │   │   └── xhr
│       │   ├── dom
│       │   ├── events
│       │   ├── life_cycle
│       │   └── zone
│       ├── di
│       ├── directives
│       ├── dom
│       ├── facade
│       ├── forms
│       ├── mock
│       ├── reflection
│       └── test_lib
├── dist
└── rtts_assert
    └── src

Build the App

The Angular tutorial suggests to create the project related files at the root of the directory. With so much going on at the root of the directory, I found it easy to maintain the files inside a folder named app. This situation is temporary till Angular 2.0 moves to a stable release.

So, create a new folder named app at the root of the project. Create a file named index.html inside the app folder. And update it as below


<html>
<head>
    <title>Angular 2 Hello World!</title>
    <script src="/dist/es6-shim.js"></script>
</head>
<body>
    <my-app></my-app>
    <script>
    // Rewrite the paths to load the files
    System.paths = {
        'angular2/*': '/angular2/*.js', // Angular
        'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
        'app': 'app.es6' // The my-app component
    };
    // Kick off the application
    System.import('app');
    </script>
</body>
</html>

Things to notice

Line 5 : We load up the es6-shim.js from the dist folder to work with ES6 in current browsers.

Line 10 : We created a new component named my-app. We will talk about components soon.

Line 13 : ES6 comes with Modules and Module Loaders. This makes on demand importing very easy. If you have used Requirejs or the Commonjs module system while working with Nodejs, this will look very familiar.

Line 14 : We refer Angular 2.0

Line 15 : We refer Runtime assertions library

Line 16 : We load a file named app.es6 that we will be creating next. This file will consist the definition for <my–app></my–app>
Line 20 : We kick off the app.

Next, create a new file named app.es6. The es6 extension indicates that you are loading a file with EcmaScript 6 syntax. (This is more for your text editor to show syntax highlighting. You can js extension as well if you feel that too much is changing).

// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'World!';
  }
}
bootstrap(MyAppComponent);

Getting back, As per the docs, Angular 2 works with a concept of components. And a component consist of 2 parts

  1. The Annotation Section – This consist of the meta data (component selector, template) for that component
  2. The Component Controller Section – This is a ES6 Class, from which the template would be reading the properties that are interpolated ({{…}}) inside it .

So, (referring to app.es6)

Line 5 : Identify the selector on page that would be the base for our component

Line 8 : The template to be injected.Notice {{ name }}

Line 14 : Declare the values to be used in the template. In our case it is World!

And finally on line 19, we bootstrap the component. As per my understanding, this is similar to exporting the main object from this file (analogous to module.exports) but instantiating it before exporting.

That is all we need to build a Hello World app using Angular 2.0.

Launch and test the App

You can use any static server to launch the app. If you have python already installed, you can run

Windows 	*nix
python –m http.server 	python –m SimpleHTTPServer

from inside the hello2ng2 folder or you can use a node module named http-server to do the same. You can install the same using the below command

npm install http–server –g

And then you can launch the static server by running

http–server

from inside the hello2ng2 folder. And then navigate to http://localhost:8080/app/ you should see

Screen

Where to now?

I’ve scarcely touched the most superficial layer of Angular 2 yet you ought to have a thought of what it’s similar to create in it at this point and how it varies from Angular 1. I feel like numerous aides don’t stress the “application advancement” viewpoint enough or they do excessively.

There are quite a lot of things going on with Angular 2.0 and I think it would take another 3 – 4 months to get a fair idea on where Angular 2.0 is headed to.

You can track the progress here and Angular 2.0 milestones here.

You can also checkout the resources page, which has a few but helpful links on Angular 2.0.

Source via: dunebook.com

Suggest

Angular 2 with TypeScript for Beginners: The Pragmatic Guide

The Complete Angular 2 With Typescript Course - Update RC 6

Angular 2 and NodeJS - The Practical Guide to MEAN Stack 2.0

Angular 2 - The Complete Guide (Updated to Final Version!)

Learn Angular 2 Development By Building 10 Apps