En este artículo, aprenderemos sobre Angular JS y Angular, además de comprender la diferencia significativa entre ellos.
Angular JS : AngularJS es un marco front-end de código abierto de JavaScript que se utiliza principalmente para desarrollar aplicaciones web de una sola página (SPA). Es un marco en continuo crecimiento y expansión que proporciona mejores formas de desarrollar aplicaciones web. Cambia el HTML estático a HTML dinámico. Sus características como el enlace dinámico y la inyección de dependencia eliminan la necesidad de código que tenemos que escribir de otra manera. AngularJS está creciendo rápidamente y, por esta razón, tenemos diferentes versiones de AngularJS, siendo la última estable la 1.7.7. También es importante tener en cuenta que Angular es diferente de AngularJS. Es un proyecto de código abierto que cualquiera puede usar y modificar libremente. Extiende los atributos de HTML con directivas y los datos se enlazan con HTML.
Ejemplo: este ejemplo describe la interpolación de strings en AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
AngularJS String Interpolation
</h3>
<div ng-app=""
ng-init="Course='AngularJS';
Subject='Tutorial';
Company='GeeksforGeeks';">
<p>
Learn {{ Course + " " + Subject }} from
<a href=
"https://www.geeksforgeeks.org/angularjs/">{{Company}}
</a>
</p>
</div>
</body>
</html>
Producción:
Angular : es un marco Typescript de código abierto popular creado por Google para desarrollar aplicaciones web. Los desarrolladores front-end usan marcos como Angular o React para presentar y manipular datos de manera eficiente. Angular actualizado es mucho más eficiente en comparación con la versión anterior de Angular, especialmente porque la funcionalidad principal se movió a diferentes módulos. Es por eso que se vuelve mucho más rápido y suave en comparación con el anterior. CLI angular recientemente agregado, y con la ayuda de esta interfaz de línea de comandos, podemos instalar los paquetes necesarios que facilitan la creación y convierten el código de estructura compleja en una forma modular que puede ser fácil de administrar.
Ejemplo: este ejemplo describe la interpolación de strings en Angular.
app.component.html
<h1
[style.color]="'green'"
[style.font-family]="'Arial'"
[style.text-align]="'center'">
{{ title }} : {{ about }}
</h1>
<p [style.font-weight]="'bolder'">
This example illustrates {{ data }} in Angular.
</p>
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = "GeeksforGeeks";
about = "Learning Portal for Geeks";
data = "String Interpolation";
}
Producción:
Diferencia entre AngularJS y Angular: aunque existen diferencias clave significativas entre Angular JS y Angular, que se pueden clasificar de la siguiente manera:
Categoría |
AngularJS |
Angular |
|---|---|---|
|
Arquitectura |
Es compatible con el diseño Modelo-Vista-Controlador . La vista procesa la información disponible en el modelo para generar la salida. |
Utiliza componentes y directivas. Los componentes son las directivas con una plantilla. |
|
Lengua escrita |
Escrito en JavaScript. |
Escrito en el lenguaje TypeScript de Microsoft, que es un superconjunto de ECMAScript 6 (ES6) . |
|
Soporte móvil |
No es compatible con navegadores móviles. |
Angular es compatible con todos los navegadores móviles populares. |
|
Sintaxis de expresiones |
ng-bind se usa para vincular datos de la vista al modelo y viceversa. |
Las propiedades encerradas entre «()» y «[]» se utilizan para vincular datos entre la vista y el modelo. |
|
Inyección de dependencia |
No utiliza inyección de dependencia. |
Angular es compatible con todos los navegadores móviles populares. |
|
Idiomas admitidos |
Solo es compatible con JavaScript. |
Proporciona soporte para TypeScript y JavaScript. |
|
Enrutamiento |
AngularJS usa $routeprovider.when() para la configuración de enrutamiento. |
Angular usa @Route Config{(…)} para la configuración de enrutamiento. |
|
Estructura |
Es menos manejable en comparación con Angular. |
Tiene una mejor estructura en comparación con AngularJS, más fácil de crear y mantener para aplicaciones grandes pero por detrás de AngularJS en el caso de aplicaciones pequeñas. |
|
CLI |
No viene con una herramienta CLI. |
Viene con la herramienta Angular CLI. |
|
Ejemplos Aplicación |
Sitio web oficial de iStock, Netflix y Angular JS. |
Upwork, Gmail y Wikiwand. |
Nota: Angular es un gran marco, tiene muchas mejoras en términos de AngularJS, es bueno para aplicaciones más grandes y también para aplicaciones más pequeñas, pero hay una gran competencia entre Angular y AngularJS.
Publicación traducida automáticamente
Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA