Posts

Showing posts from 2017

Gulp Part 01

Image
In this article I'm going to discuss about one of the most popular angular Build Tool which is called Gulp. Component of modern front-end workflow npm : a programming library and package manager for Node.js and JavaScript (Node environment dev dependencies). yarn : A package manager for JavaScript. Bower : a package manager for the front-end dependencies . Chocolatey : Open-source decentralized package manager for Windows. Package Managers Automate packages and libraries that use in dev environment. Installation Upgrading  Remove Dependencies What is build tool Collection of  tasks that automate repetitive work. Why we need a build tool It helps to automate build processes. In general,mainly 4 things that can be automated by a build tool Development Testing Optimization and Deployment Present, there are so many build tools available for angular.Out of them the two most popular build tools are Gulp and Grunt . In this article I am discussin...

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 ...

OOP in C# part 02

Image
Encapsulation combining data,functions into a single unit called class and hiding internal details of object. Generally, Data hides for security such as making the variables as private.Encapsulation is implemented by using access specifiers. C# supports the following access specifiers: Real world example: TV Remote Abstraction   Process of hiding the details of implementation and display the essential feature (describe object, by define their unique & relevant characteristic) Real world example: TV  Encapsulation vs Abstraction Encapsulation Abstraction Solves the problem at Implementation level Design level Hide Code and data in class to protect Unwanted data and provide relevant data Inheritance A Class that derive from another class known as base class. This promote reuse and maintainability Public class parent{ //create constructor Public parent(){ Console.WriteLine( "Constructor." ); } public void display() {   ...

OOP in C#

Image
OOP in C# Class Blue print of Real word object Simply class is provide common structure to guide for making something OR Defines the characteristics of an entity , and includes properties that define the types of data that the object can contain and methods that describe the behavior of the object. Example: Animal is commonly using noun. So Animal has name,eye, body, leg etc.... these feature common for all animal. Object Object is real word entity . Feature, An object is a block of memory that has been allocated and configured according to the blueprint (class).Objects are also called instances Example: Animal = {dog, cat} Dog and Cat are real word existing thing. Class vs. Object  Class  Object Existence Logical existence Physical existence Memory Allocation Memory space is not allocated, when it is created. Memory space is allocated, when it is create...