In this blog we discuss brief as Why we should consider Angular2 for Web development. Will define the installation steps to setup Angular 2. We will show were all the files are getting installed. We will develop 'My First App' and show in browser.
Why Angular.
This
is a front-end JavaScript framework. Many people were happy with the
functionality that Angular 1.x offered and Angular 2 improved on that
functionality and made it faster, more scalable and more modern.
Angular
2 has retained many of its core concepts and conventions with Angular 1.x. Who
are already proficient with Angular will have an easier time migrating to
Angular 2.
It
Is Easier.
The
new Angular codebase is more modern, more capable and easier for new
programmers to learn.
Angular 2 is a more streamlined framework
that allows to focus on simply building JavaScript classes.
Views and controllers are replaced with
components, comparing AngularJS 1.x.
Angular 2 components are considerably
easier to read, and their API features less jargon.
Why
to use TypeScript.
Angular
2 was written in TypeScript, a superset of JavaScript that implements many new
ES2016+ features.
By
focusing on making the framework easier for computers to process, Angular 2
allows for a much richer development ecosystem. Using text editors and IDEs
will notice dramatic improvements with auto-completion and type suggestions.
Performance
and Mobile.
Angular
2 was designed for mobile like Touch interfaces, limited screen real estate and
mobile hardware.
Desktop
computers will also see dramatic improvements in performance and
responsiveness.
Project
Architecture.
Angular
2.x makes use of the ES2015 module system, and modern packaging tools like
webpack or SystemJS. It's easier to write more generic JavaScript and plug it
into Angular. The new module system also makes it easier to develop effective
tooling that can reason better about larger projects.
Interesting
Features.
Some
of the other interesting features in Angular 2 are:
·
Form
Builder
·
Change
Detection
·
Templating
·
Routing
·
Annotations
· Shadow
DOM
Installation Steps
Command Line
1. Install Node.js and npm, if they are not already on Computer. This will install npm command on computer. This can be checked in control Panel->Uninstall a program.
2. The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
3. Set Path.
Using command npm install -g @angular/cli will install Angular/core, etc.This normally gets installed c:/users/<username>/AppData/Roaming/npm (This should have ng.exe command). One need to set path variable to execute ng command, if not proper set.
4. Command Steps.
Install from Node.js browser.
Enter following commands from Command Line.
- npm install -g @angular/cli
- ng new my-app
- cd my-app
- ng serve --open
This will open Project at localhost:4200
With entering command ng new my-app, this will create my-app project in c:\users\<username>\my-app folder.
my-app folder contains the following files.
- app.componebt.css
- app.component.html
- app.component.spec.
- app.component.ts
- app.module.ts
To Test do the modification in following files.
Edit app.component.html or Add/Edit variables in app.component.ts file. Example Add variables "subheading="sub heading" in app.component.ts file. Use it in app.component.html file as {{subheading}}.
In Eclipse
1. Install Node.js® and npm if they are not already on your machine.
2. The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
3. Create Dynamic Project. Load Project from Directory. The directory is created through above command steps.
4. Setup Eclipse with Tomcat.
5. Run Project
