AngularJS

367

Solutions

3

Articles & Videos

253

Contributors

AngularJS is an open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Share tech news, updates, or what's on your mind.

Sign up to Post

1. I followed examples in the link below and coded a map. It works. You can see a map here:

 http://leafletjs.com/examples/choropleth/

You see if you zoom out, you'll see Hawaii and Alaska.

2. I've been asked to make it look like this...Have Alaska and Hawaii next to the US
https://www.highcharts.com/maps/demo/us-counties

3. The Leaflet link in step 1 has the "us counties.js" file

4. I looked at Highchart's JS file (you can see the link in JSFiddle that comes with Highcharts, step 2 above).
    Looks like they have Alaska and Hawaii bundled in a separate section of the JS file and then they have the rest of the states.

Anyone has worked with Leaflet.Js and got Hawaii and Alaska moved next to the US?
0
Space-Age Communications Transitions to DevOps
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

I have created a new angular project via angular-cli.

I now what to install jQuery but installing it via npm.

How can I do this?
0
createNewASLForm is the main FORM
AslAccount - is the formArray
From Mark up -
<div *ngIf="createNewASLForm.get('AslAccount').get('acctNumber').touched " class="alert alert-danger">
                    Please enter Acct Number
                  </div>

Tried another

<input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="aslFormName" placeholder="ASL Form Name" name ="acctNumber" required>
<div *ngIf="createNewASLForm.controls.AslAccount.controls.['acctNumber'].hasError('required') && createNewASLForm.controls.AslAccount.controls.['acctNumber'].touched" class="alert alert-danger">
Please enter Acct Num
</div>

Also need to add an entry for 11 numerical vals only....
           



Same this works for standalone controls in the main form
 <input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="aslFormName" placeholder="ASL Form Name" name ="aslFormName" required>
              <div *ngIf="createNewASLForm.controls['aslFormName'].hasError('required') && createNewASLForm.controls['aslFormName'].touched" class="alert alert-danger">Please enter ASL form name</div>



Any help or pointers is appreciated.


Tried this one too...
Used this one too in the markup
<input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="myAcct"   required>
<div *ngIf="myForm.get('SomeAcct').get('myAcct').touched " class="alert alert-danger">Please enter Acct Number</div>…
0
I am following the tutorial from here: "http://itsolutionstuff.com/post/codeigniter-3-and-angularjs-crud-with-search-and-pagination-exampleexample.html"

I am getting these errors: errors
Where am i going wrong ? i have tried exhaustively to search for answer or hint but i am lost, i am obviously pretty new to codeigniter.
Here is link to github files that i downloaded for tutorial. I appreciate any help or suggestion. Thank You all.
0
Is this the right way of doing...this is about Angular2 - http observables...
first use a .post and then do .get response of the same form data that was posted....

using a data API here - such as a converted http url to a privately named dataAPI

addFormData(formInput: FormInputs): Observable<FormInputs> {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  let sub = this.http.post(this.dataAPI, JSON.stringify(formInput), {headers: headers}).map(response => response.json()) ;

  sub.subscribe( (aData) => {console.log(aData); }, (err)=> console.log(err),  ()=>{ console.log("Done")} );

  return sub;
0
I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -
Current state
Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner) Target state
My current code is as below


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" 

Open in new window

0
I had this question after viewing Anyway to format this array data differently?.

I've been at this for two hours now! it can't be that hard. I'll keep at it but I hope someone can help me...

 The solution in link above works and you can see the JSFiddle Husyein did here

https://jsfiddle.net/5t10qr3c/

My data has changed and I've added one more value to it. I just need to change the "str" and how it's contacted and add the new value.

My new data looks like this. Please note the "computedvalue". I also added "RowId" thinking this might help.
var data = [{
  RowId: 1,
  name: "county1",
  rank: 333,
  year: 2015,
ComputedValue: 2.8
}, {
  RowId: 2,
  name: "county2",
  rank: 2302,
  year: 2015,
ComputedValue: 3.7
}, {
  RowId: 3,
  name: "county1",
  rank: 144,
  year: 2014,
ComputedValue: 5.9
}, {
   RowId: 4,
  name: "county2",
  rank: 123,
  year: 2014,
ComputedValue: 8.4
}];

