环境设置AngularJS

Este capítulo explica cómo configurar la biblioteca AngularJS para el desarrollo de aplicaciones web. También describe brevemente la estructura del directorio y su contenido.

Cuando abra el enlace https://angularjs.org/En ese momento, verá las dos opciones para descargar la biblioteca AngularJS-

Ver en GitHub − Haga clic en este botón y se transferirá a GitHub para obtener todos los scripts más recientes.
Descargar AngularJS 1 − Haga clic en este botón y verá una pantalla que muestra

Esta pantalla proporciona las siguientes opciones para usar Angular JS-

Descargar y alojar archivos localmente

Hay dos opciones diferentes: "tradicional" y "última". El nombre en sí es autoexplicativo. La versión antigua es inferior a1.2.x, mientras que la versión más reciente es1.7.x。
También podemos usar la versión minimizada, sin comprimir o comprimida.

Acceso a CDN− También puede acceder a CDN. CDN le permite acceder a los centros de datos regionales. En este caso, es alojado por Google. CDN transfiere la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. También ofrece una ventaja, si sus visitantes de la página web ya han descargado una copia de AngularJS desde el mismo CDN, no es necesario volver a descargarla.

En este tutorial, hemos estado utilizando la versión de CDN de la biblioteca.

Ejemplo en línea

Ahora, escribamos un ejemplo simple usando la biblioteca AngularJS. Vamos a crear un archivo HTMLmyfirstexample.htmlcomo se muestra a continuación-

Ejemplo

!doctype html>
<html>
　　　<head>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.5.2/angular.min.js"></script>
　　　</head>
　　　
　　　<body ng-app="myapp">
　　　　　　<div ng-controller="HelloController">
　　　　　　　　　<h2>Bienvenido {{helloTo.title}} al mundo de w3codebox!</h2>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　angular.module("myapp", [])
　　　　　　　　　
　　　　　　　　　.controller("HelloController", function($scope) {
　　　　　　　　　　　　$scope.helloTo = {};
　　　　　　　　　　　　$scope.helloTo.title = "AngularJS";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Prueba para ver ‹/›

Vamos a leer detalladamente el código anterior-

Incluimos AngularJS

Incluimos el archivo JavaScript de AngularJS en la página HTML para poder usarlo-

<head>
　　　<script src="https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js">
　　　</script>
</head>

Puede ver la última versión de AngularJS en su sitio web oficial.

hacia la aplicación AngularJS

A continuación, debe determinar qué parte del HTML contiene la aplicación AngularJS. Puede hacerlo apuntando ng-Para agregar la propiedad app al elemento HTML raíz de la aplicación AngularJS, puede agregarla al elemento html o body, como se muestra a continuación.-

<body ng-app="myapp">
</body>

vista

La vista es esta parte-

<div ng-controller="HelloController">
　　　<h2>Bienvenido {{helloTo.title}} al mundo de w3codebox!</h2>
</div>

ng-controllerque le dice a AngularJS qué controlador usar en esta vista.helloTo.titleque le dice a AngularJS que escriba un valor de modelo llamado helloTo.title en esta posición de HTML.

controlador

La parte del controlador es-

<script>
　　　angular.module("myapp", [])
　　　
　　　.controller("HelloController", function($scope) {
　　　　　　$scope.helloTo = {};
　　　　　　$scope.helloTo.title = "AngularJS";
　　　});
</script>

Este código se encuentra en un archivo llamadomyappEn el módulo de ángulo llamado HelloController se registró la función de controlador. Vamos a estudiar detalladamente el módulo y el controlador en cada capítulo. La función de controlador se registra mediante la llamada de función angular.module(...).controller(...).

$scope 参数模型被传递给控制器函数。控制器函数向JavaScript对象 helloTo 添加一个 title 字段。

执行

将以上代码另存为myfirstexample.html，并在任何浏览器中将它已打开。您将看到以下输出-

Bienvenido AngularJS al mundo de w3codebox!

在浏览器中加载页面时会发生什么？让我们看看-

HTML文档已加载到浏览器中，并由浏览器评估。
已加载AngularJS JavaScript文件，角度全局对象已创建。
执行注册控制器功能的JavaScript。
接下来，AngularJS扫描HTML以搜索AngularJS应用程序和视图。
找到视图后，它将连接该视图到相应的控制器功能。
接下来，AngularJS执行控制器功能。
然后，它使用填充在控制器中的模型数据来呈现视图。现在页面已准备好。

架构MVC AngularJS 简介AngularJS