AngularJS es un marco para crear aplicaciones web a gran escala y de alto rendimiento mientras las mantiene tan fáciles de mantener. A continuación se muestran las características del marco AngularJS.

  • Components- La versión anterior de Angular tenía un enfoque de controladores, pero ahora ha cambiado el enfoque para tener componentes sobre controladores. Los componentes ayudan a construir las aplicaciones en muchos módulos. Esto ayuda a mantener mejor la aplicación durante un período de tiempo.

  • TypeScript- La versión más nueva de Angular se basa en TypeScript. Este es un superconjunto de JavaScript y es mantenido por Microsoft.

  • Services- Los servicios son un conjunto de códigos que pueden ser compartidos por diferentes componentes de una aplicación. Entonces, por ejemplo, si tuviera un componente de datos que recogiera datos de una base de datos, podría tenerlo como un servicio compartido que podría usarse en múltiples aplicaciones.

Angular 2 tiene los siguientes componentes:

  • Modules- Se utiliza para dividir la aplicación en fragmentos lógicos de código. Cada pieza de código o módulo está diseñado para realizar una sola tarea.

  • Component - Esto se puede utilizar para unir los módulos.

  • Templates - Esto se usa para definir las vistas de una aplicación Angular JS.

  • Metadata - Esto se puede usar para agregar más datos a una clase Angular JS.

  • Service - Esto se utiliza para crear componentes que se pueden compartir en toda la aplicación.

Los módulos se utilizan en Angular JS para poner límites lógicos en su aplicación. Por lo tanto, en lugar de codificar todo en una aplicación, puede construir todo en módulos separados para separar la funcionalidad de su aplicación. Un módulo se compone de las siguientes partes:

  • Bootstrap array- Esto se usa para decirle a Angular JS qué componentes deben cargarse para que se pueda acceder a su funcionalidad en la aplicación. Una vez que incluye el componente en la matriz de arranque, debe declararlos para que puedan usarse en otros componentes en la aplicación Angular JS.

  • Export array - Se utiliza para exportar componentes, directivas y canalizaciones que luego se pueden utilizar en otros módulos.

  • Import array - Al igual que la matriz de exportación, la matriz de importación se puede utilizar para importar la funcionalidad de otros módulos de Angular JS.

Cada aplicación consta de componentes. Cada componente es un límite lógico de funcionalidad para la aplicación. Debe tener servicios en capas, que se utilizan para compartir la funcionalidad entre los componentes. A continuación, se muestra la anatomía de un componente. Un componente consta de:

  • Class - Esto es como una clase C o Java que consta de propiedades y métodos.

  • Metadata - Esto se utiliza para decorar la clase y ampliar la funcionalidad de la clase.

  • Template - Se utiliza para definir la vista HTML que se muestra en la aplicación.

Una directiva es un elemento HTML personalizado que se utiliza para ampliar el poder de HTML. Angular 2 tiene las siguientes directivas que se llaman como parte del módulo BrowserModule.

  • ngIf -

    los ngif El elemento se usa para agregar elementos al código HTML si se evalúa como verdadero; de lo contrario, no agregará los elementos al código HTML.

    Sintaxis

    *ngIf = 'expression'

    Si la expresión se evalúa como verdadera, se agrega el correspondiente; de ​​lo contrario, los elementos no se agregan.

  • ngFor -

    los ngFor element se usa para elementos basados ​​en la condición del bucle For.

    Sintaxis

    *ngFor = 'let variable of variablelist'

    La variable es una variable temporal para mostrar los valores en el variablelist.

Las aplicaciones de Angular 2 tienen la opción de manejo de errores. Esto se hace al incluir la biblioteca catch de ReactJS y luego usar la función catch.

  • La función de captura contiene un enlace a la función de controlador de errores.

  • En la función del controlador de errores, enviamos el error a la consola. También devolvemos el error al programa principal para que la ejecución pueda continuar.

  • Ahora, siempre que obtenga un error, será redirigido a la consola de errores del navegador.

El enrutamiento ayuda a dirigir a los usuarios a diferentes páginas según la opción que elijan en la página principal. Por lo tanto, según la opción que elijan, el componente angular requerido se mostrará al usuario.

La interfaz de línea de comandos (CLI) se puede utilizar para crear nuestra aplicación Angular JS. También ayuda a crear una unidad y pruebas de un extremo a otro para la aplicación.

La inyección de dependencia es la capacidad de agregar la funcionalidad de los componentes en tiempo de ejecución. Echemos un vistazo a un ejemplo y los pasos utilizados para implementar la inyección de dependencia.

