我使用的是inspinia管理模板，想要发送http post请求到web API。我有angular JS脚本，并将使用它。

Question

我有以下Anguar脚本。以及在哪里使用它。我是否应该在同一页面中使用，例如，views/somefile.html或任何其他控制器？我对Angular JS和这个模板很陌生。

$http({
    url: 'url-here',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    data: JSON.stringify(parameter)
}).success(function(data, status) {

    if (data.status == 'success') {
        $scope.succ = "success";
        var sessionid = data.doctor.doctor_id;

        $timeout(function() {
            $window.location.href = 'login?sessionid=' + sessionid + '';
        }, 1000);
    } else if (data.status == 'failure') {
        $scope.succ = "fail";
    }
});

Answer 1

这里有一个可能对你有帮助的例子。保持代码的整洁和可重用性是最重要的。因此，请始终将您的公共代码放在服务层。

//使用Angular 1

var app = angular.module("Demo", []);
app.controller("DemoController", ["$scope", "DemoService", "$window",    "$timeout", function($scope, DemoService, $window, $timeout){
    $scope.validateUser = function(){
        DemoService.userValidation($scope.user, $scope.validateUserSuccess, $scope.validateUserError);
    }

    $scope.validateUserSuccess = function(data){
        // Success Callback
        $scope.succ = "success";
        var sessionid = data.doctor.doctor_id;

        $timeout(function() {
            $window.location.href = 'login?sessionid=' + sessionid + '';
        }, 1000);
    };

    $scope.validateUserError = function(data){
        // Error Callback
        $scope.succ = "fail";
    };
}]);

app.service("DemoService", ["$http", function($http){
    this.userValidation = function(parameter, successCB, errorCB){
        $http({
            url: 'url-here',
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            data: JSON.stringify(parameter)
        }).success(function(data, status) {

           if (data.status == 'success') {
               successCB(data);
            } else if (data.status == 'failure') {
                errorCB(data);
           }

    });
};
}]);

//使用Angular 2

            // parent.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule, JsonpModule } from '@angular/http';

    import { LandingComponent } from './view/landing.component';

    import { AdminService } from './service/admin.service';

    @NgModule({
      imports : [
        BrowserModule,
        HttpModule,
        JsonpModule
      ],
      declarations : [
        LoginComponent
      ],
      providers : [
        AdminService
      ],
      bootstrap : [ LandingComponent ]
    })
    export class ParentModule {}


    // admin.service.ts

    import { Injectable } from '@angular/core';
    import { Admin } from '../util/admin';
    import { Http, Headers } from '@angular/http';

    import 'rxjs/add/operator/toPromise';

    @Injectable()
    export class ValidateUser {
      adminObj = {};
      option = new Headers({
        "Content-Type": "application/json"
      });

      constructor (private http: Http) {}

      validateUser(user: any) : Promise<any> {
        return this.http.post("http://127.0.0.1:3002/users", JSON.stringify(user), {headers:this.option}).toPromise();
      }
    }

    // login.component.ts

    import { Component } from '@angular/core';
    import { AdminService } from '../../service/admin.service';
    import { Admin } from '../../util/admin';

    @Component({
      moduleId : module.id,
      templateUrl : "./login.component.html",
      styleUrls : ['./login.component.css']
    })
    export class LoginComponent {
      adminUser = {};

      constructor(
        private adminService : AdminService
      ){}

      validate() : void {
        this.adminService.validateUser(this.adminUser).then((success)=>{
            this.adminService.setAdminDetail(JSON.parse(success._body));
        }).catch((err)=>{
          alert("Invalid credential")
        });
      }
    }