El proceso operativo básico de plantillas y datos es el siguiente:
Página de inicio de solicitud de solicitud de usuario
El navegador del usuario inicia una conexión HTTP al servidor y luego carga la página index.html, que contiene la plantilla
Angular se carga en la página, esperando que la página se cargue y busque la directiva NG-APP para definir los límites de la plantilla.
Plantillas de recorrido angular, encuentre las relaciones especificadas y límite, y activará algunas acciones de columna: registre el oyente, realice algunas operaciones DOM y obtenga datos de inicialización del servidor. Finalmente, se lanzará la aplicación y la plantilla se convertirá en una vista DOM
Conectarse al servidor para cargar otros datos que deben mostrarse al usuario
Mostrar texto
Uno usa la forma {{}}, como {{saludo}} el segundo tipo ng-bind = "saludo"
Use el primer tipo, los usuarios pueden ver las páginas no servidas. Se recomienda usar el segundo tipo de página de índice, y las páginas restantes pueden usar el primer tipo
Entrada de formulario
La copia del código es la siguiente:
<html ng-app>
<Evista>
<title> Form </title>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script type = "text/javaScript">
función startupController ($ alcope) {
$ scope.funding = {titingeStimate: 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.staringestime * 10;
};
$ alcance. $ watch ('fondos. // Modelo de cambios de reloj
}
</script>
</ablo>
<Body>
<Form Ng-Controller = "StartupController">
Inicio: <input ng-change = "computeneeded ()" ng-model = "fonding.
Recomendación: {{Funding.Needed}}
</form>
</body>
</html>
En algunos casos, no queremos hacer movimientos inmediatamente cuando hay un cambio, pero tenemos que esperar. Por ejemplo:
La copia del código es la siguiente:
<html ng-app>
<Evista>
<title> Form </title>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script type = "text/javaScript">
función startupController ($ alcope) {
$ scope.funding = {titingeStimate: 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.staringestime * 10;
};
$ Scope. $ Watch ('Funding.
$ scope.requestFunding = function () {
Window.alert ("Lo siento, por favor obtenga más clientes primero").
};
}
</script>
</ablo>
<Body>
<Forma ng-submit = "requestFunding ()" ng-concontroller = "startupController"> // ng-submit
Comenzar: <input ng-change = "computeneeded ()" ng-model = "fonding.
Recomendación: {{Funding.Needed}}
<botón> Fondo mi inicio! </boton>
</form>
</body>
</html>
Interacción de envío sin forma, haga clic como ejemplo
La copia del código es la siguiente:
<html ng-app>
<Evista>
<title> Form </title>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script type = "text/javaScript">
función startupController ($ alcope) {
$ scope.funding = {titingeStimate: 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.staringestime * 10;
};
$ alcance. $ watch ('fondos.
$ scope.requestFunding = function () {
Window.alert ("Lo siento, por favor obtenga más clientes primero").
};
$ scope.reset = function () {
$ scope.funding.StarTingeTimate = 0;
};
}
</script>
</ablo>
<Body>
<Form Ng-Controller = "StartupController">
Comenzar: <input ng-change = "computeneeded ()" ng-model = "fonding.
Recomendación: {{Funding.Needed}}
<botón ng-click = "requestFunding ()"> Fondo mi inicio! </boton>
<botón ng-click = "reset ()"> RESET </boton>
</form>
</body>
</html>
Listas, tablas y otros elementos iterativos
Ng-Repeat devolverá el número de elemento referenciado actualmente a través de $ índice. El código de muestra es el siguiente:
La copia del código es la siguiente:
<html ng-app>
<Evista>
<title> Form </title>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script type = "text/javaScript">
Var Students = [{nombre: 'Mary', Score: 10}, {Nombre: 'Jerry', Score: 20}, {Nombre: 'Jack', Score: 30}]
function studentListController ($ alcope) {
$ scope.students = estudiantes;
}
</script>
</ablo>
<Body>
<table ng-confontroller = "StudentListController">
<tr ng-repeat = 'estudiante en los estudiantes'>
<TD> {{$ index+1}} </td>
<TD> {{student.name}} </td>
<TD> {{student.score}} </td>
</tr>
</table>
</body>
</html>
Esconderse
Las funciones NG-Show y Ng Hide son equivalentes, pero el efecto de operación es exactamente lo contrario.
La copia del código es la siguiente:
<html ng-app>
<Evista>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script>
function DeathRayMenucontroller ($ alcance) {
$ Scope.Menustate = {show: false}; // Si cambia a menustate.show = false, el efecto no se mostrará. En el futuro, ponga las variables en {}
$ scope.togglemenu = function () {
$ scope.menustate.show =! $ scope.menustate.show;
};
}
</script>
</ablo>
<Body>
<Div ng-confontroller = 'DeathrayMenucontroller'>
<botón ng-click = 'togglemenu ()'> Menú de toggle </botón>
<ul ng-show = 'menustate.show'>
<li ng-click = 'stun ()'> stun </li>
<li ng-click = 'desintegrate ()'> desintegrado </li>
<li ng-click = 'eorrase ()'> borrar de la historia </li>
</ul>
</div>
</body>
</html>
clase y estilo CSS
Tanto Ng-Clase como Ng-Style pueden aceptar una expresión, y el resultado de la ejecución de la expresión puede ser uno de los siguientes valores:
Cadena que representa el nombre de la clase CSS, separado por espacios
matriz de nombres de clase CSS
Mapeo del nombre de la clase CSS al valor booleano
El ejemplo del código es el siguiente:
La copia del código es la siguiente:
<html ng-app>
<Evista>
<style type = "text/css">
.error {
Color de fondo: rojo;
}
.advertencia {
Color de fondo: amarillo;
}
</style>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script>
function headerController ($ alcope) {
$ scope.isError = false;
$ scope.iswarning = false;
$ scope.showerror = function () {
$ scope.messageText = "¡Error!"
$ scope.isError = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function () {
$ scope.messageText = "¡Advertencia!"
$ scope.iswarning = true;
$ scope.isError = true;
}
}
</script>
</ablo>
<Body>
<div ng-confontroller = "HeaderController">
<div ng-class = "{error: iserror, advertencia: iswarning}"> {{messageText}} </div>
<botón ng-click = "showerRor ()"> Error </botón>
<Button ng-click = "showwarning ()"> Advertencia </boton>
</div>
</body>
</html>
Mapeo del nombre de la clase CSS al valor booleano
El código de muestra es el siguiente:
La copia del código es la siguiente:
<html ng-app>
<Evista>
<style type = "text/css">
.selected {
Color de fondo: Lightgreen;
}
</style>
<script type = "text/javaScript" src = "angular.min.js"> </script>
<script>
restaurante de funciones ($ alcance) {
$ scope.list = [{name: "The Handsome", Cuisine: "BBQ"}, {nombre: "verde", cocina: "ensaladas"}, {nombre: "casa", cocina: 'marino'}];
$ scope.selectrestaurant = function (fila) {
$ scope.selectedRow = fila;
}
}
</script>
</ablo>
<Body>
<Table ng-Controller = "Restaurant">
<tr ng-repeat = 'restaurante en list' ng-click = 'Selectrestaurant ($ index)' ng-class = '{seleccionado: $ index == selectionrow}'> // mapa del nombre de la clase CSS al valor booleano. Cuando el valor del atributo modelo seleccionado es igual al índice $ en ng-repeat, el estilo selectd se establecerá en esa línea
<TD> {{Restaurant.name}} </td>
<TD> {{Restaurant.Cuisine}} </td>
</tr>
</table>
</body>
</html>