Step 1- Crea una clase separada que tenga el decorador inyectable. El decorador inyectable permite inyectar y usar la funcionalidad de esta clase en cualquier módulo Angular JS.

@Injectable() 
   export class classname {  
}

Step 2 - A continuación, en su módulo appComponent o en el módulo en el que desea utilizar el servicio, debe definirlo como proveedor en el decorador @Component.

@Component ({  
   providers : [classname] 
})

Este archivo se usa para brindar las opciones sobre TypeScript que se usan para el proyecto Angular JS.

{ 
   "compilerOptions": { 
      "target": "es5", 
      "module": "commonjs", 
      "moduleResolution": "node", 
      "sourceMap": true, 
      "emitDecoratorMetadata": true, 
      "experimentalDecorators": true, 
      "lib": [ "es2015", "dom" ], 
      "noImplicitAny": true, 
      "suppressImplicitAnyIndexErrors": true 
   } 
}

A continuación se presentan algunos puntos clave a tener en cuenta sobre el código anterior.

  • El objetivo de la compilación es es5 y eso se debe a que la mayoría de los navegadores solo pueden comprender el mecanografiado de ES5.

  • La opción sourceMap se utiliza para generar archivos de mapas, que son útiles al depurar. Por lo tanto, durante el desarrollo es bueno mantener esta opción como verdadera.

  • Los "emitDecoratorMetadata": true y "experimentalDecorators": true son necesarios para los decoradores de Angular JS. Si no está en su lugar, la aplicación Angular JS no se compilará.

Este archivo contiene información sobre el proyecto Angular 2. A continuación se muestran las configuraciones típicas del archivo.

{ 
   "name": "angular-quickstart", 
   "version": "1.0.0", 
   "description": "QuickStart package.json from the documentation, 
      supplemented with testing support", 
   
   "scripts": { 
      "build": "tsc -p src/", 
      "build:watch": "tsc -p src/ -w", 
      "build:e2e": "tsc -p e2e/", 
      "serve": "lite-server -c=bs-config.json", 
      "serve:e2e": "lite-server -c=bs-config.e2e.json", 
      "prestart": "npm run build", 
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
      "pree2e": "npm run build:e2e", 
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --killothers --success first", 
      "preprotractor": "webdriver-manager update", 
      "protractor": "protractor protractor.config.js", 
      "pretest": "npm run build", 
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
      "pretest:once": "npm run build", 
      "test:once": "karma start karma.conf.js --single-run", 
      "lint": "tslint ./src/**/*.ts -t verbose" 
   }, 
  
   "keywords": [], 
   "author": "", 
   "license": "MIT", 
   "dependencies": { 
      "@angular/common": "<2.4.0", 
      "@angular/compiler": "<2.4.0", 
      "@angular/core": "<2.4.0",
      "@angular/forms": "<2.4.0", 
      "@angular/http": "<2.4.0", 
      "@angular/platform-browser": "<2.4.0", 
      "@angular/platform-browser-dynamic": "<2.4.0", 
      "@angular/router": "<3.4.0",  
      "angular-in-memory-web-api": <0.2.4", 
      "systemjs": "0.19.40", 
      "core-js": "^2.4.1", 
      "rxjs": "5.0.1", 
      "zone.js": "^0.7.4" 
   }, 
  
   "devDependencies": { 
      "concurrently": "^3.2.0", 
      "lite-server": "^2.2.2", 
      "typescript": "<2.0.10",  
      "canonical-path": "0.0.2", 
      "tslint": "^3.15.1", 
      "lodash": "^4.16.4", 
      "jasmine-core": "<2.4.1", 
      "karma": "^1.3.0", 
      "karma-chrome-launcher": "^2.0.0", 
      "karma-cli": "^1.0.1", 
      "karma-jasmine": "^1.0.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": <4.0.14", 
      "rimraf": "^2.5.4",  
      "@types/node": "^6.0.46", 
      "@types/jasmine": "2.5.36" 
   }, 
   "repository": {} 
}

Algunos puntos clave a tener en cuenta sobre el código anterior:

  • Hay dos tipos de dependencias, primero son las dependencias y luego están las dependencias de desarrollo. Los de desarrollo son necesarios durante el proceso de desarrollo y los demás son necesarios para ejecutar la aplicación.

  • El comando "build: watch": "tsc -p src / -w" se utiliza para compilar el texto mecanografiado en segundo plano buscando cambios en los archivos mecanografiados.

