Instalación

Con estos ejercicios se pretende familiarizar a un desarrollador principalmente con Angular,

y adicional a la metodología de desarrollo que se está implementando en el proyecto
CAAFI.

Hay 3 proyectos, los cuales los pueden clonar:

DraiFlix: Es el proyecto de FrontEnd en Angular, y es el que se creará en esta serie de
ejercicios desde cero.
DraiFlixBaaS: Es el Backend como servicio de la aplicación DraiFlix.
DraiFlixBD: Contiene la base de datos de la aplicación DraiFlix.

Por ssh:
git@svningenieria.udea.edu.co:elias.devargas/DraiFlix.git
git@svningenieria.udea.edu.co:elias.devargas/DraiFlixBD.git
git@svningenieria.udea.edu.co:elias.devargas/DraiFlixBaaS.git

Por http:
http://svningenieria.udea.edu.co:8080/elias.devargas/DraiFlixBaaS.git
http://svningenieria.udea.edu.co:8080/elias.devargas/DraiFlixBD.git
http://svningenieria.udea.edu.co:8080/elias.devargas/DraiFlix.git

Después de clonar esos proyectos, corren el script sql de DraiFlixBD que se llama script-
creacion. El cual creará la base de datos con unos datos dummies.
Después abrirán el proyecto de DraiFlixBaaS en Netbeans. Crean la conexión a la base
de datos y configuran el persistence.xml para luego ejecutar la aplicación. Si se ejecuta
correctamente les abrirá el index.html con enlaces a los servicios web

Instalando Node y Angular CLI

Si no tienen node en sus equipos: https://nodejs.org

Instalamos la consola de angular

npm install -g @angular/cli@1.4.8

Creamos el proyecto
ng new DraiFlix -dir=/DraiFlix

Ahora se se configura el packege.json con las versiones que se están usando

actualmente en el proyecto:
{
"name": "caafi",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "4.4.6",
"@angular/cdk": "2.0.0-beta.11",
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/flex-layout": "2.0.0-beta.8",
"@angular/forms": "4.4.6",
"@angular/http": "4.4.6",
"@angular/material": "2.0.0-beta.11",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
"angular": "1.6.6",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ngx-restangular": "1.0.11",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.8",
"@angular/compiler-cli": "4.4.6",
"@angular/language-service": "4.4.6",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
 "karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3"
}
}

Ahora es necesario ejecutar npm install para que el CLI de Angular descargue los
módulos que especificamos en el package.json

Después de instalado los módulos, se configura Angular Material. Para esto se pone
lo siguiente en el index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?

family=Material+Icons">

Actualizamos el módulo root

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import 'hammerjs';
y luego se actualiza el imports del decorador

(Esto se puede obviar porque ya está configurado en el package.json anterior)

Instalaremos los iconos de Font awesome en el proyecto mediante el comando
npm install font-awesome --save

Luego agregamos a la configuración del proyecto la hoja de estilos.

Abrimos .angular-cli.json que es donde se guardan las configuraciones y en style se
agrega lo siguiente
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
Para iniciar el proyecto
ng serve

Sugerencia: Realizar commit con mensaje descriptivo de lo que hizo.

Recursos extras
● Angular.io
● Angular CLI
● Angular Material 2
● Angular Material Toolbar
● Angular Flex Layout
● Angular Flex Layout Documentation

Typescript
● Typescript
● Typescript Tutorial
● Typescript: Migrating from JavaScript

Definitions
● Framework
● Hollywood Principle
● Inversion of Control
● Imperative vs Declarative Programming
● Imperative vs Declarative

Blog Articles
● 5 Best JavaScript Frameworks in 2017
● Top JavaScript Frameworks & Topics to Learn in 2017
● Declarative vs. Imperative Programming for the Web
● Intro to Material (2) Components, Custom Styles, Buttons & Indicators — Using
Angular Material (2) Components in your Angular (2) Project