Saltear al contenido principal
Intro To Angular 2

Intro to Angular 2

  • Blog

In this post I’m going to show you how to start a Project in Angular 2. First of all I’ll explain briefly what Angular 2 is. Secondly, I’ll show you some features, advantages and disadvantages of being used. Then we’ll create a quickstart Project in Angular 2 that can be the start template to create another Project more bigger.

What is Angular 2?

Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript and has been conceived as a mobile first approach. Angular 2 includes typescript to bring true object oriented web development to the mainstream. Is not absolutely necesary but recommendend to have NODE JS installed if you want to work with Angular 2. It’s also recommended to work with one editor that allows you to navigate through the files of the folders and subfolders and let you to color the syntax of JavaScripts and/or TypeScript files or Angular file resources (css, html) to let you read and understand code easily. In my case I decided to use Sublime Text 3, but other different editors are available on the web.

Why to use Angular 2?

  • Angular 2 is simpler than Angular 1 and its fewer concepts make it easier to understand.
  • You can update the large data sets with minimal memory overhead.
  • It will speed up the initial load through server side rendering.

Features of Angular 2

  • Angular 2 is faster and easier than Angular 1.
  • It supports browsers’s latest versions and also supports old browsers including IE9+ and Android 4.1+.
  • It is a cross platform framework.
  • Angular 2 is mainly focused on mobile apps.
  • Code structure is much rather simplified than the previous version of Angular.

Advantages of using Angular 2

  • If an application has heavy load, then Angular 2 keeps it fully UI responsive.
  • It uses server side rendering for fast views on mobile.
  • It works well with ECMAScript and other languages that compile to JavaScript.
  • It uses dependency injection to maintain applications without writing too long code.
  • Everything will use the component based approach.

Disadvantages of Angular 2

  • Since Angular 2 is a newly introduced framework, there isn’t much online community support.
  • It takes time to learn if you are new to Angular 2.

Oficial web of Angular 2

https://angular.io/

QuickStart

You can follow next steps with more detail on:

In Angular 2 QuickStart can be downloaded easily with git and node js console statements using  Node JS command prompt.

Let’s do the next steps:

git clone https://github.com/angular/quickstart.git quickstart

cd quickstart

npm install

npm start

First open Node JS command prompt and go to the C unit root:

Intro to Angular 2

Then type the following statement to get the quickstart from github angular web.

git clone https://github.com/angular/quickstart.git quickstart

After this statement, quickstart folder will be created and quickstart Angular 2 template will be automatically downloaded into the quickstart folder.

Intro to Angular 2

Let’s open the quickstart folder from Sublime Text 3 and we’ll see the quickstart folder with more detail:

Intro to Angular 2

Here you have a Little description that explains what the most important files are:

  • index.html:

Html file that is mandatory and has the references to the Angular libraries that are needed it in the application.

  • App.component.ts:

Defines the same AppComponent as the one in the QuickStart context. It is the root component what will become a tree of nested components as the application evolves. Is the component that is going to be accessed from the main.ts (Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen). SELECTOR is set to my-app. <my-app> tag is used on the Index.html to invoke the component.

  • App.module.ts:

Defines AppModule, the root module that tells Angular how to assemble the application. In the quickstart it declares only the AppComponent. In other more complete applications there will be more components to declare. All component dependencies must be declared in this file.

  • Main.ts:

Contains the statements that compile the application with the JIT compiler and bootstraps the application to run in the browser. That’s a reasonable choice for the development of most projects and it’s the only viable choice for a sample running in a live-coding environment like Plunker.

  • Style.css:

Global styles of the application can be declared on this default style file. If you create more tan one component, each component could have their own style.

  • Systems.config.js:

Tells the SystemJS module loader where to find modules referenced in JavaScript import statements such as the app.component statement

import { Component } from ‘@angular/core’;

Don’t touch this file unless you are fully versed in SystemJS configuration.

  • Package.json:

Identifies npmpackage dependencies for the project. Contains command scripts for running the application, running tests, and more. Enter npm run for a listing.

The other files and folders are explained in:

https://angular.io/docs/ts/latest/guide/setup-systemjs-anatomy.html

So let’s continue with the other statements…

Npm install

This command can accept other parameters. If no parameters are specified all library dependencies of the Project are installed. The own dependencies of the Project are available at the package.json and the version of the dependency is specified for each dependency on this file (package.json).

In progress…

Intro to Angular 2

After finishing:

Intro to Angular 2

Now in our folder we have a new subfolder called node_modules where reside all file dependencies:

Intro to Angular 2

@angular/common folder:

Intro to Angular 2

Npm start

If you execute this command on the root (C:\quickstart) the following things will happen:

Compile the angular application (the compile process can be done with the statement of TypeScript tsc – -watch)

If the compile process is successful

Starts the application in localhost mode

Else

Shows the errors at the node js command prompt window

Intro to Angular 2

The quickstart application starts at localhost:3000

Intro to Angular 2

Written by Alejandro Royo

Esta entrada tiene un comentario
  1. A día 13 de marzo de 2017, he detectado que en la última versión de quickstart disponible en la web se ha reubicado la carpeta app y los ficheros
    (index.html
    main.js
    main.ts
    styles.css
    systemjs.config.js
    tsconfig.json) dentro de la carpeta src.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Volver arriba