# Angular
>Aplicables para proyectos angular con bootstrap

### Instalar Angular Cli de forma global
```javascript
   npm install -g @angular/cli
```
### Instalar Angular Cli de forma local
```javascript
   npm install @angular/cli
```
### Instalar Angular Cli una versión especifica
```javascript
   npm install -g @angular/cli@6.1.1
```
### Instalar typescript
```javascript
    npm i -g typescript
```
### crear proyecto usando sass por defecto
```javascript
    ng new miapp --style=scss
    cd miapp
```

### Agregar ngx-bootstrap+ y Bootstrap 4+
```javascript
    npm install ngx-bootstrap bootstrap@next --save
```
### Configuración
**realizar cambios en angular-cli.json**
```javascript
...
"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
],
...
"defaults": {
  ... 
  "styleExt": "scss",
  ...
},
...
```
### Crear un archivo _variables.scss en src/assets/bootstrap

**Importar valores en style.scss de la aplicación**

```javascript
@import 'assets/bootstrap/variables'; 
@import '../node_modules/bootstrap/scss/bootstrap';
```

### Actualizar todo package.json

**Instalar/desintalar angular-cli en su version ultima (https://github.com/angular/angular-cli)**
```javascript
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest
```
**`npm-check-updates`, es una utilidad que ajusta automáticamente un paquete.json con la última versión de todas las dependencias**
```javascript
npm install -g npm-check-updates
npm-check-updates -u
rm -rf node_modules     //para hacer una instalación de dependencias limpia
npm install 
```

**Actualizar una dependencia**
```javascript
npm install {package-name}@* {save flags?}   
//Ejemplo:   npm install express@* --save
```

### Comandos

Forma general:

```javascript
ng generate [operacion] [opcion]
```


| ID | Operación | Uso                             | Alias                   |
|----|-----------|---------------------------------|-------------------------|
| C  | Component | ng g component my-new-component | ng g c my-new-component |
| D  | Directive | ng g directive my-new-directive | ng g d my-new-directive |
| P  | Pipe      | ng g pipe my-new-pipe           | ng g p my-new-pipe      |
| S  | Service   | ng g service my-new-service     | ng g s my-new-service   |
| CL | Class     | ng g class my-new-class         | ng g cl my-new-class    |
| G  | Guard     | ng g guard my-new-guard         | ng g g my-new-guard     |
| I  | Interface | ng g interface my-new-interface | ng g i my-new-interface |
| E  | Enum      | ng g enum my-new-enum           | ng g e my-new-enum      |
| M  | Module    | ng g module my-module           | ng g m my-module        |
| L  | Library   | ng generate library my-library  | ng g lib my-library     |


**Opciones**

| Opción               | Alias | Descripción                                              | Usado en Esquema (ID) |
|----------------------|-------|----------------------------------------------------------|-----------------------|
| --dry-run            | -d    | Ejecutar sin ningín cambio                               | C, CL                 |
| --force              | -f    | Forzar sobrescritura de archivo                          | C, CL                 |
| --project            |       | Nombre del Proyecto                                      | C, CL                 |
| --inline-style       | -s    | Para especificar el estilo estará en archivo ts          | C                     |
| --inline-template    | -t    | Para especificar la plantilla estará en archivo ts       | C                     |
| --view-encapsulation | -v    | Estrategia de encapsulación de la vista                  | C                     |
| --change-detection   | -c    | La estrategia de detección de cambios                    | C                     |
| --prefix             | -p    | Prefijo para aplicar a los selectores generados          | C                     |
| --styleext           |       | Extensión de archivo que se utilizará para estilo        | C                     |
| --spec               |       | Genera un archivo de especificaciones (test)             | C, CL                 |
| --flat               |       | Indicador para crear en un directorio                    | C                     |
| --skip-import        |       | Omitir la importación del módulo                         | C                     |
| --selector           |       | Se define el selector a utilizarse en el componente      | C                     |
| --module             | -m    | Permite la especificación del módulo declarante          | C                     |
| --export             |       | Especifica si el módulo declarante exporta el componente | C                     |



**Ejemplo para agregar routing**

```javascript
ng g m [nombre-componente]/[nombre-componente]-routing --flat --module=[nombre-componente]
```

```javascript
ng g m [nombre-componente]  --spec false --module
```


**Arrancando un proyecto en desarrollo**

ng serve: Permite arrancar el servidor

--host: Permite definir el ip del servidor (0.0.0.0 todos)

--port: Permite definir el puerto por el que saldrá

```javascript
ng serve --host 0.0.0.0 --port 4201
```



----------

 `@DavidNinaM`