Open in new window



In the Fiddler above, how can I change this section to add an array of "computedvalue"?

if (that.name != this.name) {
      str += ']}{"name": "' + this.name + '", "data ": [' + this.rank;
    } else {
      str += ', ' + this.rank;
    }
  } else {
    str += '{"name": "' + this.name + '", "data": [' + this.rank;
  };

Open in new window


 I tried this but it breaks the "data" part of the string

I first changed the "_,chain" to this

var newdata = _.chain(data).sortBy("rank").sortBy("ComputedValue").sortBy("year").value();

Open in new window


Tried these 2

str += str += '{"name": "' + this.name + '", "data": [' + this.rank + '", "ComputedValue: ['+ this.ComputedValue

str += str += '{"name": "' + this.name + '", "data": [' + this.rank + ']' + ' ", "ComputedValue": [' + this.ComputedValue;

Open in new window


So, I want it to look like this. I have the original "data"...I wonder if I can push it into the final json below?

{"name": "county1", "data": [144, 333], "ComputedValue": [5.9,2.8]}{"name": "county2", "data ": [123, 2302], "ComputedValue": [8.4, 3.7]}
0
Hello there,

I have a custom validator that checks if an input field has a number entered into it. The code looks like so

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class NumberValidators {
    static isNumberCheck(): ValidatorFn {
    return  (c: AbstractControl): {[key: string]: boolean} | null => {
        if (c.value !== undefined && (isNaN(c.value))) {
            return { 'value': true };
        };
        return null;
    };
}
}

Open in new window


But the issue I have is when I enter a decimal value it is raising the validation flag which I dont want. I want the input field to have whole numbers and decimal numbers.Can somebody please help me get this correct.

thanks!!
0
I am attempting to apply form validation using bootstrap validator plug-in but I don't see results. Here is the code:

<div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
                                       <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" ng-model="employee.age">
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="company" ng-model="employee.company">
				

Open in new window

0
I am using keno ui grid for angularjs keno grid in our project and am  new to kendo . I am getting data from API similar to below JSON Data and need to bind this data to Kenod Grid basically there will be no header fields / columns .Just simply bind data to grid.

