not cli change cannot cambiar angularjs angular

cli - AngularJS vs Angular



change favicon angular 6 (7)

Angular 2 es mucho mejor que 1, una lista de lo que ofrece, soporte para componentes web, uso de mecanografiado, rendimiento y simplicidad general de la interfaz, fue la razón por la que decidí comenzar un proyecto usando angular 2. sin embargo, desde el principio i se dio cuenta de que hay problemas en angular 2 (por ejemplo, enrutamiento con apache) para los que hay muy poca o ninguna documentación disponible, por lo que la documentación y la comunidad de angular 2 es el mayor obstáculo para angular 2, ya que no está lo suficientemente desarrollado.

Yo diría que si necesita levantar un sitio rápidamente por un corto plazo, use el conocido angular 1, si está en un proyecto más largo y puede darse el tiempo para investigar nuevos problemas (que podría ser el primero en encontrar, lo que podría ser un bono si piensa en la contribución que podría dar a la comunidad angular 2) que ir con angular 2.

Meses atrás, decidí estudiar Angular. Cuando estaba avanzando y creando alguna aplicación usándola, me doy cuenta de que Angular 2 está en la vista previa del desarrollador, por lo que es cuestión de tiempo antes de que se lance. Debido a que Angular 2 no va a ser compatible con Angular 1, y hay muchos cambios, la pregunta es, ¿es mejor continuar desarrollando con Angular 1.xo comenzar a desarrollar Angular 2?

Es un hecho que no siempre tenemos que usar la última versión ni el idioma más nuevo del mercado, pero en este caso, la aplicación sigue siendo pequeña, por lo que podría cambiar sin problemas.

La única característica sobresaliente en Angular v2 y también en ReactJs es que ambos han adoptado la nueva arquitectura de desarrollo de componentes web. Lo que esto significa es que ahora podemos crear componentes web independientes y conectarlos a cualquier sitio web del mundo que tenga la misma pila de tecnología que este componente web. ¡Guay! si muy bien :)

El otro cambio más destacado en Angular v2 es que su lenguaje de desarrollo primario no es otro que TypeScript. Aunque TypeScript pertenece a Microsoft, y es un superconjunto de JavaScript de 2015 (o ECMAScript6 / ES6), pero tiene algunas características que son muy prometedoras. Recomendaría a los lectores que revisen TypeScript con un poco de detalle (lo cual es divertido, por supuesto) después de leer este tutorial.

Aquí diría que los tipos que intentan interrelacionar Angular v1 y Angular v2 confunden aún más a los lectores, y en mi humilde opinión, Angular v1 y Angular v2 deberían tratarse como dos marcos diferentes. En Angular v2, tenemos el concepto de Web-Components de desarrollar aplicaciones web, mientras que en Angular v1 tenemos que jugar con los Controladores, y (por desgracia o por suerte) no hay controladores presentes en Angular v2.

Ningún marco es perfecto. Puedes leer sobre defectos en Angular 1 here y here . Pero eso no significa que sea malo. La pregunta es qué problema estás resolviendo. Si desea implementar rápidamente una aplicación simple, que sea liviana, con un usage limitado de enlace de datos usage continúe con Angular 1. Angular 1 se construyó hace 6 años para resolver la creación rápida de prototipos, lo cual funciona bastante bien. Incluso si su caso de uso es complejo, puede usar Angular 1, pero debe tener en cuenta los matices y las mejores prácticas para crear una aplicación web compleja. Si está desarrollando una aplicación con fines de aprendizaje, sugeriría pasar a Angular 2, ya que ahí es donde está el futuro de Angular.

Permítanme comenzar diciendo que estoy asumiendo que usted y todos los que leerán esto ya están cómodos con Angular 1 ( ahora conocido como AngularJS , en lugar de simplemente Angular para las versiones más nuevas). Dicho esto, veamos algunas de las adiciones y diferencias clave en Angular 2+.

  1. Agregaron un cli angular.

