Ng2 CLI

 +

(some Webstorm Tips)

Angular CLI

https://cli.angular.io/

https://github.com/angular/angular-cli

https://www.sitepoint.com/ultimate-angular-cli-reference/

  • npm install -g angular-cli
  • ng new <my-project>

CLI Commands

Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

Conventions

https://angular.io/styleguide

App Structure

root
    src
        app
           my-module 1
               components
               pages
           my-module 2
           ...      
        assets
        environments
        styles

Folder names small-caps with dashcase

Files Nomenclature

Names with dashcase and Types with dotcase

    Types

  • Component
  • Spec
  • Actions
  • Entity
  • Module
  • Projections
  • Reducers

        Names

  • comment-list.component
  • comment-list.reducer.spec.ts
  • comment.actions.ts
  • comment.entity.ts
  • comment.module.ts
  • comment.projections.ts
  • comment.reducers.ts
  • package.json
  • npm-shrinkwrap
  • bower.json & bowerrc
  • .gitignore
  • tslint.json
  • karma.conf.js
  • protractor.conf.js
  • angular-cli.json
  • .editorconfig

Root Dir

Package.json

Node package Management

{
name: "my-project",
version: "0.0.0",
licence:
scripts: {
    "start": "ng serve --host 0.0.0.0",
    "postinstall": "bower install",
    "lint": "tslint \"src/**/*.ts\" -e \"src/assets/**\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
}
private: true,
dependencies:{
    "@angular/common": "2.1.2",
    "@angular/compiler": "2.1.2",
    "@angular/core": "2.1.2",
   ...
  }
devDependencies:{
    "@angular/compiler-cli": "2.1.2",
    "@types/cuid": "0.0.30",
    "@types/jasmine": "^2.2.30",
   ...
  }
}
npm i <package-name> --save || --save-dev

npm-shrinkwrap.json

{
  "name": "migration-project",
  "version": "0.0.0",
  "dependencies": {
    "@angular/common": {
      "version": "2.1.2",
      "from": "@angular/common@2.1.2",
      "resolved": "http://artifactory.ref.gnc:80/artifactory/api/npm/npm-repos/@angular/common/-/common-2.1.2.tgz"
    },
    "@angular/compiler": {
      "version": "2.1.2",
      "from": "@angular/compiler@2.1.2",
      "resolved": "http://artifactory.ref.gnc:80/artifactory/api/npm/npm-repos/@angular/compiler/-/compiler-2.1.2.tgz"
    },
    "@angular/core": {
      "version": "2.1.2",
      "from": "@angular/core@2.1.2",
      "resolved": "http://artifactory.ref.gnc:80/artifactory/api/npm/npm-repos/@angular/core/-/core-2.1.2.tgz"
    },
...
npm shrinkwrap [--dev]

Bower

Package manager for the web

bower.json

{"directory" : "src/assets/bower_components"}

bowerrc

{
  "name": "le-tube",
  "dependencies": {
    "paper-elements": "PolymerElements/paper-elements#^1.0.7",
    "iron-icons": "PolymerElements/iron-icons#1.1.3",
    "vaadin-combo-box": "^1.1.3"
  }
}

.gitignore

# dependencies
/node_modules
/src/assets/bower_components

# IDEs and editors
/.idea
.project
.classpath
*.launch
.settings/

tslint.json

run-script lint

Webstorm tip

Show npm scripts on package.json

//    "member-ordering": [
//      true,
//      "static-before-instance",
//      "variables-before-functions"
//    ],

exception to the defaults

Karma / Protactor

Testing Framework

angular-cli.json

conf for the cli

.editorconfig

conf for the editor

New Project

Title Text

  • ng new my-project --style=scss
  • update angluar-cli prefix

Ng2 CLI

By bretto

Made with Slides.com

Ng2 CLI

  • 334

More from bretto