JSON Data (json data viewer

["cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6"
]

It would be great if anyone can provide sample example  in plunker/jsfiddle.

Thanks in advance
0
On Demand Webinar - Networking for the Cloud Era
LVL 8
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

I am learning Angular, Node, npm, deployd, mongodb, etc.  I am making my way through a book titled "Pro AngularJS" by Adam Freeman.

on page 120 I am attempting to prepare the data for a "real world" application called "sportsstore".

I was instructed to install a module called "deployd" which apparently is used for modelling  API's for web applications.

I did that and when I try to start start the "deployd" service I get an error:

C:\PROGRA~2\deployd>dpd -p 5500 sportsstore\app.dpd --mongod
starting deployd v0.8.9...
internal/child_process.js:289
  var err = this._handle.spawn(options);
                         ^

TypeError: Bad argument
    at TypeError (native)
    at ChildProcess.spawn (internal/child_process.js:289:26)
    at exports.spawn (child_process.js:380:9)
    at Object.exports.restart (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\lib\util\mongod.js:38:14)
    at Command.start (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\bin\dpd:149:16)
    at Command.listener (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:301:8)
    at emitOne (events.js:96:13)
    at Command.emit (events.js:188:7)
    at Command.parseArgs (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:617:12)
    at Command.parse (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:458:21)
    at Object.<anonymous> 

Open in new window

0
I had this question after viewing Anyway to format this array data differently?.

The solution in my question above works. You can see it in this JSFiddle that  Huseyin create here https://jsfiddle.net/5t10qr3c/

You see the string output is like this: {"name": "county1", "data": [144, 333]}{"name": "county2", "data ": [123, 2302]}

I actually need this in an array like this: For example array of 2
[Object, Object]
0: Object
    data: Array(2)
              0: 144
              1:333
     name: "county1"
1: Object
   data: Array(2)
             0: 123
             1: 2302
   name: "county2"

I tried these
I used "split" but that won't work

I thought just wrapping the "str" with [] would do it but no, it's still a  string.

I'm thinking as the string is being build, I need to push it into an array? but not sure.
0
1. I have an array and the data looks like below

 var seriesTest  =[];
 var ret = <I get the data from database with C# code>;

 for (var = i=0; i < ret.length; i++)
{
    seriesTest.push({ "name":ret[i].countyName, "rank": ret[i].rank, "year":ret[i].year  });
}

console.log(seriesTest);

Open in new window


2. The data looks like this
 0: Object
      name: "county1"
      rank: 333
      year: 2015

 1: Object
       name: "county2"
      rank: 2302
      year: 2015

 2: Object
       name: "county1"
      rank: 144
      year: 2014

 3: Object
       name: "county2"
      rank: 123
      year: 2014

Open in new window


3. You see the there are 2014 and 2015 years. There are two "county" names...county1 and county2. You see the "rank" as well
For the "data", I want the earliest year (2014) and then 2015
[
{"name": "county1", "data": [144,333]},
{"name": "county2", "data": [123,2302]},
];


Anyway to do this in Javascript?
0
I am trying to call REST services deployed on Tomcat 8 from Angular 4. Since both these are running on separate domains, CORS issue is expected. So, in the tomcat/conf/web.xml, I have added the below filter
<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Authorization,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping> 

Open in new window


This is how I am sending the GET request from Angular
var basicOptions:RequestOptionsArgs = {
  url: 'http://server3:7000/myrest/info',
  method: RequestMethod.Get,
  search: null,
  headers: new Headers(
    {'Authorization': 'Basic AG1hZG1pbjpkZW1vLmRlbW8=' },
    ),
  body: null
};

basicOptions.headers.append('Content-Type', 'application/json');

var reqOptions = new RequestOptions(basicOptions);
var req = new Request(reqOptions);
return this.http.request( req );

Open in new window


Since, I am sending the Authorization header, it is also added in the 'cors.allowed.headers' param in Tomcat.

When I call the REST service from Chrome, it always gives me a 'Invalid CORS request' error (Network tab -> Preview). Below is the error in browser console
XMLHttpRequest cannot load http://server3:7000/myrest/info. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

Open in new window

Is there something else that I need to do to make it work?
0
New to Angular.  I am making my way through a book titled "Pro AngularJS" by Adam Freeman.

If you look at this screenshot while I was debugging the "Add" TO DO item functionality you can see that the new to do item is showing up in the items array, but the web page UI is not updating with the new item.

angular push
Why might it not be getting added?

I don't see any Javascript errors in the console... : (


Here is the TODO.html source:
<!DOCTYPE html>
<html data-ng-app="todoApp">
<head>
    <title>TO DO List</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>
        var model = {
            user: "Adam"
        };

        var todoApp = angular.module("todoApp", []);

        todoApp.run(function ($http) {
            $http.get("todo.json").then(function (data) {
                model.items = data;});
        });

        todoApp.filter("checkedItems", function () {
            return function (items, showComplete) {
                var resultArr = [];
                angular.forEach(items, function (item) {

                    if (item.done == false || showComplete == true) {
                        resultArr.push(item);
                    }
                });
                return resultArr;
            }
        });

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;

            $scope.incompleteCount = function () {
                var 

Open in new window

0
Hello when I record date in database I show a message for my user. I would like that after 3 second this message hide. how do that?

$scope.msg="Dados inseridos com sucesso"; after 3 second hide this menssage

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>AngularJS com Mysql</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="cntrl">
    <form>
    Student Id:   <input type="text"    ng-model="id"   name="id" ng-disabled="obj.idisable">
    Student Name: <input type="text"    ng-model="name" name="name">
    <input type="button" value="{{btnName}}" ng-click="inserdata()">
    {{msg}}
    </form>

<table>
	<thead>
    	<tr>
        <th bgcolor="#EAEAEA"><span class="style5">Name</span></th>
        <th bgcolor="#EAEAEA"><span class="style5">Roll No</span></th>
      </tr>
    </thead>
    <tbody>
    	<select ng-model="cntrl" ng-options="data.Id as data.nome for data in data"></select>
    	<tr ng-repeat="student in data">
				<td align="center"><span class="style8">{{student.Id}}</span></td>
				<td align="center"><span class="style8">{{student.nome}}</span></td>
                <td align="center"><button ng-click="deleteSud(student.Id);" 

Open in new window

0
Hello Experts,

I would know  is it possible to implement Auto suggest  through angularjs2. The application has to search  the database and suggest some alternate name while typing in the text.


Thank you
Roy...
0
Hello there,

I am trying to implement angular2-datatable from https://github.com/mariuszfoltak/angular2-datatable/blob/master/README.md in to my application. But for some reason the rowsOnPage is not taking the number i assign to it. For e.g. when I say show 5 records on a page, it shows all the records. Dont know what I am missing. Can someone please help me resolve it.

<table class="table table-striped table-hover" [mfData]="products  | SearchPipe : searchText" #mf="mfDataTable" [mfRowsOnPage]="5">
                <thead>
                    <tr>
                        <th>
                            <mfDefaultSorter by="gt">GT</mfDefaultSorter>
                        </th>
                        <th>
                            <mfDefaultSorter by="name_e">Name E</mfDefaultSorter>
                        </th>
                        <th class="no-sort hidden-sm-down">
                            <mfDefaultSorter by="name_z">Name Z</mfDefaultSorter>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of products | SearchPipe : searchText">
                        <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gt}}</a></td>
                        <td>{{product.name_e}}</td>
                        <td>{{product.name_z}}</td>
                        <td>
                            <a class="btn btn-primary" 

