AngularJS + Node.js + MongoDB开发的基于高德地图位置的

一、前言

在闲暇之余，我受到班长的启发，设计了一款基于高德地图位置的通讯录应用。考虑到实用性和扩展性，我决定采用当下流行的技术栈来实现，那就是AngularJS + Node.js + MongoDB的组合。这是一个有趣的挑战，同时也是一个极好的实践机会，让我能够深入体验这些技术的魅力。

二、技术选型与部署

在开发过程中，我选择了Node.js作为后端服务的主要技术。对于数据库的选择，MongoDB的灵活性和可扩展性正好符合项目需求。我利用AngularJS构建前端应用，实现了丰富的用户交互功能。为了保障数据安全，我将数据库服务部署在阿里云的服务器上，利用Github Page作为静态文件服务器。这样构建的通讯录应用既稳定又可靠。

三、项目展示与体验

我想先和大家分享的是这款应用的外观和界面设计。从首页到通讯录页面，都充满了现代感和科技感。以下是两款截图供您参考：

（1）首页截图：展示应用的主要功能和特色，如位置共享、通讯录等。

（2）通讯录截图：清晰展示联系人的位置信息，方便用户快速找到附近的朋友。

除此之外，您还可以通过线上体验地址亲自试用这款应用，感受其便捷和实用。我相信，这款基于高德地图位置的通讯录应用一定会给您带来全新的体验。

四、项目细节

在这个项目中，我不仅开发了所需的服务和web客户端，还开发了一个简易的后台管理系统。这个系统方便我们进行数据的维护和管理。我也非常欢迎大家一起来参与这个项目，共同完善和优化代码。我们可以一起构建更好的前端体验，共享代码和资源，共同推进这个项目的发展。

四、Angular的Web-PC端入口文件代码展示

核心代码片段如下：

```javascript

var app = angular.module('app', ['ui.router', 'ngCookies']);

const SERVER_BASE_URL = '

// 配置初始化

app.run(['$rootScope', function($rootScope) {

$rootScope.appName = '图班网';

$rootScope.desc = '基于位置的通讯录';

$rootScope.author = '鬼谣';

}];

// 服务配置常量

app.constant('ServiceConfig', {

// 各种服务接口的URL配置

wei_content: SERVER_BASE_URL + 'wei/get',

wei_zan: SERVER_BASE_URL + 'wei/zan',

// ...其他接口配置省略

});

// JSON配置

app.config(['$httpProvider', function($httpProvider) {

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x--form-urlencoded;charset=utf-8';

$httpProvider.defaults.headers.put['Content-Type'] = 'application/x--form-urlencoded;charset=utf-8';

$httpProvider.defaults.transformRequest = [function(data) { / 数据转换逻辑 / }]; // 数据转换逻辑省略以保持简洁性。

}]);

// 路由配置说明开始访问地址等状态映射关系

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {