Angular 2 : Explanation of all files and folders created by Angular CLI

Lets take a moment to understand the files and folder structure that was created by Angular CLI.

It’s important to take a note of this directory structure and the location of the files because the application that the Angular CLI generates follows the recommended app structure and style guide.

While you may not need to understand each of these configuration files and folders in detail, its good to know what they are and why we need them. This post might get a little boring because of the sheer number of files that you will be introduced to but, i recommend that you follow this very closely.

tslint.js
TSLint checks your TypeScript code for readability, maintainability, and functionality errors. tslint.json file is used to configure which rules should run.

README.md
Readme.md is a markdown file for this project. README.md is used to generate the html summary of our projects. Similar to what you see at the bottom of most gut hub projects, it contains information about various commands that can be used to build run and test this project with Angular CLI. This might come in handy as a quick reference when you have just started with Angular CLI.

protractor.conf.js
Protractor is an end-to-end test framework for Angular applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would. Protractor needs two files to run, a spec file and a configuration file. The protractor.conf.js file contains the configuration information to run the tests.

package.json
package.json file identifies npm package dependencies for the project. package.json file includes two sets of packages, dependencies and devDependencies. The dependencies are essential to running the application. devDependencies are only necessary to develop the application. You can exclude them from production installations.

karma.conf.js
Karma is a JavaScript test runner created by the Angular team. Karma needs to know about the project in order to test it and this is done via this karma configuration file.

angular.json
angular.json file contains configurations related to it’s functioning. Like what is the root folder, where to save the out files, which is the default index file, and so on.

.gitignore
gitignore is useful if you are using git for version control. This file specifies intentionally untracked files that Git should ignore.

.editorconfig
EditorConfig file is used to define and maintain consistent coding styles.

The majority of our application is under src/app. And this is where we will be working most of the time. You might create multiple folders under the app folder to organise your application. Like a folder for Home, one for About and so on.

Angular CLI has created a root component for us. Which is app.component.ts. Each component may have its own html and css file and that is what they are.

app.component.spec.ts
The app.component.spec.ts is the spec file for testing your component.

app.module.ts
app.module.ts file is our root module. we will discuss more about what and why we need our root component and root modules in the later sections.

index.ts
index.ts is a barrel module. A barrel is a way to rollup exports from several modules into a single convenience module. So here, instead of importing both app.component and app.module, we can now just import this barrel.

assets
assets is where you may want to keep your application assets like images, fonts, and so on.

environment
The environment folder consists of two environment files one for dev and one for production. The list of which env maps to which file can be found in angular-cli.json.

main.ts
main.ts file is used tell Angular to start up our application. This code initializes the platform that our application runs in, browser in this case and then uses the platform to bootstrap our AppModule.

polyfill.ts

Polyfills in angular are few lines of code which make your application compatible for different browsers. The code we write is mostly in ES6(New Features: Overview and Comparison) and is not compatible with IE or firefox and needs some environment setups before being able to be viewed or used in these browsers.

style.css
styles.css is used to add global styles and also import other style files.

test.ts
test.ts is used to initialize the Angular testing environment.

tsconfig.json
tsconfig.json defines how the TypeScript compiler generates JavaScript from the project’s files. This file contains options and flags that guide the compiler as it generates JavaScript files.

typings.d.ts
Typings is the simple way to manage and install TypeScript definitions. typings.d.ts is a Typings reference file.

node_modules
When we create an application using Angular CLI, it automatically downloads all the dependencies and saves them into this folder. It basically read’s the “package.json” file in the current directory and installs all the package’s dependencies into this folder.

e2e
Finally, we have a folder e2e that stands for end to end testing and this folder consists of the spec and configuration files related to end to end testing using protractor.

Now that we know what an angular 2 application is made of, let’s jump into understanding the building blocks of Angular 2 applications.

The following video might be helpful:

Continue Reading →

Angular2 CLI

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

Verify CLI

Before moving to Angular CLI commands, we have to ensure that Angular CLI is installed on your machine. If it is installed, you can verify it by using the command − ng version

If CLI is not installed, then use the below command to install it.

npm install -g @angular/cli

To create, run an application in Angular, use the below syntax 

ng new [PROJECT-NAME]
cd [PROJECT-NAME]
ng serve

Navigate to . http://localhost:4200/ The app will automatically reload if you change any of the source files.

You can configure the default HTTP host and port used by the development server with two command-line options :

ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services
You can use the ng generate (or just ng g) command to generate Angular components:

ng generate component my-new-component

ng g component my-new-component //using the alias

//components support relative path generation

//if in the directory src/app/feature/ and you run

ng g component new-cmp

//your component will be generated in src/app/feature/new-cmp 

You can find all possible blueprints in the table below:

scaffold	usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:

1. ng g module new-module to create a new module
2. call ng g component new-module/new-component

This should add the new component, directive or pipe reference to the new-module you've created.

Documentation
The documentation for the Angular CLI is located in this repo's wiki.

Continue Reading →

Difference between Angular 1 VS Angular 2

Difference between Angular 1 VS Angular 2

· Angular 2 is mobile oriented & better in performance.

Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile oriented.

· Angular 2 provides more choice for languages.

Angular 2 provides more choice for languages. You can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code. Where, Angular 1.x has ES5, ES6, and Dart. Using of TypeScript is a great step as TypeScript is an awesome way to write JavaScript.

· Angular 2 implements web standards like components.

Angular 2 implements web standards like components, and it provides better performance than Angular 1.

· AngularJS 2.0 is not easy to setup as AngularJS 1.x.

AngularJS 1.x is easy to setup. All you need to do is to add reference of library and you are good to go. Where AngularJS 2 is dependent on other libraries and it requires some efforts to set up it.

· Angular 1.x controllers and $scope are gone.

Angular 1.x controllers and $scope are gone. We can say that controllers are replaced with “Components” in Angular 2. Angular 2 is component based. Angular 2 is using zone.js to detect changes.

· Different ways to define local variables.

In Angular 2, local variables are defined using a Hash(#) prefix.

<div *ngFor="#technicalDiary of technicalDiries">

· Structural directives syntax is changed.

In Angular 2, Structural directives syntax is changed. ng-repeat is replaced with. *ngFor

· Angular 2 uses camelCase syntax for built-in directives.

Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now and ngClass ng-model is now ngModel.

· Angular 2, directly uses the valid HTML DOM element properties and events.

One of the major change in Angular 2 is, that it directly uses the valid HTML DOM element properties and events. Due to this, many of the available built-in directives in Angular 1.x are now no longer required. Like ng-href, ng-src, ng-show and ng-hide. Angular 2 uses href, src and hidden properties to get the same output. And same goes with event based directives like ng-click and ng-blur.

· One-way data binding directive replaced with [property].

In Angular 1.x, ng-bind is used for one-way data binding, but with Angular 2 it is replaced with, [property] where ‘property’ is valid HTML DOM element property.

Angular 1.x, one-way data binding

<input ng-bind="name"></input>

Angular 2, one-way data binding is achieved via wrapping the properties with square brackets.

<input [ng-bind]="name"></input>

· Two-way data binding: ng-model replaced with [(ngModel)]

In Angular 1.x, ng-model is used for two-way data binding, but with Angular 2 it is replaced with [(ngModel)].

Angular 1.x, two-way data binding,

<input ng-model="technology.name"></input>

In Angular 2,

<input [(ngModel)]="technology.name"></input>

· Way of Bootstrapping Angular Application is changed:

Angular 1.x has 2 ways to bootstrap Angular. One using ng-app attribute and other via code.

<script>
   angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
   });
</script>

In Angular 2, say goodbye to ng-app. The only way to bootstrap Angular is via code.

import { bootstrap } from 'angular2/platform/browser';
import { ProductComponent } from './product.component';

bootstrap(ProductComponent);

The bootstrap function is used and it takes starting component which is also parent component of your angular application.

· Ways of Dependency Injection is Changed- syntax changed.

One of the advantages of Angular is Dependency Injection. With Angular 2 DI is there but now there is a different way to inject dependencies. As everything is ‘class’ in Angular, so DI is achieving via constructors.

In Angular 1.x,

var myApp = angular
   .module("myModule", [])
   .controller("productController", function($scope, $http) {
        var prods = { name: "Prod1", quantity: 1 };
        $scope.products = prods;
    });

In Angular 2,

import { Injectable } from 'angular2/core';

@Injectable()

