Después de introducir brevemente el marco AngularJS, este artículo utiliza un ejemplo para demostrar el uso del método de interpolación {}} e instrucción de unión a Ng.
A diferencia de JQuery, que es solo una biblioteca de clases que fortalece y simplifica el desarrollo frontal, AngularJS es un marco de front-end web completo, por lo que la curva de aprendizaje es mucho más alta.
AngularJS me da la sensación de que es similar al marco de primavera de Java, que pega otros componentes en la posición del contenedor central. Muchos de sus componentes incorporados ya pueden cumplir escenarios generales, y podemos expandir escenarios especiales de acuerdo con la idea del marco.
Comencemos con el contenido más básico:
La copia del código es la siguiente:
<! Doctype html>
<html ng-app>
<Evista>
<meta charset = "utf-8">
<title> Directiva NG-Bind </title>
</ablo>
<Body Ng-Controller = "Helocontroller">
<div>
<p> Salida directamente de cadena literales </p>
Hola Mundo"}}
<hr>
</div>
<div>
<p> Use marcadores de posición para emitir variables </p>
Hola {{saludo}}
<hr>
</div>
<div>
<p> Utilice la instrucción de unión a Ng para salir de las variables </p>
Hola <span ng-bind = "saludo"> </span>
<hr>
</div>
<script src = "../ lib/angularjs/1.2.26/angular.min.js"> </script>
<script>
function hellocontroller ($ alcope) {
$ scope.greeting = "mundo";
}
</script>
</body>
</html>
Ng-App declara un módulo AngularJS y se limita al alcance de declarar etiquetas HTML.
Ng-Controller es un controlador que declara un AngularJS en el módulo. El controlador puede tener múltiples controladores, pero el contexto está aislado y el alcance del controlador debe reducirse tanto como sea posible.
{{}} es la sintaxis de interpolación de AngularJS, similar a la expresión EL $ {} de JSP. El primer resultado es porque "World" es un valor literal, y el programa saldrá directamente; La segunda salida se debe a que el saludo es una variable definida en el controlador, por lo que el valor correspondiente de la variable también se emitirá, que también es mundo; La tercera salida utiliza la instrucción de atributo de unión a Ng incorporada en AngularJS, y el resultado final es equivalente a {{}}, pero tenga en cuenta que la instrucción = es seguida por una cadena, no lo escriba incorrectamente.
El homontrolador en JS corresponde a las instrucciones en el cuerpo. El parámetro de entrada $ alcance es un servicio proporcionado por el marco, que representa el contexto del controlador actual, y hay otros servicios similares. El marco se inyectará automáticamente y lo entenderemos lentamente más tarde. El cuerpo del método tiene solo una línea, y define una variable en $ alcance, que es la variable a la que se hace referencia en el código HTML.
Este artículo es muy simple y puede ejecutar el código después de copiarlo. Tenga en cuenta que Angular.min.js es la última versión de la rama 1.2. El mismo código no puede ejecutarse con la versión 1.3.0. La razón es desconocida. Puede ser que 1.3.0 no sea la versión de lanzamiento final.