Angular - Requerimientos de instalación local

Angular (comúnmente llamado "Angular 2+" o "Angular 2"), es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas adicionales, entonces obedece a las directivas de los atributos personalizados, y une las piezas de entrada o salida de la página a un modelo representado por las variables estándar de JavaScript.

Angular se basa en clases tipo "Componentes", cuyas propiedades son las usada para hacer el binding de lo datos. En dichas clases tenemos propiedades (variables) y métodos (funciones a llamar).

1. NodeJS: https://nodejs.org/es/
2. Google Chrome: https://www.google.es/chrome/browser/desktop/
3. TypeScript: http://www.typescriptlang.org/
4. Angular CLI https://cli.angular.io/
https://github.com/angular/angular-cli
5. Ionic http://ionicframework.com/getting-started/

Editores de Texto:

Atom

https://atom.io/

Visual Studio Code

https://code.visualstudio.com/

Plugins recomendados para los siguientes editores:

ATOM

• Angular 2 Type Script Snippets
• Atom Bootstrap3
• Atom Typescript
• File Icons
• Platformio Ide Terminal
• V Bootstrap4

Visual Studio Code

• Angular 2 TypeScript Emmet 

• Angular 5 Snippets – TypeScript, Html, Angular Material... 

• Angular Language Service 

• Angular v5 Snippets 

• Angular2-inline 

• Bootstrap 4 & Font Awesome snippets 

• HTML CSS Support 

• JavaScript (ES6) code snippets 

• JS-CSS-HTML Formatter 

• JSHint 

• Material Icon Theme
• Prettier – Code Formatter 

• Terminal 

• TSLint 

• TypeScript Hero 

• TypeScript Importer

TRABAJANDO CON PRIME NG

TS

//------------------------//
//--CREAR NUEVO PROYECTO--//
//------------------------//
ng new project
//SE ESCOGE LOS ESTILOS GENERALES CON SASS

//----------------------//
//--ENTRAR AL PROYECTO--//
//----------------------//
cd project

//-------------------------//
//--INSTALAR DEPENDENCIAS--//
//-------------------------//
npm install primeng --save
npm install primeicons --save

//---------------------------//
//--INSTALAR LA ANIMACIONES POR CONSOLA GENERAL y parado en el proyecto--//
//---------------------------//
npm install @angular/animations --save

//---------------------------------------------//
//--IMPORTAMOS LAS ANIMACIONES EN APP MODULES--//
//---------------------------------------------//
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
BrowserAnimationsModule

//---------------------------------------------------------------//
//--ACTUALIZAR LOS ESTILOS DEL ARCHIVO: project/src/styles.scss--//
//---------------------------------------------------------------//
@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';


//---------------------------------------------------------------//
//--ACTUALIZAMOS LAS DEPENDENCIAS DE "project/src/package.json"--//
//---------------------------------------------------------------//
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"core-js": "^2.5.4",
"primeflex": "^1.0.0-rc.1",
"primeicons": "^1.0.0",
"primeng": "^8.0.0-rc.1",
"rxjs": "~6.5.2",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},

//-------------------------------------------------------------------//
//--ACTUALIZAR LOS ESTILOS EN EL ARCHIVO "project/src/angular.json"--//
//-------------------------------------------------------------------//
"styles": [
"src/styles.scss",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],

//REVISAR QUE TODO ESTE GUARDADO Y EJECUTAMOS EN CONSOLA DE VISUAL:
npm i
//CERRAR Y ABRIR EL VISUAL STUDIO CODE