Introducción a Ignite UI for Angular
Para comenzar, instale Ignite UI for Angular Schematics globalmente:
npm i -g @igniteui/angular-schematics
La instalación anterior hará que los esquemas estén disponibles para usar un parámetro de colección para el comando ng new
.
Si está utilizando el administrador de paquetes yarn
:
yarn global add @igniteui/angular-schematics
Using guided experience
La forma más corta y sencilla de iniciar una aplicación es utilizar la guía paso a paso sobre Ignite UI for Angular Schematics.
Para activar la guía usando la Ignite UI for Angular Schematics, ejecute:
ng new --collection="@igniteui/angular-schematics"
Create a new project
Para crear una aplicación que esté configurada para usar la Ignite UI for Angular, ejecute el comando ng new
que proporciona @igniteui/angular-schematics
a la opción de colección.
ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav
Además, al establecer el type
del proyecto, de esta manera--type=igx-ts-legacy
, puede especificar que prefiere que su proyecto se genere mediante el arranque basado en módulos. Si no se especifica, se establecerá de forma predeterminada en un proyecto que utilice componentes independientes.
Si ya tiene un proyecto Angular, creado sin proporcionar la colección @igniteui/angular-schematics
como se describe anteriormente, puede agregar la Ignite UI for Angular usando el siguiente comando:
ng add igniteui-angular
La nueva aplicación se crea en un directorio con el mismo nombre (newAngularProject
). Hay varias plantillas de proyecto entre las que puede elegir al crear una Ignite UI for Angular:
identificación de la plantilla | descripción de la plantilla |
---|---|
vacío | Estructura del proyecto con enrutamiento y una página de inicio |
navegación lateral | Estructura de proyecto con cajón de navegación lateral. |
lado-nav-autorización | Proyecto de navegación lateral ampliado con módulo de autenticación de usuarios. El tema Plantilla de proyecto de autenticación Angular cubre la plantilla de proyecto en detalle. |
Además, puede especificar argumentos para controlar el tema u omitir la instalación de paquetes:
nombre
name
(alias:-n
)
El nombre de la aplicación. La aplicación se crea dentro de un directorio con el mismo nombre.
marco(solo Ignite UI CLI)
--framework
(alias:-f
) valor predeterminado: "jquery"
Marco para configurar el proyecto. Los frameworks soportados son jQuery, Angular y React.
tipo(solo CLI Ignite UI)
--type
(alias:-t
)
Los tipos de proyectos disponibles dependen del marco seleccionado.
tema
--theme
(alias:-th
)
Tema del proyecto (depende del tipo de proyecto).
saltar-git
--skip-git
(alias:--sg
)
Cuando se usa esta opción, se omitirá la inicialización automática del repositorio con Git. Si se omite la opción, se utiliza la propiedad de configuración global skip-git.
saltar-instalar
--skip-install
(alias:--si
)
El new
comando instalará las dependencias del paquete en la creación del proyecto. Pasar este indicador omitirá la instalación inicial.
plantilla
--template
Utilice esta opción si hay diferentes plantillas de proyecto para un tipo de marco específico. Actualmente, esta opción solo está disponible para Ignite UI for Angular igx-ts.
Add template
Para agregar una de las plantillas Ignite UI Angular disponibles, debe proporcionar el ID de la plantilla y un nombre para el nuevo componente o utilizar la Guía paso a paso. Su uso solo se admite dentro de proyectos existentes creados con Angular Schematics, Ignite UI CLI o donde se instaló Ignite UI for Angular usando ng add
.
Con esquemas, utilice ng generate
con la Ignite UI for Angular y component [template] [name]
:
ng g @igniteui/angular-schematics:component grid newGrid
Lista de todas las plantillas disponibles.
Además, puede especificar el módulo en el que se registrará el componente u omitir la generación automática de la ruta de navegación de la aplicación:
módulo
--module
(alias:-m
)
nota: el argumento del módulo solo se aplica en proyectos Angular.
Ruta al archivo module.ts, relativo a la carpeta /src/app/, del módulo donde se debe registrar el nuevo componente:
ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts
saltear ruta
--skip-route
(alias:-srk
)
No genere automáticamente una ruta de navegación de la aplicación para el nuevo componente
Run the application
El esquema start
creará la aplicación, iniciará un servidor web y lo abrirá en su navegador predeterminado.
ng g @igniteui/angular-schematics:start