export class TechnologyService {
    constructor(private _http: Http) { }
    getTechnologies() {
        return [new technology(1, 'Angular'),
            new technology(2, 'jQuery',
            new technology(3, 'Node'),
            new technology(4, 'Knockout')
        ];
    }
}

Note: @Injectable() is added to service class. It is similar to Angular 1.x $inject used for DI.

· Way of routing is Changed- syntax changed.

Angular 2 has very powerful routes. The Angular 2 Router will only load components when it absolutely needs them. Kind of partial loading which is a great feature I think. Angular 2 is 5 times faster as compared to Angular 1

In Angular 1.x, we use $routeProvider.when() to configuring routing. Where in Angular 2, @RouteConfig{(...}) is used. ng-view present in Angular 1.x is replaced with <router-outlet>

In Angular 1.x,

var app = angular
        .module("MyModule", ["ngRoute"])
        .config(function ($routeProvider) {
            $routeProvider
            .when("/home", { templateUrl: "home.html", controller: "homeController" })
            .when("/technology", { templateUrl: "technology.html", controller: "technologyController" })
        })
       .controller("homeController", function ($scope) {
            $scope.message = "Home Page";
        })   
       .controller("technologyController", function ($scope) {
             $scope.technologies = ["ASP.NET", "jQuery", "AngularJS", "JavaScript"];
       })

In Angular 2,

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { TechnologyComponent } from './technology/technology.component';
import { TechnologyService } from './Technology/Technology.service';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS,
    TechnologyService
  ]
})
@RouteConfig([
  { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
  { path: '/technology', name: 'Technology', component: TechnologyComponent },
])

export class AppComponent { }

Routing is a separate module that’s why need to import it. And 2 more configurations need to be to make routing work, one is adding [ROUTER_DIRECTIVES] as directive and other is to add ROUTER_DIRECTIVES in providers list. And in HTML page,

 <ul>  
  <li><a [routerLink]="['Home']" href="">Home</a></li>  
  <li><a [routerLink]="['Technology']" href="">Technology</a></li>  
 </ul>  

ng-href is also replaced by [routerLink]

Conclusion:
Although angular 2 is still in beta, I consider this as a major upgrade from Angular 1. Angular 2 has very powerful routes. The Angular 2 Router will only load components when it absolutely needs them. Kind of partial loading which is a great feature I think. Angular 2 is 5 times faster as compared to Angular 1.

Continue Reading →

Angular - Overview

Angular is an open source framework built over JavaScript. It was built by the developers at Google. This framework was used to overcome obstacles encountered while working with Single Page applications. Also, testing was considered as a key aspect while building the framework. It was ensured that the framework could be easily tested. The initial release of the framework was in October 2010.

Features of Angular 

Following are the key features of Angular −

• Components − The earlier version of Angular had a focus of Controllers but now has changed the focus to having components over controllers. Components help to build the applications into many modules. This helps in better maintaining the application over a period of time.
• TypeScript − The newer version of Angular is based on TypeScript. This is a superset of JavaScript and is maintained by Microsoft.
• Services − Services are a set of code that can be shared by different components of an application. So for example if you had a data component that picked data from a database, you could have it as a shared service that could be used across multiple applications.

In addition, Angular 2 has better event-handling capabilities, powerful templates, and better support for mobile devices.

Components of Angular 2

Angular 2 has the following components −

• Modules − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
• Component − This can be used to bring the modules together.
• Templates − This is used to define the views of an Angular JS application.
• Metadata − This can be used to add more data to an Angular JS class.
• Service − This is used to create components which can be shared across the entire application.

Reasons to use Angular

I would suggest to start with Angular 12.x .

Angular 2 has improved lot in terms of design and speed. Only it is very different from Angular 1 and will have more learning curve. Angular 2 is released in October 16. So it is more stable now. Angular 4 is released in March 17. Each 6 months, they will be releasing new version. (I read as Angular 5 in Oct 17 and Angular 6 in Mar 18, But not sure about this.)

1. Speed - Angular 2 is 5x to 10x faster than Angular 1
2. Mobile Support - It is good to have mobile support. Angular 1 don't have support
3. Routing - Routing improved. It is good for SEO.
4. Testing and Debugging - This is good in Angular 2 and good while development
5. Templating - Templating is good and managed well in Angular 2.
6. Documentation - Doc is maintained good and complicated concepts from Angular 1 are no longer exists. Huge community is there to help in Angular 2.
7. Cost to Upgrade - Angular 2 is completely rewritten so we can not upgrade from Angular 1 to Angular 2 easily. Project will need to write from scratch if want to upgrade. As most of the concepts are deprecated and rewritten.
8. New versions - Angular 2 can be easily upgraded to Angular 4 by some find-replaces and additions. Angular 4 have not much changes than Angular 2. New versions (A5, A6) will not have drastic changes in design than Angular 2 and can be easily upgraded.

We will discuss all these components in detail in the subsequent post.

Continue Reading →