Open in new window

0
I am exporting a table using pdfmake
The table exports, but there is one item that is 'undefined'.  

I have a main page with multiple tabs and once you hit the 'Printer Friendly' btn, a pdf report opens in a new tab for the specific tab you selected.  The 'printer friendly' btn is what exports the page.  

This code broadcasts  the print function to produce the pdf report depending on what tab you are on.
$scope.printDiv = function(divName) {		
		$rootScope.$broadcast('print');		
	}
	

Open in new window


and the button
<button ng-click="printDiv('rollup-tab')">Printer Friendly</button>

Open in new window



Here is the rest of the code.

Table creation and exports the pdf pdf
$scope.$on('print', function(event, filter) {
			var docDefinition = {

					content: [	
					          {
						  table: {

					              body: [                   			                
					                [ 
					                  '',
					                  'Actual Pieces Issued',
					                  {text: $filter('mcGoalNumberFilter')($scope.actualPiecesMCGoal) + ' /wk'},			                  
					                  {text: $scope.actualPiecesMon, style: 'tableData'},
					                  {text: $scope.actualPiecesTues, style: 'tableData'},
					                  {text: $scope.actualPiecesWed, style: 'tableData'},
					                  {text: $scope.actualPiecesThurs, style: 'tableData'},
					                  {text: $scope.actualPiecesFri, style: 

Open in new window

0
DevOps Toolchain Recommendations
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Need help/attn on this issue here...

Here's my plunker link

http://plnkr.co/edit/Ycd90hYHTnp9wbdeaaUC?p=preview

and code is also copied below....I'm unable to get the checkbox value - I'm getting an empty string.
I want to use a reactive form to do some validations and post all the form controls.

(I started with a template with 2 fields and started my building all fields with some validations and trying to get good hold of Angular2)

app.component.html
   <reactive-form></reactive-form>

Open in new window


app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Open in new window


app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { ReactiveFormComponent } from './reactive/reactive-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ReactiveFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window

reactive-form.component.html
<form (ngSubmit)="processForm()" [formGroup]="form">
<div style="margin: 20px; width: 80%">

    <div class="form-group">
        <label 

Open in new window

0
Hello guys,

I stay started learning with Angular Js and have a doubt. How do I fill in the data of a select?

My code
<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>AngularJS com Mysql</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
-->
    </style>
</head>
<body>
<div ng-app="myApp" ng-controller="cntrl">
    <form>
    Student Id:   <input type="text"    ng-model="id"   name="id" ng-disabled="obj.idisable">
    Student Name: <input type="text"    ng-model="name" name="name">
    <input type="button" value="{{btnName}}" ng-click="inserdata()">
    {{msg}}
    </form>

<table>
	<thead>
    	<tr>
        <th bgcolor="#EAEAEA"><span class="style5">Name</span></th>
        <th bgcolor="#EAEAEA"><span class="style5">Roll No</span></th>
      </tr>
    </thead>
    <tbody>
    	<select ng-model="cntrl" ng-options="student.Id as student.nome for student in students"></select>
    	<tr ng-repeat="student in data">
				<td align="center"><span class="style8">{{student.Id}}</span></td>
				<td align="center"><span class="style8">{{student.nome}}</span></td>
                <td align="center"><button ng-click="deleteSud(student.Id);" >Delete</button></td>
                <td align="center"><button 

Open in new window

0
https://jsfiddle.net/shanidkv/vbft1sc4/

Need this in angular2 with a model driven form. Any help or pointers are much appreciated.
0
I have node installed on my laptop.

I have a folder that I want to use for my testing of angular:

C:\programfiles\angularjs

node is installed here:

C:\programfiles\nodejs

From within the nodejs directory I want to be able to start an http server like this:

C:\programfiles\nodejs> node server.js

which would start the http server and just wait, listening on some port like 5000

then, in a web browser like Chrome, I want to navigate to localhost and load an HTML file:

localhost:5000/test.html

But the test.html file resides at this location:

C:\programfiles\angularjs\test.html

I've been doing lots of reading on "express" and "connect" middleware, but I just can't seem to make it work.


For example:

I ran the following:

npm install connect -g

and

npm install serve-static -g

and then ran "node server.js"

server.js:

var connect = require('connect');

var serveStatic = require('serve-static');


connect.createServer( serveStatic("../angularjs") ).listen( 5000);

Open in new window


gives this error:

TypeError: connect.createServer is not a function
0
Trying to post form data after adding a row using the push in the angular2/Typescript -

Here's my plunker...getting errors on the form post  - was trying to do a reactive form/model driven in angular2 -- here's my plunker...

http://plnkr.co/edit/2DdwZ0T2vzdqEN8AlCQI?p=preview 

...need some help if anyone can -- greatly appreciate...


Adding to that above - here's my submit code that I'm having problems...the landing is not even rendering on the localhost
So this form has to post the collected or added rows - I want to see its JSON now, I'll use an API from backend to post it finally.

 <form [formGroup]="tabData (ngSubmit)="onSubmit()">
<div class="container">
  <div class="col-md-12">
      
    <h1>Product List</h1>
      <table class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th class="text-center">ID</th>
            <th class="text-center">Name</th>
            <th class="text-center">Description</th>
            <th class="text-center">Price</th>
            <th class="text-center">&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor = "let product of products">
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.price}}</td>
            <td>
                <button class="btn btn-info"
                        (click) ="showEditProductForm(product)">
                    <i 

Open in new window

0
Hi all I am having service written with one of the method as follows,
var GetData = function (token) {

    $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    var response = $http.get(baseurl + "api/controller/search/1/xxxx");
    return response;
};

Open in new window

When I am doing the same call in Postman or fiddler this is giving me results where as from application I am getting the following error
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

I have added the extension Allow control Allow originto my chrome browser and testing .
0

AngularJS

367

Solutions

3

Articles & Videos

253

Contributors

AngularJS is an open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.