Upload
others
View
15
Download
0
Embed Size (px)
Citation preview
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
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
Se requiere git, node, npm
Comando para compilar y ejecutar servidor web
http://gruntjs.com/
Comando para ejecutar pruebas
Yeoman
http://yeoman.io/
Yeoman
http://yeoman.io/
Yeoman
Se requiere git, node, npm
Comando para instalar generadores
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
Yeoman: Angular JS generator
Yeoman: Angular JS generator
Yeoman: Angular JS generator
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
Angular: Controladores
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
Angular: Controladores
/scripts/controllers/main.js
ISIS3710App
isis3710App
/scripts/app.js
/scripts/controllers/main.js
(isis3710App)MainCtrl
Yeoman !!
Yeoman !!
Yeoman !!
Yeoman !!
Yeoman !!
Angular: Controladores
/scripts/controllers/users.js
Angular: Controladores
Ejemplo de https://docs.angularjs.org/guide/concepts
ISIS3710App
isis3710App
/scripts/app.js
/scripts/controllers/main.js(isis3710App)
MainCtrl
/scripts/controllers/users.js
(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
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
View
Compilación (browser)
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
View
Compilación (browser)
Modelo
Binding
Templates (Views)
Templates (Views)
Templates (Views)
????
Templates (Views)
Controller
Template
Templates (Views)
Controller
Template
Templates (Views)
Controller
Template
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)
index.html
Templates (Views)
Templates (Views)
Templates (Views)
Templates (Views)
ISIS3710App
isis3710App
/scripts/app.js
/scripts/controllers/main.js
(isis3710App)MainCtrl
/scripts/controllers/users.js
(isis3710App)UsersCtrl
/views/users.html
(isis3710App)UsersCtrl
index.html
Templates (Views)
Templates (Views)
Templates (Views)
main (view)
users (view)
Templates (Views)
main (view)
users (view)
Templates (Views)
main (view)
users (view)
ISIS3710App
isis3710App
/scripts/app.js
/scripts/controllers/main.js
(isis3710App)MainCtrl
/scripts/controllers/users.js
(isis3710App)UsersCtrl
/views/users.html
(isis3710App)UsersCtrl
index.html
/views/main.html
(isis3710App)MainCtrl
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
https://docs.angularjs.org/api/ng/directive
ng-repeat:
Directivas
https://docs.angularjs.org/api/ng/directive
ng-src:
Directivas
https://docs.angularjs.org/api/ng/directive
ng-click: