frameworks js - uniandesisis3710/...framework js para front-end-orientado a componentes -data...

FRAMEWORKS JSISIS 3710

Frameworks JS

http://todomvc.com/

NPM

https://www.npmjs.com/

NPM

https://www.npmjs.com/

npm viene con la instalación de node

Instalación global (busca package.json)

Los archivos se descargan en node_modules

Bower

https://bower.io/

Bower

https://bower.io/

Se requiere git, node, npm

Comando

bower.json

https://github.com/bower/spec/blob/master/json.md

Bower

Ejemplos bower.json

https://github.com/twbs/bootstrap/blob/d0926f2debde5e920ca369ad56a07e7c8bacdd89/bower.json

Bootstrap

Boostrap-saashttps://github.com/twbs/bootstrap-sass/blob/

1f269b15ff91ebe35fc04959a6e38caecb19dc4f/bower.json

https://github.com/twbs/bootstrap/blob/d0926f2debde5e920ca369ad56a07e7c8bacdd89/bower.json

https://github.com/twbs/bootstrap-sass/blob/1f269b15ff91ebe35fc04959a6e38caecb19dc4f/bower.json

Bower

https://bower.io/

Los paquetes se instalan en bower_components/ (en el mismo dir donde se encuentra bower.json)

Grunt

http://gruntjs.com/

Gruntfile.js

http://gruntjs.com/

Grunt


Comando para compilar y ejecutar servidor web

http://gruntjs.com/

Comando para ejecutar pruebas

Yeoman

http://yeoman.io/

Yeoman


Comando para instalar generadores

http://yeoman.io/

http://yeoman.io/

Yeoman: Angular JS generator

Se requiere git, node, npm, bower, yo, grunt, karma

Comando para generar app

https://github.com/yeoman/generator-angular

Yeoman: Angular JS generator

Angular

Framework JS para front-end

- Orientado a componentes

- Data binding entre la vista y el controlador

- Orientado al desarrollo de web apps basadas en CRUD

- Angular no es una buena opción para aplicaciones con complicada e intensa manipulación DOM

Angular

Template

Template

Template

Controller

Controller

Controller

Archivos HTML con directivas Angular

Datos y funcionalidad enlazada a la vista (JS)

Angular

Template

Template

Template

Controller

Controller

Controller

Archivos HTML con directivas Angular

Datos y funcionalidad enlazada a la vista (JS)

Scope

Módulo Angular

Template

Template

Template

Controller

Controller

Controller

Scope

ServiceService

Service

Router

Angular: Módulos

/scripts/app.js

Angular: Módulos

/scripts/app.js

Nombre del módulo

Angular: Módulos

/scripts/app.js

Dependencias (otros módulos)

La directiva ng-app se usa para enlazar un template con el módulo

Angular: Módulos

El template debe incluir el js de angular y los js con la declaración de los módulos

ISIS3710App

isis3710App

/scripts/app.js

Angular: Controladores

Se declara como una función constructora adjunta a un módulo y se incluye en el template


Se declara como una función constructora adjunta a un módulo y se incluye en el template

Se definen atributos y métodos para data binding con la vista


/scripts/controllers/main.js

ISIS3710App

isis3710App

/scripts/app.js


(isis3710App)MainCtrl

Yeoman !!


/scripts/controllers/users.js


Ejemplo de https://docs.angularjs.org/guide/concepts

https://docs.angularjs.org/guide/concepts

ISIS3710App

isis3710App

/scripts/app.js

/scripts/controllers/main.js(isis3710App)

MainCtrl


(isis3710App)UsersCtrl

Data binding

Sincronización automática de datos entre el modelo y los componentes en la vista:

cuando el modelo cambia, la vista refleja el cambio, y viceversa

Template

HTML + directivas

Data binding



Template

HTML + directivas

View

Compilación (browser)

Data binding



Template

HTML + directivas

View

Compilación (browser)

Modelo

Binding

Templates (Views)

Templates (Views)

????

Templates (Views)

Controller

Template

Templates (Views)

Template ControllerScope

Scope

Templates (Views)

Incluir una vista y enlazar la vista a un controlador

Yeoman !!

/views/users.html

Templates (Views)

index.html

Templates (Views)

Templates (Views)

ISIS3710App

isis3710App

/scripts/app.js





/views/users.html


index.html

Templates (Views)

Templates (Views)

main (view)

users (view)

ISIS3710App

isis3710App

/scripts/app.js





/views/users.html


index.html

/views/main.html


Directivas

- Data binding entre templates y controllers

- Estructura de control e iterativas para elementos DOM

- Visualización (ocultar/mostrar) elementos DOM

- Manipulación/Gestión de eventos

- Modificación de elementos DOM

- Agrupamiento de componentes para reuso

- Formularios y validación

Directivas

https://docs.angularjs.org/api/ng/directive

ng-if:

ng-model:

ng-repeat:

remueve o re-crea elemento basado en expresión booleana

data binding de un elemento HTML a una propiedad en el scope

iterador

expresiones no funcionan con atributo src

method binding o expresión para evento click

ng-src:

ng-click:

Directivas


ng-repeat:

Directivas


ng-src:

Directivas


ng-click:

frameworks js - uniandesisis3710/...framework js para front-end-orientado a componentes -data...

Documents