AngularJS 1 5 9

AngularJS
- Se usa para el desarrollo de lo que se denomina Front-Ends

- Su especialidad es el desarrollo de Single Page Apps
- El Navegador es quien realiza la mayor parte del trabajo
Apps.
- Son aplicaciones o sitios web.
- Su contenido completo se carga en una unica pagina.
- Es el navegador el que realiza la mayor parte del trabajo.
Directivas.
- Permiten a AngularJS modificar el DOM
HTTP servise para realizar peticiones AJAX de javascript a un servidor, para

traer datos
Controller.
- Se pueden crear tantos controladores como quieramos.
Modelo
- Un modelo puede hacer distintas cosas, datos en crudo, una tabla
AJAX, o un objeto javascript
- Los datos del modelo se muestran en la vista usando la expresion de
dobles llaves {{ }}.
Podemos definirlos de diferentes modos:
dentro de la directiva ng-init -> <body ng-init="
Creadores = 'PANCHO LOPEZ' "> [MALO]
dentro de un controler, usando el scope [modo correcto de
hacerlo]
- Se adapta al patron MVC
- Tiene que ir siempre dentro de un controller
$scope
- El scope determina el alcance, los limites de cualquier parte de una
aplicacion AngularJs
- es un objeto y se refiere al modelo de la aplicacion y proporciona un
contexto de ejecucion para las expresiones de las vistas (MVC)
- cada aplicacion angularjs tiene un scope raiz
NOTA:
- Existen compiladores que acortan tus variables, en el caso de $scope,
$http, la app tronaria ya que funcion
espera esas variables con esos nombre por lo que se sugiere es agregarlas
como string "$scope", "$http" he inmediatamente
se le inyectan a function en el orden correspondiente y estas ya pueden
tener el nombre de variable que quieran.
e.g.
myModule.controller('MainController', [ "$scope", "$http",

function(varScope, varHttp ) {
...
}]);
************* DIRECTIVAS ANGULAR JS
***********************************************************************************
*******************************
ng-app - Define el elemento dentro del cual angularJs se va a

autoejecutar,
En la mayoria de los casos se aade dentro de la
etiqueta html o body,
Tambien es posible aadirlo dentro de un div.
ng-init - Utilizado para definir las tareas de inicializacion

de la aplicacion.
ng-repeat - Muestra lista de items de coleccion
ng-show - true -> visible el elemento
ng-hide - true -> oculta el elemento
ngResource - Sirve para consumir apps REST
***********************************************************************************
********
Express - Servidor
instalar Express
npm install -g express-generator
crear servidor
express myServer
entramos al servidor y ejecutamos
npm install
Para ejecutarlo
npm start
C:\BackBase\AngularJS\myServer\public\arquitecturaAngularJs
http://localhost:3000/arquitecturaAngularJs/index.html
********************************************************************
GRUNT
- Automatizador de tareas, escrito en JavaScript, usado para automatizar todo
tipo de test unitarios en nuestras aplicaciones.
- Permite mezclar y reducir el tamao de archivos, tanto CSS, como
JavaScript, lo que mejora el rendimiento de nuestras aplicaciones.
Instalacion (iniciar CMD como Admin) he instalamos lo siguiente
npm install -g grunt-cli
Crear una carpeta MyProject y dentro de una crear un archivo package.json
{
"name":"MyProject",
"version":"0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-uglify": "~0.5.0",
"grunt-shell":"~0.7.0"
}
}
Dentro de la carpeta MyProject ejecutamos
npm install --save-dev
Instalar el init de grunt
npm install -g grunt-init
********************************************************************
GRUNT. Depurar Cdigo con Grunt (erramienta de testeo).
Como siguiente paso una vez instalado Express y Grunt

* Se requiere un Archivo JS, el cual se va a depurar.
* Se requiere Crear un archivo Grunt, donde se van a listar las tareas que
necesitamos que grunt lleve a cabo
1. Revisaremos primero si nuestro codigo JS esta limpio (jshint).

