65.9K
CodeProject 正在变化。 阅读更多。
Home

AngularJS 示例

Tony Jen
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.83/5 (8投票s)

2015年5月15日

CPOL

3分钟阅读

viewsIcon

104017

downloadIcon

6179

一个我创建的 AngularJS 项目的剖析。我们将讨论应用程序的各个部分，从 HTML 元素到后端控制器和服务。

引言

今天，我们将创建一个简单的 AngularJS CRUD 应用程序。我是在 Visual Studio 2013 中创建了这个应用程序。我也下载了一些依赖项，例如 AngularJS、Bootstrap 和 Jquery。

如果您想查看应用程序的实时副本，可以通过单击此处的链接进行查看

更新

我在这里创建了一篇关于验证技巧的文章：AngularJS 中的验证。请查看。它向您展示如何验证您在表单中输入的数据。

背景

AngularJS 旨在通过允许开发人员将代码分离到模块、控制器和服务中来简化 Web 开发。该框架在开发领域非常流行，越来越多的公司正在使用它。

Application

这是应用程序的屏幕截图。此应用程序允许您添加、删除和浏览租户列表。我们正在使用 bootstrap、AngularJS、JQuery。 Visual Studio 解决方案用于跟踪所有依赖项。

模块

AngularJS 应用程序的核心是模块。要创建一个模块，我们创建一个名为realestateApp.js的 JavaScript 文件。内容是

(function () {
    angular.module("realestateApp", []);
}());

这将创建一个名为 realestateApp 的模块。我们将在 HTML 文件中以这种方式在我们的应用程序中使用这个模块

<body ng-app="realestateApp" class="ng-scope">

控制器 (Controller)

接下来，我们需要一个控制器来访问模型数据和方法。 这行代码将注册一个名为 tenantsController 的控制器，如下所示

<div class="container" ng-controller="tenantsController" ngcloak>

此控制器包含一个名为 $scope 的 angular 值，它类似于 div 内部元素可以访问的模型。在我们的应用程序中，我们以这种方式将模型添加到 $scope

$scope.tenant = tenantService.getTenant(0);

这允许 div 使用 tenant 作为用于双向绑定的模型，并且还可以使用模型上的方法。一个例子是如何用两种方式完成的。一种是在输入文本框中使用模型，如下所示

<input type="text" ng-model="tenant.FirstName" placeholder="Enter a name here">

文本表单中的任何更改都将自动更新模型，因此无需保存。

另一种方法是将函数分配给按钮上的 click 事件，如下所示

<button class="btn btn-primary" ng-click="previousTenant()">

这允许表单事件调用函数来更新模型对象，并提供诸如加载、添加和删除数据到模型等功能。

我们称之为 tenantsController 的控制器包含从名为 tenantService 的服务加载模型的方法。该服务在 tenantsController.js 中使用以下代码行注册

app.controller("tenantsController", ["$scope", "tenantService", tenantsController]);

它也具有操作模型的方法。在我们的应用程序中，我们使用 4 种方法，我在此处包含代码

(function (app) {
    var tenantsController = function ($scope, tenantService) {
        var init = function () {
            $scope.tenant = tenantService.getTenant(0);
       };

        var index = 0;

        $scope.nextTenant = function () {
            index++;
            if (tenantService.isOverflow(index))
            {
                index--;
            }
            $scope.tenant = tenantService.getTenant(index);

        }

        $scope.previousTenant = function () {
            index--;
            if (index < 0) {
                index = 0;
            }
            $scope.tenant = tenantService.getTenant(index);
        }

        $scope.addTenant = function () {
            index--;
            if (index < 0) {
                index = 0;
            }
            $scope.tenant = tenantService.addTenant(index);
        }

        $scope.deleteTenant = function () {
         
            $scope.tenant = tenantService.deleteTenant(index);
            index--;
        }      

        init();
    };
    app.controller("tenantsController", ["$scope", "tenantService", tenantsController]);
}(angular.module("realestateApp")));

这些函数将在 UI 中可用，以连接到诸如按钮按下、按键和其他事件等事件。

Service

这些方法与模型一起通过名为 tenantService 的服务提供。此服务包含 JSON 格式的原始数据，这是一个小样本

var tenant =
                  [  
                      {
                          Id : 1,
                          FirstName: "Jose",
                          LastName: "Vowels",
                          Company: "ACME",
                          JobTitle: "Marine electronics technician",
                          BusinessPhone: "5593346999",
                          HomePhone: "5468546525",
                          MobilePhone: "8525646587",
                          FaxNumber: "9785465854",
                          Street: "600 Caisson Hill Road ",
                          City: "Smoky Hill",
                          State: "Texas",
                          Country: "USA",
                          Email: "PamelaJCallaghan@rhyta.com",
                          WebPage: "JesseAIrvine.dayrep.com",
                          Notes: " "                          
                      },

我们现在有一个工厂方法架构供控制器使用。模板代码如下所示

 var tenantService = function () {
        var tenantFactory = {};
         ......
         return tenantFactory;
};
app.factory("tenantService", tenantService);

这允许控制器像具有属性和方法的模块一样使用 tenantService。

在我们的工厂方法中，我们有控制器在我们的应用程序中使用的函数，我在此处包含代码

var tenantService = function () {
        var tenantFactory = {};

        tenantFactory.getTenant = function (index) {
            var returnTenant = [];
            if (tenantFactory.isOverflow(index))
            {
                index = 0;
            }
            returnTenant.push(tenant[index]);
            return returnTenant;
        };

        tenantFactory.isOverflow = function (index){

            return (tenant.length <= index)
        };

        tenantFactory.addTenant = function (index) {
            var returnTenant = [];
            var newIndex = tenant.length + 1;
            tenant.push(tenantFactory.newItem(newIndex));
            returnTenant.push(tenant[tenant.length -1]);
            return (returnTenant)
        };

         tenantFactory.deleteTenant = function (index) {
            var returnTenant = [];

            tenant.splice(index,1);
           if (tenant.length <= index)
           {
               index = tenant.length -1;
           }
            returnTenant.push(tenant[index]);
            return (returnTenant)
        };

        tenantFactory.newItem = function (index) {

            var newItem = {

                Id: index,
                FirstName: "",
                LastName: "",
                Company: "",
                JobTitle: "",
                BusinessPhone: "",
                HomePhone: "",
                MobilePhone: "",
                FaxNumber: "",
                Street: "",
                City: "",
                State: "",
                Country: "",
                Email: "",
                WebPage: "",
                Notes: ""
            }
            return newItem;
        }

        return tenantFactory;
    };

组合在一起时，HTML 页面、控制器、服务和模块文件协同工作，可以在 Web 上启动一个可工作的应用程序，而无需繁重的 DOM 操作和意大利面条式代码。

我们创建了关注点分离，可以单独测试并编写可维护且组织良好的代码。

我希望你喜欢这个应用程序指南，并欣赏 AngularJS 及其出色的功能。将来，我将发布更多关于表单验证、多个视图和客户端服务器交互的文章。

历史

  • 版本 1 5-15-2015
© . All rights reserved.