探秘AngularJS CRUD应用实例-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00063/article/details/138600974

探秘AngularJS CRUD应用实例

构建状态

项目简介

这个开源项目是一个基于AngularJS的CRUD（创建、读取、更新和删除）应用程序示范。它旨在展示如何在AngularJS环境中编写一个非简单的项目管理工具，特别针对采用SCRUM方法论的团队。代码中融入了最佳实践，包括文件结构、模块化、测试、与REST后端交互、导航组织以及安全方面的考虑（如身份验证和授权）。

项目源码源自一本深入讲解AngularJS开发的书籍，书中详细解读了这些模式和技术的运用：

我们在AngularJS的使用和支持过程中积累了许多经验，并希望通过此项目分享给大家。

技术栈

项目采用了以下技术栈：

存储：MongoDB，托管在MongoLab上
后端：Node.js
客户端：强大的AngularJS
样式：基于Twitter的Bootstrap

构建系统

这是一个完整的项目，其构建系统专为AngularJS应用设计，并紧密集成了一系列社区广泛使用的工具：

使用Grunt.js驱动
测试语言：Jasmine语法
使用Karma Test Runner（与Grunt.js构建集成）执行测试
包含JavaScript、CSS和AngularJS模板的最小化构建
Twitter's Bootstrap，带LESS模板处理，集成到构建过程
集成Travis-CI进行持续集成

安装步骤

平台与工具

你需要安装Node.js以及一些开发工具。Node.js自带包管理器npm可以用来安装NodeJS应用程序和库。

安装Node.js（需Node.js版本>=0.8.4）
全局安装Grunt-CLI和Karma作为npm模块：

npm install -g grunt-cli karma

（可能需要先卸载全局的grunt 0.3）

获取代码

从GitHub克隆项目或直接fork：

git clone https://github.com/angular-app/angular-app.git
cd angular-app

应用服务器

我们的后端应用服务器是一个Node.js应用，依赖一些第三方npm包。

cd server
npm install
cd ..

（这将安装server/package.json文件声明的依赖包）

客户端应用

我们的客户端应用是一个纯HTML/JavaScript应用，但我们的开发流程使用了一个基于Node.js的构建工具Grunt.js。Grunt同样依赖一些通过npm安装的第三方库。

cd client
npm install
cd ..

（这将安装client/package.json文件声明的依赖包）

构建

配置服务器

服务器的数据存储在MongoLab数据库中。

在MongoLab注册账号并创建数据库：[https://mongolab.com/signup/]
获取API密钥：[https://mongolab.com/user?username=YOUR_USERNAME_HERE]
编辑server/config.js，设置你的MongoLab API密钥和创建的数据库名称。

mongo: {
    dbUrl: 'https://api.mongolab.com/api/1',    // The base url of the MongoLab DB server
    apiKey: 'YOUR_API_KEY_HERE',                // Our MongoLab API key
},
security: {
    dbName: 'YOUR_DB_NAME_HERE',                // The name of database that contains the security information
    usersCollection: 'users'                    // The name of the collection contains user information
},

可选地，在server/lib/initDB.js中改变默认管理员用户（默认是'Admin'（admin@abc.com : changeme））。

var initDB = {
  adminUser: { email: 'admin@abc.com', password: 'changeme', admin: true, firstName: 'Admin', lastName: 'User' },
};
// 注意用户的密码等信息会以明文形式存储在MongoLab数据库中。

运行初始化脚本，用以初始化数据库，并添加第一个管理员用户（admin@abc.com : changeme）。

node server/initDB.js

配置客户端

客户端指定MongoDB的名称是在client/src/app/app.js中的。如果你的数据库不是名为"ascrum"，那么你需要修改MONGOLAB_CONFIG常量：

angular.module('app').constant('MONGOLAB_CONFIG', {
  baseUrl: '/databases/',
  dbName: 'ascrum'
});

构建客户端应用

应用由许多JavaScript、CSS和HTML文件组成，需要合并为可部署的最终版本。我们使用Grunt构建工具来完成这一任务。

构建客户端应用：

cd client
grunt build
cd ..

（如果配置了客户端，请重新构建一次）

运行

启动服务器

运行服务器

cd server
node server.js
cd ..

访问应用：[http://localhost:3000]
使用在server/lib/initDB.js中定义的管理员用户登录（默认是admin@abc.com : changeme）。

浏览器支持

我们主要在Chrome 29上进行测试，偶尔也会对Firefox和Internet Explorer进行测试。该应用应在AngularJS框架所支持的大多数现代浏览器上运行。当然，如果你基于该项目构建自己的应用，应该确保自己在需要支持的浏览器上做充分的测试。

开发

文件夹结构

在顶级目录，仓库分为一个客户端文件夹和一个服务器文件夹。客户端文件夹包含了所有前端AngularJS应用。服务器文件夹则包含了一个基于Express的基本Web服务器，用于交付和支持应用。在客户端文件夹中，有以下结构：

node_modules 包含了Grunt构建任务和其他用户安装的Node包
dist 包含构建结果
src 包含应用源代码
test 包含测试源代码、配置和依赖
vendor 包含应用的外部依赖

默认构建

Grunt的默认任务会检查JavaScript（Lint）、运行单元测试（test:unit）并构建可分发文件。运行所有单元测试：grunt（Windows环境下使用grunt.cmd）。测试由karma运行，需要至少一个浏览器连接以运行测试。

cd client
grunt
打开一个或多个浏览器并指向[http://localhost:8080/__test/]。一旦浏览器连接，测试就会运行并且构建会完成。
如果浏览器保持在该URL，未来的grunt运行将会自动在这些浏览器上运行测试。

持续构建

观察Grunt任务会在源文件发生改动时自动运行默认构建任务：grunt watch。

不带测试的构建

如果你不需要运行测试，只是想生成文件——不建议这样做——你可以简单地运行构建任务：grunt build。

构建发布代码

要构建一个已压缩的发布版应用，同时运行“端到端”（e2e）测试，需要启动服务器并且打开一个或多个浏览器来进行测试。（e2e测试需要服务器开启，而且也需要浏览器打开，以便运行测试。可以用与单元测试相同的浏览器）

cd client
运行grunt release
打开一个或多个浏览器并指向[http://localhost:8080/__test/]。一旦浏览器连接，测试就会运行并且构建会完成。
如果浏览器保持在该URL，未来的grunt运行将会自动在这些浏览器上运行测试。

持续测试

你可以让Grunt（karma）持续监控文件变化并在每次变动时自动运行所有测试，无需重新构建分布文件。这对于测试驱动开发尤其有用，因为在这种情况下，你不需要实际运行应用本身。

cd client
运行grunt test-watch。
打开一个或多个浏览器并指向[http://localhost:8080/_test]。
每次文件更改，都会在每个浏览器上运行测试。

项目特点

清晰的代码结构：应用遵循最佳实践，将文件结构、模块化和测试有机整合。
强大的构建系统：采用Grunt.js和Karma进行自动化构建和测试，提高开发效率。
全面的技术栈：涵盖了从数据库到前端框架，再到服务器端的完整技术解决方案。
集成测试：除了单元测试，还提供了端到端测试，确保整个应用的功能完整性。
详尽的文档：项目不仅提供源码，还包括一本配套书籍，深入解释代码背后的设计理念和技术。

无论你是AngularJS新手，还是寻求提升的开发者，这个项目都能为你带来宝贵的学习资源和实践经验。立即加入，探索更多可能性吧！