English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de AngularJS

Módulos de AngularJS

AngularJS admite métodos modularizados. Los módulos se utilizan para separar lógica (por ejemplo, servicios, controladores, aplicaciones, etc.) del código, manteniendo el código limpio. Definimos módulos en archivos js separados y los nombramos según el archivo module.js. En el siguiente ejemplo, crearemos dos módulos-

  • Módulo de aplicación (aplicación)− para inicializar la aplicación.controller(s).

  • Módulo de controlador(Módulo de controlador) − para definir el controlador.

Módulo de aplicación

A continuación, se muestra un archivo llamado mainApp.js que contiene el siguiente código-

var mainApp = angular.module("mainApp", []);

Aquí, declaramos un módulo de aplicación mainApp utilizando la función angular.module y le pasamos un array vacío. Este array generalmente contiene módulos relacionados.

Módulo de controlador

studentController.js

mainApp.controller("studentController", function($scope) {
　　　$scope.student = {
　　　　　　firstName: "Mahesh",
　　　　　　lastName: "Parashar",
　　　　　　500,
　　　　　　
　　　　　　subjects:[
　　　　　　　　　{name:'Physics',marks:70},
　　　　　　　　　{name:'Chemistry',marks:80},
　　　　　　　　　{name:'Math',marks:65},
　　　　　　　　　{name:'English',marks:75},
　　　　　　　　　{name:'Hindi',marks:67}
　　　　　　],
　　　　　　fullName: function() {
　　　　　　　　　var studentObject;
　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　}
　　　});
});

Aquí, declaramos una función de controlador studentController del módulo mainApp.

Uso de módulos

<div ng-app = "mainApp" ng-controller = "studentController"
　　　...
　　　<script src="mainApp.js"></script>
　　　<script src="studentController.js"></script>
	</div>

Aquí, utilizamos-Módulo de aplicación de instrucciones app y controlador utilizando la instrucción ngcontroller. Importamos mainApp.js y studentController.js en la página principal HTML.

Ejemplo en línea

El siguiente ejemplo muestra el uso de todos los módulos mencionados anteriormente.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Modulos Angular JS</title>/title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script src = "/run/angularjs/src/module/mainApp.js"></script>
　　　　　　<script src = "/run/angularjs/src/module/studentController.js"></script>
　　　　　　
　　　　　　<style>
　　　　　　　　　table, th, td {
　　　　　　　　　　　　border:　1px solid grey;
　　　　　　　　　　　　border-collapse: collapse;
　　　　　　　　　　　　padding:　5px;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(odd) {
　　　　　　　　　　　　background-color: #f2f2f2;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(even) {
　　　　　　　　　　　　background-color: #ffffff;
　　　　　　　　　}
　　　　　　</style>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Ejemplo de uso de módulo AngularJS</h2>
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController"
　　　　　　　　　
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Introduzca nombre:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.firstName"/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Introduzca apellido:  </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.lastName"/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Nombre:  </td>
　　　　　　　　　　　　　　　<td>{{ student.fullName() }}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Asignatura:</td>/td>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　　　　　<th>Nombre</th>/th>
　　　　　　　　　　　　　　　　　　　　　　　　<th>Calificación</th>/th>
　　　　　　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　　　　　　　<tr ng-repeat = "subject in student.subjects"
　　　　　　　　　　　　　　　　　　　　　　　　<td>{{ subject.name }}</td>/td>
　　　　　　　　　　　　　　　　　　　　　　　　<td>{{ subject.marks }}</td>/td>
　　　　　　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　　　　</table>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　</body>
</html>
prueba veamos‹/›

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

mainApp.controller("studentController", function($scope) {
　　　$scope.student = {
　　　　　　firstName: "Sea",
　　　　　　lastName: "Gull",
　　　　　　500,
　　　　　　
　　　　　　subjects:[
　　　　　　　　　　　　　{name:'物理',marks:70},
　　　　　　　　　　　　　{name:'化学',marks:80},
　　　　　　　　　　　　　{name:'数学',marks:65},
　　　　　　　　　　　　　{name:'英语',marks:75},
　　　　　　　　　　　　　{name:'语文',marks:67}
　　　　　　],
　　　　　　fullName: function() {
　　　　　　　　　var studentObject;
　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　}
　　　});
});

Resultado de la salida

Abrir el archivo en el navegador de InternettextAngularJS.htm.

Formularios de AngularJSHTML DOM de AngularJS