Angular 1 CRUD Ex

var app;
(function () {
    'use strict'; //Defines that JavaScript code should be executed in "strict mode"
    app = angular.module('myapp', []);
})();

app.controller('StudentCtrl', ['$scope', 'CrudService',
    function ($scope, CrudService) {

        // Base Url 
        var baseUrl = '/api/Student/';
        $scope.btnText = "Save";
        $scope.studentID = 0;
        $scope.SaveUpdate = function () {
            var student = {
                FirstName: $scope.firstName,
                LastName: $scope.lasttName,
                Email: $scope.email,
                Address: $scope.adress,
                StudentID: $scope.studentID
            }
            if ($scope.btnText == "Save") {
                var apiRoute = baseUrl + 'SaveStudent/';
                var saveStudent = CrudService.post(apiRoute, student);
                saveStudent.then(function (response) {
                    if (response.data != "") {
                        alert("Data Save Successfully");                       
                        $scope.Clear();

                    } else {
                        alert("Some error");
                    }

                }, function (error) {
                    console.log("Error: " + error);
                });
            }
        }
        
        $scope.SaveUpdate = function () {
            var student = {
                FirstName: $scope.firstName,
                LastName: $scope.lasttName,
                Email: $scope.email,
                Address: $scope.adress,
                StudentID: $scope.studentID
            }
            if ($scope.btnText == "Save") {
                var apiRoute = baseUrl + 'SaveStudent/';
                var saveStudent = CrudService.post(apiRoute, student);
                saveStudent.then(function (response) {
                    if (response.data != "") {
                        alert("Data Save Successfully");
                        $scope.GetStudents();
                        $scope.Clear();

                    } else {
                        alert("Some error");
                    }

                }, function (error) {
                    console.log("Error: " + error);
                });
            }
            else
            {
                var apiRoute = baseUrl + 'UpdateStudent/';
                var UpdateStudent = CrudService.put(apiRoute, student);
                UpdateStudent.then(function (response) {
                    if (response.data != "") {
                        alert("Data Update Successfully");
                        $scope.GetStudents();
                        $scope.Clear();

                    } else {
                        alert("Some error");
                    }

                }, function (error) {
                    console.log("Error: " + error);
                });
            }
        }
        
        $scope.GetStudentByID = function (dataModel)
        {
            debugger
            var apiRoute = baseUrl + 'GetStudentByID';
            var student = CrudService.getbyID(apiRoute, dataModel.StudentID);
            student.then(function (response) {
                $scope.studentID = response.data.StudentID;
                $scope.firstName = response.data.FirstName;
                $scope.lasttName = response.data.LastName;
                $scope.email = response.data.Email;
                $scope.adress = response.data.Address;
                $scope.btnText = "Update";
            },
            function (error) {
                console.log("Error: " + error);
            });
        }
        
        $scope.DeleteStudent = function (dataModel)
        {
            debugger
            var apiRoute = baseUrl + 'DeleteStudent/' + dataModel.StudentID;
            var deleteStudent = CrudService.delete(apiRoute);
            deleteStudent.then(function (response) {
                if (response.data != "") {
                    alert("Data Delete Successfully");
                    $scope.GetStudents();
                    $scope.Clear();

                } else {
                    alert("Some error");
                }

            }, function (error) {
                console.log("Error: " + error);
            });
        }

        $scope.Clear = function () {
            $scope.studentID = 0;
            $scope.firstName = "";
            $scope.lasttName = "";
            $scope.email = "";
            $scope.adress = "";
        }

        }]);
        
        
        
        
        
app.service('CrudService', function ($http) {

    var urlGet = '';
    this.post = function (apiRoute, Model) {
        var request = $http({
            method: "post",
            url: apiRoute,
            data: Model
        });
        return request;
    }
    this.put = function (apiRoute, Model) {
        var request = $http({
            method: "put",
            url: apiRoute,
            data: Model
        });
        return request;
    }
    this.delete = function (apiRoute) {
        var request = $http({
            method: "delete",
            url: apiRoute
        });
        return request;
    }
    this.getAll = function (apiRoute) {

        urlGet = apiRoute;
        return $http.get(urlGet);
    }

    this.getbyID = function (apiRoute,studentID) {

        urlGet = apiRoute + '/' + studentID;
        return $http.get(urlGet);
    }
});

https://www.codeproject.com/Articles/886982/AngularJS-Event-Calendar-Scheduler
https://www.codeproject.com/Articles/1160729/Build-a-Credit-Card-Entry-Page-using-Angular-Par

(function () {
  'use strict';
  // Create angular routing
  angular.module('app')
    .config(['$routeProvider', function ($routeProvider) {
      $routeProvider
      .when('/',
      {
        templateUrl: 'app/index/index-splash.html',
        controllerAs: 'vm',
        controller: 'IndexController'
      })
      .when('/creditcard',
      {
        templateUrl: 'app/creditcard/creditcard.html',
        controllerAs: 'vm',
        controller: 'CreditCardController'
      })
      .otherwise(
      {
        redirectTo: '/'
      });
    }]);
})();

