Usaremos AngularJS y Bootstrap para desarrollar un ejemplo de aplicación front-end. A través de esta simple práctica de proyecto, llevaremos a todos al Palacio del Desarrollo de Front-End de Angularjs e introduciremos algunos puntos de conocimiento:
1. Los conceptos básicos de MVC, a través de ejemplos de proyectos, que todos tengan una comprensión preliminar de la aplicación del modelo de diseño MVC.
2. Construya nuestra primera aplicación AngularJS. A través del desarrollo de un caso de uso práctico, todos pueden obtener una cierta comprensión perceptiva del desarrollo frontal.
3. Una comprensión preliminar de los tres componentes más importantes de AngularJS, a saber, modelo, vista y controlador.
4. Comprensión preliminar del uso de objetos de alcance AngularJS.
Introducción básica al modo MVC:
MVC es un modelo de arquitectura de UI. Su propósito es descomponer las funciones de las aplicaciones en módulos especiales, darse cuenta de la reutilización de los módulos, reducir el acoplamiento entre los módulos y mejorar la robustez del sistema. El modo MVC se divide principalmente en tres partes:
Modelo: utilizado para almacenar datos del sistema
Vista: se utiliza para implementar la interfaz de interfaz de usuario del sistema
Controlador: Se utiliza para conectar el modelo y la vista.
En mi opinión, la mejor manera de aprender es practicar. Desarrollaremos un ejemplo de aplicación front-end. A través de este ejemplo, por un lado, podemos profundizar nuestra comprensión del marco AngularJS, y al mismo tiempo, también podemos sentir cómo el modelo MVC está integrado en el proceso de desarrollo.
Introducción de la aplicación (ruta del código: http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar)
Haremos una aplicación web que adivine los números, con la interfaz de la siguiente manera:
El fondo de la aplicación generará aleatoriamente un número aleatorio con un rango de 1 a 1000. El usuario ingresa el número adivinado en el cuadro de texto. Si la entrada es correcta, la aplicación aparecerá a continuación. Si está mal, por ejemplo, el número de entrada es mayor o menor que el número generado por el fondo, la aplicación aparecerá en un mensaje correspondiente, por ejemplo:
Los números que se muestran en la parte inferior indican cuántas veces lo adivinamos.
La estructura del directorio de código de toda la aplicación es la siguiente:
Como actualmente estamos trabajando en un ejemplo de aplicación simple, armamos el código de cada módulo. En el futuro, cuando construimos aplicaciones frontal a gran escala, tendremos mucho cuidado de organizar la estructura del directorio de código de todo el proyecto.
En la composición del archivo que se muestra en la figura anterior, Angular.js es el archivo marco en el que confiamos para desarrollar aplicaciones, bootstrap.min.css es el archivo de biblioteca de interfaz utilizado para diseñar la interfaz de UI y numberGuessing.html será el archivo de aplicación principal que queremos desarrollar. A continuación, agregaremos código a NumberGuessing.html paso a paso y aumentaremos gradualmente las funciones de la aplicación.
En primer lugar, lo que debemos hacer es construir una plantilla HTML simple. En esta plantilla, podemos agregar lentamente funciones. El código de plantilla es el siguiente:
<! Doctype html> <html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> adivina el número! </title> <link href = "bootstrap.min.css" rel = "Stylesheet"> </head> <body> <body> <scry script src = "angular.js"> </script> </body> </html>
En el código de plantilla anterior, observe que hay una línea "meta ... charset =" utf = 8 "
El propósito de esta línea es permitir que el navegador muestre el chino correctamente. Si esta línea no está disponible, el navegador mostrará chino. En la plantilla, primero presentamos el código de marco y el código de biblioteca de interfaz de interfaz de interfaz de usuario que se utilizará más adelante. Después de que se haga, lo cargamos en el navegador para ver si hay algún error. Si eso es correcto, lo que vemos actualmente es un blanco:
A continuación, desarrollaremos el código lógico de fondo de la aplicación, y primero determinaremos algunas variables para usar:
originalval, utilizado para almacenar números aleatorios generados
userguess, almacene el número adivinado actualmente ingresado por el usuario
numOftries, registre cuántas veces el usuario ha intentado
Desviación: registre la diferencia entre el número ingresado por el usuario y el número aleatorio de fondo. Si el número ingresado por el usuario es grande, entonces la definición> 0; La entrada es pequeña, la definición <0; Si la entrada es correcta, entonces la definición == 0
Implementación del módulo del controlador
El controlador se utiliza para conectar los dos módulos de modelo y vista, y la lógica comercial del sistema también se implementa en el controlador. Cuando el usuario realiza algunas operaciones en la interfaz, como hacer clic en un botón e ingresar contenido, el controlador recibe la información correspondiente del lado de la vista, y luego el controlador activa la lógica de procesamiento de eventos correspondiente. Por ejemplo, el usuario ingresa a un número en la interfaz y hace clic en el botón OK, el controlador obtiene el valor de entrada de la vista y luego elimina el número aleatorio generado por la aplicación del modelo, lo compara con los dos hatchback y devuelve el resultado de comparación a la vista. La vista muestra los cambios de interfaz correspondientes en función del valor de desviación devuelto. Veamos cómo se implementa el cuerpo lógico del controlador:
function adivisthEnumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ Scope.originalVal = Math.Floor ((Math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); }La función GuestthenumberController establece las propiedades numéricas del objeto modelo. El significado de estos valores se ha mencionado anteriormente. Al mismo tiempo, esta función del controlador también deriva dos llamadas de interfaz, una es VerifyGuess. Cuando se hace clic en el botón Confirmar en la interfaz, el módulo de vista llamará a la interfaz para determinar si los datos ingresados por el usuario son correctos. Al mismo tiempo, la llamada actualizará los valores de los dos atributos, desviación y numOftries.
InitializeGame se usa para inicializar toda la aplicación del sistema, primero generar números aleatorios y luego inicializar algunas variables para vaciar.
En nuestra función de cuerpo del controlador, se pasa un parámetro $ alcance. Este parámetro nos pasa por AngularJS. Básicamente es equivalente a M en el modo MVC, que es modelo. Es similar a una base de datos, especialmente utilizada para almacenar datos de aplicaciones y código lógico. Como puede ver, en la llamada InitializeGame, el controlador coloca a NUMOFTRIES, OriginalVal y otros datos en el objeto $ Alcance. En la llamada VerifyGuess, obtiene estos datos de $ alcance para el cálculo y la modificación.
Después de que se agrega el código del controlador anterior a nuestro archivo de plantilla NumberGuessing.html, el resultado es el siguiente:
<! Doctype html> <html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> adivina el número! </title> <link href = "bootstrap.min.css" rel = "Stylesheet"> </head> <body> <body> <scry script src = "angular.js"> </script> <script type = "text/javaScript"> function adivisthEnumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ Scope.originalVal = Math.Floor ((Math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); } </script> </body> </html>Diseño de la interfaz de aplicación Vista de aplicaciones
La vista, es decir, la vista en MVC, es en realidad mostrar los datos en el modelo a través de una interfaz gráfica. Nuestra aplicación actual es simple y basada en el principio de simplicidad, la experiencia del usuario del diseño de la interfaz puede no ser muy buena, pero es suficiente comprender rápidamente cómo usar AngularJS y Bootstrap para construir rápidamente una interfaz front-end para un programa.
Echemos un vistazo a la construcción de la interfaz e integremos la lógica del controlador y la interfaz:
<cuerpo ng-app = "app"> <div ng-concontroller = "adivishEnumberController"> <h2> adivina el número! </h2> <p> Por favor adivina el número aleatorio generado por la computadora, que varía de 1 a 1000. </p> <label> Tome medidas: </selabel> <input type = "numiM" ng-model = "userguess"/> <bootin " ng-click = "verifyguess ()"> confirmar </boton> <botón ng-click = "inicializeGame ()"> return </boton> <p> <p ng-show = "desviación <0 "> Mr., ¡Usted ofrece demasiado alto! </p> <p ng-show = "desviación> 0"> mi hombre, si tiene menos, agregue más puntos, agregue más puntos. </p> <p ng-show = "desviación === 0"> mi hombre, realmente lo hace decir correctamente!
C en MVC, es decir, el controlador, es un puente entre la interfaz (View) y los datos (modelo). Para asociar estos tres, necesitamos incrustarlos a los tres en el marco AngularJS, y luego confiar en el mecanismo del marco AngularJS para lograr la interconexión entre los tres.
Para incrustar la vista en AngularJS, la declaración de código anterior:
<cuerpo ng-app = "app">
ng-app Esta propiedad le dice a Angular que el código HTML en la etiqueta del cuerpo se incrustará como una parte de vista en el marco AngulaJs, y la "aplicación" se usa como el valor de la propiedad NG-APP para informar el marco AngularJS para cargar un módulo llamado "APP". Este módulo es equivalente a un almacén de almacenamiento. Desglosamos varias funciones de la aplicación front-end en varias unidades. Estas unidades se almacenan en un módulo llamado APP. El controlador y el modelo también son unidades funcionales. Más tarde veremos que se agregarán al módulo llamado aplicación. El marco AngularJS eliminará las dos unidades de controlador y modelará a partir de este módulo para su uso.
A continuación, primero colocamos este módulo llamado APP en el marco AngularJS, el código es el siguiente:
<script type = "text/javaScript"> angular.module ('app', []) function adivisThenumberController ($ scope) {....} <script>De esta manera, tenemos un módulo llamado APP en el marco AngularJS, y asociamos el módulo con la interfaz a través de NG-app = "APP". A continuación, necesitamos colocar la unidad del controlador en el módulo de aplicación, el código es el siguiente:
<script type = "text/javaScript"> angular.module ('app', []) .controller ('adivishEnumberController', adivishEnumberController); function adivisthEnumberController ($ alcope) {....} </script>La función Angular.module genera y devuelve un objeto de módulo. Este objeto contiene una interfaz llamada controlador. A través de esta interfaz, la unidad funcional del controlador que desarrollamos se puede colocar en el módulo. En el código anterior, podemos ver que colocamos una unidad de controlador en el módulo. El nombre de esta unidad es AdivinthEnumberController, que es el primer parámetro de entrada de la función del controlador. El segundo parámetro de entrada es el cuerpo lógico funcional de la unidad del controlador, que es la función GuessthenumberController que desarrollamos anteriormente.
Después de completar los pasos anteriores, se desarrolla nuestra aplicación. En este momento, nuestro HTML se puede cargar desde el navegador, para que pueda ver el efecto específico.
Antes del final, vamos a profundizar en el código para ver cómo AngularJS integra varios módulos para formar una aplicación frontal completa. En el código, hay algunos símbolos y atributos especiales, símbolos especiales, como: {{}}, y los atributos especiales como: ng-app, ng-confontroller, etc. en el contexto angular, {{y}} se combinan juntos se llaman símbolos de interpolación y las propiedades en la forma de NG-* se llaman instrucciones angulares. Angular convierte las variables intercaladas en {{y}} en valores correspondientes a variables, como el siguiente fragmento de código:
<p> El número de veces que adivinaste es: <span> {{numOfTries}} </span> <p>
NUMOFTRIES significa cuántas veces el usuario ha intentado adivinar. Si el valor de numOftries es 0, AngularJS escapará del código anterior como:
<p> El número de veces que adivinaste es: <span> 0 </span> <p>
El navegador representará la interfaz a la siguiente situación:
La directiva AngularJS es un punto de conocimiento técnico complejo. En la discusión posterior, lo discutiremos en detalle. Aquí presentamos brevemente el papel de la directiva AngularJS, que extiende principalmente la función de sintaxis de HTML. Las directivas son las partes más poderosas en el marco AngularJS. Presentemos brevemente la directiva AngularJS utilizada en el código.
Ng-Controller: esta directiva conecta el controlador y la vista representada por HTML. Solo con esta directiva puede acceder a la vista las variables e interfaces establecidas por el controlador. Puede intentar ponerlo en el código.
ng-model = ng-confontroller = "adivishenumberController"
Elimine esta oración y vea cuál es el resultado.
Ng-Model: Bidireccionalmente vinculando variables en el modelo con controles a la vista, por ejemplo:
<input type = "número" ng-model = "userguess"/>
Esta declaración une la variable userguess en el modelo al cuadro de texto de entrada en la interfaz. Cuando cambia el valor en el cuadro de texto, el valor correspondiente de userguess también cambia. Por el contrario, si el valor de la suposición cambia en segundo plano, el contenido en el cuadro de texto también cambia en consecuencia.
ng-click: conecta los eventos de clic generados por la interfaz con la lógica de procesamiento del controlador, por ejemplo:
<botón ng-click = "verifyguess ()"> Confirmar </boton>
El código anterior conecta el evento "Aceptar" de clic con la función VerifyGuess () del controlador. Una vez que se haga clic en el botón, se ejecutará la función.
ng-show: se usa para controlar si el control utilizado para controlar la vista a mostrar. Si el valor de la expresión correspondiente de Ng-show es verdadero, se mostrará el control. Si es falso, el control no se mostrará. Por ejemplo:
<p ng-show = "desviación <0 "> mr., ¡su oferta es demasiado alta! </p>
La función del código anterior es que cuando el valor de la definición variable es inferior a 0, el contenido del elemento de párrafo P se mostrará en la interfaz.
AngularJS es un marco de desarrollo frontal potente pero relativamente complejo. El papel de nuestro ejemplo es solo ayudar a todos a comprender las poderosas funciones de los Angularjs y primero obtener una cierta comprensión perceptiva, a fin de sentar una base sólida para que nosotros analicemos y domine racionalmente toda la tecnología de desarrollo front-end de AngularJS en el futuro.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.