Creamos un archivo gruntfile.js
module.exports = function(grunt){
//project configuration
grunt.initConfig({
jshint:{
index:['index.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
//default task.
grunt.registerTask('default', ['jshint']);
};
ejecutamos
> grunt
Nos mostrara los posibles errores que tengamos de compilacion.
*************************
GRUNT. Mezclar (concat) y Reducir archivos .js (uglify) con Grunt

contac. junta varios JS en uno solo
uglify. simplifica un js y y genera un archivo.min.js
grunt.initConfig({
concat: {
dist: {
src:
['index.js','scripts1.js','scripts2.js','cierre.js'],
dest: 'unidos.js'
}
},
jshint:{
index:['unidos.js']
},
uglify:{
dist:{
src:'unidos.js',
dest: 'build/unidos.min.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
//default task.
grunt.registerTask('default', ['concat','jshint','uglify']);
};
*************************
GRUN. Shell
Nos permite de modo directo y rapido ejecutar actividades de limpieza, borrar
archivos temporale, etc.
grunt.initConfig({
concat: {
dist: {
src:
['index.js','scripts1.js','scripts2.js','cierre.js'],
dest: 'unidos.js'
}
},
jshint:{
index:['unidos.js']
},
uglify:{
dist:{
src:'unidos.js',
dest: 'build/unidos.min.js'
}
},
shell: {
multiple: {
command: [
'del unidos.js',
'mkdir deploy',
'move build\\unidos.min.js
deploy\\unidos.min,js'
].join('&&')
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-shell');
//default task.
grunt.registerTask('default', ['concat','jshint','uglify',
'shell']);
};
NOTA: si queremos solo ejecutar una de todas las tareas programadas ejecutamos
grunt concat // etc
********************************************************************
YEOMAN. Pack de Herramientas, para el flujo de trabajo.
Instalacion
npm install -g yo
instalar generador angularjs de yeoman
npm install -g generator-angular
Nos ubicamos en una carpeta donde queremos que se cree el proyecto y

Ejecutamos con
yo angular
y te pedira que dependencias deseas utilizar:

Gulp
Sass
Bootstrap
Nota: Esto genera el esqueleto de tu proyecto JS
para descargar las librerias que ocupa utilizamos el comando
npm install

AngularJS 1 5 9

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AngularJS 1 5 9

Uploaded by

Copyright:

Available Formats

AngularJS

- Se usa para el desarrollo de lo que se denomina Front-Ends

HTTP servise para realizar peticiones AJAX de javascript a un servidor, para

myModule.controller('MainController', [ "$scope", "$http",

ng-app - Define el elemento dentro del cual angularJs se va a

ng-init - Utilizado para definir las tareas de inicializacion

ng-repeat - Muestra lista de items de coleccion

ng-show - true -> visible el elemento

ng-hide - true -> oculta el elemento

ngResource - Sirve para consumir apps REST

npm install -g express-generator

entramos al servidor y ejecutamos

Instalacion (iniciar CMD como Admin) he instalamos lo siguiente

npm install -g grunt-cli

Crear una carpeta MyProject y dentro de una crear un archivo package.json

Dentro de la carpeta MyProject ejecutamos

npm install --save-dev

Instalar el init de grunt

npm install -g grunt-init

GRUNT. Depurar Cdigo con Grunt (erramienta de testeo).

Como siguiente paso una vez instalado Express y Grunt

1. Revisaremos primero si nuestro codigo JS esta limpio (jshint).

Nos mostrara los posibles errores que tengamos de compilacion.

GRUNT. Mezclar (concat) y Reducir archivos .js (uglify) con Grunt

grunt concat // etc

YEOMAN. Pack de Herramientas, para el flujo de trabajo.

instalar generador angularjs de yeoman

npm install -g generator-angular

Nos ubicamos en una carpeta donde queremos que se cree el proyecto y

y te pedira que dependencias deseas utilizar:

Nota: Esto genera el esqueleto de tu proyecto JS

para descargar las librerias que ocupa utilizamos el comando

You might also like