Posts

Showing posts from August, 2017

Hello world Application

Image
Start with Hello world Application Angular 2 can be coded in many ways. First option is to start from the scratch .But I would not recommend this for beginners because there are so many dependencies need to be added to the project . For beginners,I recommend following option to start with Use Quick start at Angular Github. Use Angular CLI. Setting up an Environment. To begin with, I have used 2nd option for this example as this is a good way to start .Following is the URL for Angular Github. Go to Project directory   ⟹   Open cmd  ⟹   Type bellow URL git clone https://github.com/angular/quickstart Hello Then clone the github repository to your local system and this will create sample “Hello”Angularjs application . File structure Even Though there are so many tools available for development , I have used Visual studio Code .VS Code automatically compile and create JavaScript files because Angular 2.0 is a typescript which needed to be compi...

Angular 2.0 Components - Part 2

Image
Templates define a component's view or HTML content for the component.In template there are two type define template in-line template template URL command This is how it work Metadata Metadata defines the way to process a class. We can define the metadata by using decorator. The @Component decorator, which identifies the class immediately below it as a component class.If the “Component” is not defined, then Type Script  treats this as a simple class. Data binding Used to bind the data between view and business logic . In angular 2.0 there are four forms of data binding . As a summary of data binding. Directives Used to extend HTML attributes and provide some special behaviors to HTML DOM elements.A directive is a class with a @Directive decorator. There are two type of Directives structural directives : alter layout by adding, removing, and replacing elements in DOM Attribute directives : alter the appearance or behavior of an existing element....

Angular 2.0 Components

Image
Angular 2.0 Components Modules   designed for performed single task .Every angular app has at least one root module and more featured module.angular is a class which is decorated with @NgModule . NgModule is a decorator function that takes a single metadata object whose properties describe the module. Declarations : Describes the view class for the module.there are three kind of view class available Components  Directives  Pipes Imports - Define the modules that we want to import in our module. Providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app. Exports - Defines the name for the module, using which we can use this module. Bootstrap - It defines the main component to be Bootstrap in main.ts file. Components similar to a controller class with a template so components deal with view of the Application and the logic on the page.     ...

Angular 2.0 overview

Image
This is my 3rd article so I decided to move  to post angular 2.0 tutorial series because it has become more popular among  front end developers and more user friendly than JavaScript. so my first articles contain an overview of angular 2.0 . I recommend you to  invest your time in learning Angular 2.0 as this has become one of the the leading frameworks in this era. Angular 2.0 overview Angular 2.0 Open source JavaScript framework to build web application.this framework build by Google . Why go with Angular 2.0 To address problem in single page and testing application consider as key point . Easy to test the applications. focus on the development of mobile app. Angularjs is a module based framework but, Angular 2.0 is a component based framework ,so it has improved the performance & remove several modules.Angular 2.0 is based on Typescript. Typescript : Typescript developed by Microsoft . Strongly typed language (each type of data ...