Vamos a nuestro directorio donde hemos creado nuestro proyecto.
angular-phonecat en mi caso.
Creamos un reset para nuestro proyecto en GIT como base de nuestro repositorio.
git checkout -f step-0Esto nos deja un espacio de trabajo base.
Lo ideal sería ir haciendo checkout para cada paso así guardaremos un histórico con el que poder ir trabajando y recuperando versiones en el caso que fallemos en algo.
Como ya vimos tenemos la app funcionando en el servidor:
Terminal CMD:npm startNavegador: http://localhost:8000 Sí se aprecia el código fuente de esta web ya usa angular. Vamos por el buen camino. <!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html> Que hace el código. (Suponemos que no tenemos que explicar html, ni JS). <html ng-app> Esta etiqueta arranca la app angular.
Angular usa el denominado spinal-case para sus atributos y el camelCase para las directivas. Las directivas definen la parte que Angular debería tomar como elementos base.Esto nos da la livertad de decirle a Angular sí es la web entera o sólo un pedazo de esta la que actuará como aplicación.
Ejemplo:<html ng-app> VS<div ng-app>
<script src="bower_components/angular/angular.js"> Este código llama a la librería Angular la cual registra las llamadas que son ejecutadas en nuestro navegador cuando nuestro contenido html está completamente cargado. Cuando las llamadas son ejecutadas Angular visualiza los ngApp y sí encuentra directivas las aplicará a los elementos en los que las definimos.
Nothing here {{'yet' + '!'}} Esta línea muestra dos características fundamentales de las capacidades de angular La definición de funciones por medio de {{}}y la utilización de expresiones "código" + "código" Al encerrar código dentro de doble branch angular traduce que debería evaluar una expresión para introducirla en el DOM. Hay tres cosas importantens cuando angular trabaja. 1º El "injector", que será usado por las dependencias de este. var $injector = angular.injector();
expect($injector.get('$injector')).toBe($injector);
expect($injector.invoke(function($injector) {
return $injector;
})).toBe($injector); 2º Este injector, generará un root scope, que será el modelo de tu aplicación.
3º Cuando compilemos angular, el DOM inicializará en ngApp, procesando cualquier directiva que encuentre.
¿Como trabajar la carpeta que generamos en el anterior tutorial con vistas al desarrollo del tutorial principal?Construir un catálogo app web. Borraremos la carpeta de ejemplos appañadiremos una carpeta de imágenes app/img/phones/Aádiremos un archivo de datos JSON a app/phones/Aádiremos dependencias en bower.json
No hay comentarios:
Publicar un comentario