Este archivo contiene los archivos del sistema necesarios para la aplicación Angular JS. Esto carga todos los archivos de secuencia de comandos necesarios sin la necesidad de agregar una etiqueta de secuencia de comandos a las páginas html. Los archivos típicos tendrán el siguiente código.

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   }); 
})(this);

Algunos puntos clave a tener en cuenta sobre el código anterior:

  • 'npm:': 'node_modules /' indica la ubicación en nuestro proyecto donde se encuentran todos los módulos npm.

  • El mapeo de la aplicación: 'aplicación' indica la carpeta donde se cargan todos los archivos de nuestras aplicaciones.

El siguiente código estará presente en el app.module.ts archivo.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

Repasemos cada línea del código en detalle.

  • La declaración de importación se utiliza para importar la funcionalidad de los módulos existentes. Por lo tanto, las primeras 3 declaraciones se utilizan para importar los módulos NgModule, BrowserModule y AppComponent en este módulo.

  • El decorador NgModule se utiliza para definir posteriormente las opciones de importación, declaración y arranque.

  • El BrowserModule es necesario de forma predeterminada para cualquier aplicación angular basada en web.

  • La opción bootstrap le dice a Angular qué Componente arrancar en la aplicación.

El filtro de minúsculas se usa para convertir la entrada a minúsculas.

En el siguiente ejemplo, hemos agregado un filtro en minúsculas a una expresión usando un carácter de barra vertical. Aquí hemos agregado un filtro de minúsculas para imprimir el nombre del estudiante en todas las letras minúsculas.

<div> 
   The name of this Tutorial is {{TutorialName}}
  
   The first Topic is {{appList[0] | lowercase}}
 
   The second Topic is {{appList[1] | lowercase}}
 
   The third Topic is {{appList[2]| lowercase}}
 
</div>

El filtro de mayúsculas se usa para convertir la entrada a mayúsculas.

En el siguiente ejemplo, hemos agregado un filtro en mayúsculas a una expresión usando un carácter de barra vertical. Aquí hemos agregado un filtro de mayúsculas para imprimir el nombre del estudiante en todas las letras mayúsculas.

<div> 
   The name of this Tutorial is {{TutorialName}}
  
   The first Topic is {{appList[0] | uppercase}}
 
   The second Topic is {{appList[1] | uppercase}}
 
   The third Topic is {{appList[2]| uppercase}}
 
</div>

El filtro de división se utiliza para dividir una parte de los datos de la cadena de entrada.

En el siguiente ejemplo, hemos agregado un filtro de sector a una expresión usando un carácter de barra vertical. Aquí, el valor de la propiedad se dividirá en función de las posiciones inicial y final.

<div> 
   The name of this Tutorial is {{TutorialName}}
  
   The first Topic is {{appList[0] | slice:1:2}}
 
   The second Topic is {{appList[1] | slice:1:3}}
 
   The third Topic is {{appList[2]| slice:2:3}}
 
</div>

El filtro de fecha se utiliza para convertir la cadena de entrada al formato de fecha.

En el siguiente ejemplo, hemos agregado un filtro de fecha a una expresión usando un carácter de barra vertical. Aquí el valor de la propiedad se convertirá al formato de fecha.

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}

</div>

El filtro de moneda se utiliza para convertir la cadena de entrada al formato de moneda.

En el siguiente ejemplo, hemos agregado un filtro de moneda a una expresión usando un carácter de barra vertical. Aquí el valor de la propiedad se convertirá a formato de moneda.

<div> 
   The currency of this Tutorial is {{newValue | currency}}

</div>

El filtro de porcentaje se utiliza para convertir la cadena de entrada a formato de porcentaje.

En el siguiente ejemplo, hemos agregado un filtro de porcentaje a una expresión usando un carácter de barra vertical. Aquí el valor de la propiedad se convertirá a formato de porcentaje.

<div> 
   The percentage of this Tutorial is {{newValue | percent}}

</div>

Cuando cambia el valor de una propiedad vinculada a datos, se llama a este método.

Esto se llama siempre que ocurre la inicialización de la directiva / componente después de que Angular muestra por primera vez las propiedades vinculadas a los datos.

Esto es para la detección y para actuar sobre los cambios que Angular no puede o no detectará por sí solo.

Esto se llama en respuesta después de que Angular proyecta contenido externo en la vista del componente.

Esto se llama en respuesta después de que Angular verifica el contenido proyectado en el componente.

Esto se llama en respuesta después de que Angular inicializa las vistas del componente y las vistas secundarias.

Esto se llama en respuesta después de que Angular verifica las vistas del componente y las vistas secundarias.

Esta es la fase de limpieza justo antes de que Angular destruya la directiva / componente.