Puede comenzar un nuevo proyecto ejecutando ng new [app name] . Puede servir su proyecto ejecutando ng serve Obtenga más información aquí: https://github.com/angular/angular-cli

  1. Su código angular está escrito en ES6 Typecript y se compila en tiempo de ejecución a Javascript en el navegador.

Para obtener una comprensión completa de esto, le recomiendo revisar algunos de la lista de recursos que tengo al final de mi respuesta.

  1. Estructura del proyecto

En una estructura básica, tendrá una carpeta app/ts donde realizará la mayor parte de su trabajo y una app/js que encontrará en los archivos de la carpeta app/js con una extensión .js.map . Ellos "asignan" sus archivos ".ts" a su navegador para su depuración ya que su navegador no puede leer el mecanografiado nativo.

Actualización : está fuera de beta. La estructura del proyecto cambió un poco, en la mayoría de los casos y si está utilizando el cli angular, estará trabajando en la carpeta src/app/ . En un proyecto inicial, tendrá lo siguiente.

app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts index.ts

app.component.css : archivo CSS que debe usar específico para el component.html

app.component.html : una vista (variable declarada en app.component.js)

app.component.spec.ts : utilizado para probar app.component.ts

app.component.ts : su código que se une a app.component.html

app.module.ts : Esto es lo que inicia su aplicación y dónde define todos los complementos, componentes, servicios, etc. Este es el equivalente de app.js en Angular 1

index.ts utilizado para definir o exportar archivos de proyecto

Información Adicional:
Consejo profesional: puede ejecutar ng generate [option] [name] para generar nuevos servicios, componentes, tuberías, etc.

También el archivo tsconfig.json es importante ya que define las reglas de compilación de TS para su proyecto.

Si estás pensando que tengo que aprender un idioma completamente nuevo? ... Uh ... un poco, TypeScript es un superconjunto de JavaScript. No te dejes intimidar; está ahí para facilitar su desarrollo. Sentí que lo entendía bien después de unas horas jugando con él, y lo tenía todo después de 3 días.

  1. Se une a su HTML de forma similar a como lo haría en una directiva Angular 1. Por lo tanto, variables como $scope y $rootScope han quedado en desuso.

Este puede haber sido implicado. Angular 2 sigue siendo un MV * pero usará '' componentes '' como una forma de vincular el código a sus plantillas, por ejemplo, tome lo siguiente

import { Component } from ''@angular/core''; @Component({ selector:''my-app'', template: ''<h1> Hello World! </h1>'' }) export class AppComponent {}

Aquí piense en la declaración de import como su inyección de dependencia en un controlador v1. Utiliza la import para importar sus paquetes, donde la import {Component} dice que creará un component que desea vincular a su HTML .

Observe que el decorador @Component tiene un selector y una template . Aquí piense en el selector como su $scope que usa como usa las directives v1 donde el nombre del selector es lo que usa para enlazar su HTML de esta manera

<my-app> </my-app>

Donde <my-app> es el nombre de su etiqueta personalizada que usará que actuará como marcador de posición para lo que se declara en su plantilla. es decir) <h1> Hello World! </h1> <h1> Hello World! </h1> . Mientras que esto se vería así en v1:

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

También puede agregar algo entre estas etiquetas para generar un mensaje de carga, como este:

<my-app> Loading... </my-app>

Luego mostrará " Cargando ... " como el mensaje de carga.

Tenga en cuenta que lo que se declara en la template es la ruta o el HTML sin procesar que usará en su HTML en su etiqueta de selector .

Una implementación más completa de Angular 1 se vería más así:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

En v1 esto se vería algo así

JS

angular.module(''controller'', []) .controller(''myCtrl'', function( $scope) { $scope.hello = "Hello World!" })

Esto es lo que realmente me gusta de v2. Encontré que la directiva era una curva de aprendizaje empinada para mí en la v1 e incluso cuando los descubrí, a menudo tenía el renderizado CSS no como pretendía. Creo que esto es mucho más simple.

V2 permite una escalabilidad más fácil de su aplicación, ya que puede dividirla más fácilmente que en v1. Me gusta este enfoque, ya que puede tener todas sus partes de trabajo en un archivo en lugar de tener varias en v1 angular.

¿Qué pasa con la conversión de su proyecto de v1 a v2?

Según lo que escuché del equipo de desarrollo, si desea actualizar su proyecto v1 a v2, simplemente estará revisando y eliminando blobs obsoletos y reemplazando sus $scope s con selector s. Encontré este video útil. Es con algunos del equipo de Ionic que están trabajando codo a codo con el equipo angular, ya que v2 tiene un enfoque más fuerte en dispositivos móviles https://youtu.be/OZg4M_nWuIk Espero que esto ayude.

ACTUALIZACIÓN: Actualicé agregando ejemplos a medida que surgieron implementaciones oficiales de Angular 2.

ACTUALIZACIÓN 2: Esto todavía parece ser una pregunta popular, así que pensé que sería un recurso que encontré muy útil cuando comencé a trabajar con angular 2.

Recursos útiles

Para obtener más información sobre ES6, recomiendo consultar los Tutoriales de nuevas características ECMAScript 6 / ES6 de The New Boston - Lista de reproducción de YouTube

Para escribir funciones mecanografiadas y ver cómo se compilan en Javascript, consulte el área de juegos del lenguaje mecanografiado

Para ver el desglose de una función por función de cuál es la equivalencia Angular 1 en Angular 2, consulte Angular.io - Cookbook -A1 A2 Referencia rápida

Podría ayudarlo a conocer Angular 1 vs Angular 2.

El Angular 2 demostró tener muchos beneficios sobre el Angular 1:

  • Está completamente basado en componentes.
  • Mejor detección de cambios
  • La compilación anticipada (AOT) mejora la velocidad de representación.

  • TypeScript se puede usar para desarrollar aplicaciones de Angular 2

  • Angular 2 tiene un mejor rendimiento que Angular 1.

  • Angular 2 tiene un sistema de plantillas más potente que Angular 1.

  • Angular 2 tiene API más simples, carga lenta, depuración más fácil.

  • Angular 2 es mucho más comprobable que Angular 1.

  • Angular 2 proporciona componentes anidados.

  • Angular 2 proporciona una forma de ejecutar más de dos sistemas juntos.

  • Y así..

Una cosa a notar es que angular2 está usando el mecanografiado.

Hice angular1 con cordova en mi pasante y ahora estoy haciendo un angular 2. Creo que angular2 será la tendencia, ya que es más estructurado en mi opinión, pero la desventaja es que hay pocos recursos para referir cuando tienes problemas o dificultades. angular 1.x tiene toneladas de directivas personalizadas que pueden ser súper fáciles de usar.

Espero eso ayude.

Angular 2 y Angular 1 es básicamente un marco diferente con el mismo nombre.

angular 2 está más preparado para el estado actual de los estándares web y el estado futuro de la web (ES6 / 7, inmutiablity, componentes, shadow DOM, trabajadores de servicios, compatibilidad móvil, módulos, mecanografía, etc.)

angular 2 eliminó muchas características principales en angular 1 como: controladores, $ scope, directivas (reemplazadas con anotaciones @component), la definición del módulo y mucho más, incluso cosas simples como ng-repeat no ha salido igual.

de todos modos, el cambio es bueno, angular 1.x tenía fallas y angular 2 está más preparado para los requisitos web futuros.

para resumir las cosas: no te recomiendo que comiences un proyecto angular 1.x ahora; este es probablemente el peor momento para hacerlo, ya que tendrás que migrar más tarde a angular 2, si decides angular que elegir angular 2, google ya ha lanzado un proyecto con angular 2, y para cuando termine el proyecto, angular 2 ya debería estar en el centro de atención. si quieres algo más estable, puedes pensar en reaccionar / elm y flux como frameworks JS.

angular 2 va a ser increíble, eso es sin duda.