Http Service implementing in Angular 4

Take one json file: assets/employeedetail.json file

[{
“EmpName”:”Monvi”,
“EmpId”:”12″,
“Skillset”:”Angular”
},
{
“EmpName”:”Rachana”,
“EmpId”:”13″,
“Skillset”:”Angular”
},
{
“EmpName”:”ram”,
“EmpId”:”12″,
“Skillset”:”Angular”
}]

app/httpservice.service.ts :

import { Injectable } from ‘@angular/core’;
import {Http, Response} from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
@Injectable()
export class HttpserviceService {

constructor(private http:Http) { }
private url:string=”./assets/employeedetails.json”;
getWebDetails() {
return this.http.get(this.url)
.map((response:Response)=>response.json());
}

}

webcomponent.component.ts:

import { Component, OnInit } from ‘@angular/core’;
import { HttpserviceService } from ‘../httpservice.service’;

@Component({
selector: ‘app-webcomponent’,
templateUrl: ‘./webcomponent.component.html’,
styleUrls: [‘./webcomponent.component.css’]
})
export class WebcomponentComponent implements OnInit {

constructor(private http:HttpserviceService) { }
webdetails=[];
ngOnInit() {
this.http.getWebDetails()
.subscribe(result=>this.webdetails=result);
}

}

webcomponent.component.html

Web Data From Http

• {{uobj.EmpName}} {{uobj.EmpId}} {{uobj.Skillset}}

Web Data From Http

• {{uobj.EmpName}} {{uobj.EmpId}} {{uobj.Skillset}}

include app.module.ts file
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { HttpModule} from ‘@angular/http’;

import { AppComponent } from ‘./app.component’;
import { WebcomponentComponent } from ‘./webcomponent/webcomponent.component’;

@NgModule({
declarations: [
AppComponent,
WebcomponentComponent
],
imports: [
BrowserModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Advertisements

Angular js sample projects

Angularjs sample application

19 AngularJS Admin Templates for Download

https://github.com/angular/angular.js/wiki/Projects-using-AngularJS

http://angularcode.com/

https://www.template.net/web-templates/website-templates/angularjs-template/

http://startangular.com/

15 Best Responsive HTML5 & CSS3 AngularJS Admin Templates To Build Awesome Web Apps 2016

30+ Responsive Free AngularJS Admin Themes

Bootstrap scrollspy affix

Understanding Bootstrap’s Affix and ScrollSpy plugins

 

35 Best Responsive CSS Frameworks and Grids

http://designscrazed.org/best-responsive-css-frameworks/

Semantic UI Framework

Twitter Bootstrap Framework

Foundation Framework

AngularJS 2 way data binding

// any variable attached to $scope can have live representation in the view
myApp.controller('myController', function($scope){
    $scope.myAppModel = {
        firstName: 'Dave',
        occupation: 'UI Architect
    };
});

<!-- if we type in new values, they will display in real time -->
<div ng-controller="myController">
  <span> {{ myAppModel.firstName }} </span><br>
  <input type="text" name="firstName" ng-model="myAppModel.firstName">
  <span> {{ myAppModel.occupation}} </span><br>
  <input type="text" name="occupation" ng-model="myAppModel.occupation">
</div>

AngularJS currently accomplishes (view-model) data-binding via “dirty-checking”, a process of recursively comparing current data values for each $scope object with previous values to see what has changed if there has been an associated UI event or “watched” model event.

Basic comparison of jQuery and AngularJS

Tags

Basic comparison of jQuery and AngularJS

<!-- as a user types their name, show them their input in real time -->
<!-- the jQuery IMPERATIVE way -->
<form name="imperative">
  <label for="firstName">First name: </label>
  <input type="text" name="firstName" id="firstName">
  <span id="name-output"></span>
</form>

<script>
$(function(){
    // Notice how we must make sure the ID strings in both HTML
    // and JavaScript MUST match
    $('#firstName').keypress(function(){
        // boilerplate: retrieve a model value
        var nameValue = $('#firstName').value();
        // boilerplate: paint the model value into the view
        $('#name-output').text(nameValue);
    });
});
</script>

<!-- the AngularJS DECLARATIVE way -->
<form name="declarative">
  <label for="firstName">First name: </label>
  <!-- the next two lines create the 2-way binding between the model and view -->
  <input type="text" name="firstName" id="firstName" ng-model="firstName">
  <span>{{firstName}}</span>
</form>

<script>
// Because AngularJS hides the boilerplate, no DOM string references to maintain
// between HTML and JavaScript
</script>