(function () {
  "use strict";
  angular.module("app")
    .controller("CreditCardController", CreditCardController);
  function CreditCardController($http, $location) {
    var vm = this;
    var dataService = $http;
    // Create UI state object
    vm.uiState = {
      isMessageAreaHidden: true,
      isLoading: true,
      messages: []
    };
  }
})();

function CreditCardController($http, $location) {
  var vm = this;
  var dataService = $http;
  // Expose public properties
  vm.cardTypes = [];
  vm.months = [];
  vm.years = [];
  vm.selectedCardType = {};
  vm.selectedMonth = {};
  vm.creditCard = {
    creditCardId: null,
    cardType: null,
    nameOnCard: null,
    cardNumber: null,
    securityCode: null,
    expMonth: null,
    expYear: null,
    billingPostalCode: null
  };
  vm.uiState = {
    isMessageAreaHidden: true,
    isLoading: true,
    messages: []
  };
  // Initialize Controller
  loadCardTypes();
  loadYears();
  loadMonths();
  // Load Credit Card Types
  function loadCardTypes() {
  
  }
  // Load years
  function loadYears() {
    
  }
  // Load months
  function loadMonths() {
     
  }
}

function loadCardTypes() {
  vm.cardTypes.push({ cardType: 'Visa' });
  vm.cardTypes.push({ cardType: 'MasterCard' });
  vm.cardTypes.push({ cardType: 'American Express' });
  vm.cardTypes.push({ cardType: 'Discover' });
  vm.selectedCardType = vm.cardTypes[0];
}

function loadYears() {
  var year = new Date().getFullYear();
  for (var i = 0; i < 20 ; i++) {
    vm.years.push((year + i));
  }
  vm.creditCard.expYear = year;
}

<select id="expYears"
        name="expYears"
        class="form-control"
        ng-model="vm.creditCard.expYear"
        ng-options="item for item in vm.years track by item">
</select>

function loadMonths() {
  var today = new Date();
  vm.months.push({ monthNumber: 1, monthName: 'January' });
  vm.months.push({ monthNumber: 2, monthName: 'February' });
  vm.months.push({ monthNumber: 3, monthName: 'March' });
  vm.months.push({ monthNumber: 4, monthName: 'April' });
  vm.months.push({ monthNumber: 5, monthName: 'May' });
  vm.months.push({ monthNumber: 6, monthName: 'June' });
  vm.months.push({ monthNumber: 7, monthName: 'July' });
  vm.months.push({ monthNumber: 8, monthName: 'August' });
  vm.months.push({ monthNumber: 9, monthName: 'September' });
  vm.months.push({ monthNumber: 10, monthName: 'October' });
  vm.months.push({ monthNumber: 11, monthName: 'November' });
  vm.months.push({ monthNumber: 12, monthName: 'December' });
  // Figure out which month to select
  // Make it next month by default
  vm.creditCard.expMonth = today.getMonth() + 2;
  // If past December, then make it January of the next year
  if (vm.creditCard.expMonth > 12) {
    vm.creditCard.expMonth = 1;
    vm.creditCard.expYear = vm.creditCard.expYear + 1;
  }
  vm.selectedMonth = vm.months[vm.creditCard.expMonth - 1];
  // Set the page UI flag as not loading anymore
  vm.uiState.isLoading = false;
}
<select id="expMonths"
        name="expMonths"
        class="form-control"
        ng-model="vm.selectedMonth"
        ng-options="item.monthName for item 
                    in vm.months 
                    track by item.monthNumber">
</select>

function loadYears() {
  var year = new Date().getFullYear();
  dataService.get("/api/Years")
    .then(function (result) {
      vm.years = result.data;
      vm.creditCard.expYear = year;
    },
    function (error) {
      handleException(error);
    });
}

function loadMonths() {
  var today = new Date();
  // Get the language from the browser
  var language = 
     navigator.languages && 
     navigator.languages[0] || // Chrome / Firefox
     navigator.language ||     // All browsers
     navigator.userLanguage;   // IE <= 10
  dataService.get("/api/MonthNames/" + language)
    .then(function (result) {
      // Transform the data to use nn - monthName format
      for (var index = 0; 
               index < result.data.length; 
               index++) {
        var month = {
          monthNumber: index + 1,
          monthName: (index + 1).toString() 
            + "-" + result.data[index].monthName
        };
        vm.months.push(month);
      }
      // Figure out which month to select
      // Make it next month by default
      vm.creditCard.expMonth = today.getMonth() + 2;
      // If past December, make it January of next year
      if (vm.creditCard.expMonth > 12) {
        vm.creditCard.expMonth = 1;
        vm.creditCard.expYear = vm.creditCard.expYear + 1;
      }
      vm.selectedMonth = 
        vm.months[vm.creditCard.expMonth - 1];
      vm.uiState.isLoading = false;
    },
    function (error) {
      handleException(error);
    });
}

转载于:https://my.oschina.net/u/924064/blog/903331