Thursday, June 14, 2018

Friday, September 15, 2017

Tutorial: Sharing Data Between Angular Components - Parent to Child, Child to Parent, and between siblings

Be The First To Comment
Great video talking about sharing Data Between Angular Components - Parent to Child, Child to Parent, and between siblings by Jeff Delaney, AngularFirebase. 



Wednesday, September 13, 2017

Wiring Leaflet, ESRI-leaflet, and Angular for a web map

1 Comment
Basic prototype wiring to map geospatial information using Leaflet, ESRI-leaflet, Angular 4.  There are several nice examples out there, but it is a quick and dirty way of putting all things together and display the map using Angular/Cli.

Step 1. Generate an angular project from angular/cli
                ng new leafletPrototype

Step2. Install all dependencies
a.     Npm install leaflet --save
b.     Nmp install esri-leaflet --save
c.      Npm install @types/leaflet –save

Your pacakage.json will looks like –
"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/leaflet": "^1.0.69",
    "core-js": "^2.4.1",
    "esri-leaflet": "^2.1.1",
    "leaflet": "^1.2.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },


Step 3. Configure .angular-cli.json
Add leaflet and esri-leaflet styles and scripts in .angular-cli.json
"styles": [
        "styles.scss",
        "../node_modules/leaflet/dist/leaflet.css",
        "../node_modules/leaflet-draw/dist/leaflet.draw.css"
      ],


      "scripts": ["../node_modules/leaflet/dist/leaflet.js",
        "../node_modules/esri-leaflet/dist/esri-leaflet.js"
      ],

Step 4. Now, run “ng serve” and see if any errors while importing leaflet libraries.

Monday, August 28, 2017

Quick cheat-sheet on Angular/cli

Be The First To Comment
Quick cheat-sheet on Angular/cli to generate boiler plate codes.

Install Angular/cli
npm install –g @angular/cli

Check Agnular/cli version
ng –v
        or
npm list –g  @angular/cli --depth=0

Generate  files without installing it
ng new ng2CliApp --skip-install

Create new project with out writing the files in but report them commandline console
ng new ng2CliApp --dry-run

Create new project with app prefix
ng new ng2CliApp --prefix coolapp --dry-run

Create new project without test files
ng new ng2CliApp  --skip-tests --prefix cool_ng2CliApp --dry-run

Create new project with style-sheets
ng new ng2CliApp --skip-tests --prefix cool_ng2CliApp --style scss 

Create new project with Routing
ng new ng2CliApp --routing --skip-tests --prefix cool_ng2CliApp --style scss --skip-install

Create new Component
ng g component my-new-component

 

© 2011 GIS and Remote Sensing Tools, Tips and more .. ToS | Privacy Policy | Sitemap

About Me