Ahora nos estamos preparando para escribir la aplicación AngularJS - Phonecat. En este paso (paso 0), se familiarizará con los archivos de código fuente importantes, aprenderá a comenzar un entorno de desarrollo que contenga proyectos de semillas AngularJS y ejecute la aplicación en el lado del navegador.
Ingrese el directorio Angular-Phonecat y ejecute el siguiente comando:
La copia del código es la siguiente:
Git Checkout -F Step -0
Este comando restablecerá el directorio de trabajo del proyecto PhoneCat. Se recomienda que ejecute este comando en cada paso de aprendizaje, cambie el número en el comando al número correspondiente al paso de aprendizaje, y el comando borrará cualquier cambio que haya realizado en el directorio de trabajo.
Ejecute el siguiente comando:
La copia del código es la siguiente:
Scripts de nodo/web-server.js
Para iniciar el servidor, el terminal de la línea de comandos solicitará el servidor HTTP que se ejecuta en http: // localhost: 8000. Por favor, no cierre el terminal. Cierre el terminal cerrará el servidor. Ingrese http: // localhost: 8000/app/index.html en su navegador para acceder a nuestra aplicación PhoneCat.
Ahora, en el navegador, debería haber visto nuestra aplicación inicial, lo cual es simple, pero significa que nuestro proyecto está listo para ejecutarse.
El "¡Nada aquí todavía!" Se muestra en la aplicación se construye a partir del siguiente código HTML, que contiene los elementos clave de AngularJS, que es exactamente lo que necesitamos aprender.
app/index.html
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en" ng-app>
<Evista>
<meta charset = "utf-8">
<title> mi archivo html </title>
<link rel = "stylesheet" href = "css/app.css">
<link rel = "stylesheet" href = "css/bootstrap.css">
<script src = "lib/angular/angular.js"> </script>
</ablo>
<Body>
<p> nada aquí {{'todavía' + '!'}} </p>
</body>
</html>
¿Qué está haciendo el código?
Directiva NG-APP:
La copia del código es la siguiente:
<html lang = "en" ng-app>
La Directiva NG-APP marca el alcance del script AngularJS. Agregar el atributo ng-app en <html> significa que todo el <html> es el alcance del script AngularJS. Los desarrolladores también pueden usar las directivas NG-APP localmente, como <Div Ng-App>, y los scripts AngularJS solo se ejecutan en eso <Viv>.
Etiqueta de secuencia de comandos AngularJS:
La copia del código es la siguiente:
<script src = "lib/angular/angular.js"> </script>
Esta línea de código se carga en el script Angular.js. Cuando el navegador carga toda la página HTML, se ejecutará el script Angular.js. Después de ejecutar el script Angular.js, buscará una etiqueta HTML que contenga la directiva NG-APP. Esta etiqueta define el alcance de la aplicación AngularJS.
Expresión unida a los broteros dobles:
La copia del código es la siguiente:
<p> nada aquí {{'todavía' + '!'}} </p>
Esta línea de código demuestra la función central de la plantilla AngularJS - enlace, que consiste en tirantes dobles {{}} y la expresión 'aún' + '!'.
Esta unión le dice a AngularJS que necesita calcular las expresiones e insertar el resultado en el DOM. En los próximos pasos, veremos que el DOM se puede actualizar en tiempo real a medida que cambian los resultados de la operación de expresión.
La expresión AngularJS La expresión angular es un fragmento tipo JavaScript, las expresiones Angularjs solo se ejecutan en el alcance de Angularjs, no en todo el DOM.
Arranca la aplicación AngularJS
El arrancar automáticamente las aplicaciones AngularJS a través de las directivas NGAPP es una forma concisa de adaptarse a la mayoría de las situaciones. En el desarrollo avanzado, como el uso de scripts para cargar una aplicación, también puede usar Bootstrap para arrancar manualmente aplicaciones AngularJS.
Hay tres puntos importantes en el proceso de arranque de la aplicación AngularJS:
1. El inyector se usará para crear inyección de dependencia para esta aplicación;
2. El inyector creará el alcance de la raíz como el alcance de nuestro modelo de aplicación;
3. AngularJS vinculará el DOM en el alcance de la raíz, comenzando con etiquetas HTML marcadas con NGAPP, y se ocupará gradualmente de directivas y enlaces en el DOM.
Una vez que se inicie la aplicación AngularJS, continuará escuchando los eventos de activación HTML del navegador, como eventos de clic del mouse, eventos de presión clave, respuestas entrantes HTTP, etc. que cambian el modelo DOM. Una vez que ocurran dichos eventos, AngularJS detectará automáticamente los cambios y realizará el procesamiento y las actualizaciones correspondientes.
La estructura de la aplicación anterior es muy simple. El paquete de plantilla contiene solo una directiva y una unión estática, y el modelo también está vacío. A continuación, ¡intentemos una aplicación un poco más compleja!
¿Qué hacen estos archivos en mi directorio de trabajo?
La aplicación anterior proviene del proyecto AngularJS Seed, generalmente podemos usar el proyecto AngularJS Seed para crear nuevos proyectos. El proyecto semilla incluye la última base de código AngularJS, la biblioteca de pruebas, los scripts y un ejemplo de aplicación simple que contiene la configuración básica requerida para desarrollar una aplicación web típica.
Para este tutorial, realizamos los siguientes cambios en el Proyecto de Semilla AngularJS:
1. Eliminar la aplicación de muestra;
2. Agregue imágenes de teléfono móvil a App/IMG/Phones/;
3. Agregue el archivo de datos del teléfono móvil (JSON) a la aplicación/teléfonos/;
4. Agregue archivos de arranque de Twitter a la aplicación/css/y app/img/.
práctica
Intente agregar una nueva expresión sobre las operaciones matemáticas a index.html:
La copia del código es la siguiente:
<p> 1 + 2 = {{1 + 2}} </p>
Resumir
Ahora vamos al paso 1 y agregue un poco de contenido a la aplicación web.