Home Web Front-end JS Tutorial Address book based on Amap location developed by AngularJS Node.js MongoDB_node.js

Address book based on Amap location developed by AngularJS Node.js MongoDB_node.js

May 16, 2016 pm 04:22 PM
angularjs mongodb node.js

1. Chatting

One day the monitor said that the students wanted me to develop an address book that could share locations, so I simply designed the function myself. Including user roles, posting Weibo, sharing location, etc. This time it was also a bit selfish. In order to practice the angularjs I had recently watched, I decisively chose the Node.js MongoDB angular.js solution. Of course, my experience in developing Node.js is getting deeper and deeper. I remember, last year my leader told me to try to make each node service only support one business function, so that it can be more convenient to maintain. At that time, I particularly wanted to make a Node service particularly powerful. Now it seems that leader’s approach is right. I am more inclined to simplify the node service function...

2. Go directly to the dry goods

The database service is deployed on Alibaba Cloud; the static file server uses Github page.

Github project address: https://github.com/vczero/OurTimes

Online experience address: http://vczero.github.io/tuban/main.html#/

I don’t have a picture to talk about a ball. I’ll show you 2 screenshots above:

(1)Homepage

(2) Address Book

....More experience online...

3. Project

Total project: https://github.com/vczero/OurTimes

Developed the required services: https://github.com/vczero/OurTimes/tree/master/server

Opened web pc client: https://github.com/vczero/OurTimes/tree/master/client-web

Developed a simple backend management system: https://github.com/vczero/OurTimes/tree/master/client-admin

Welcome to fork, follow and share the code, and work together to build the front end.

4. Attached is the entry file code for Angular on the web-pc side

Copy code The code is as follows:

var app = angular.module('app', ['ui.router', 'ngCookies']);
var SERVER_BASE_URL = 'http://127.0.0.1:3000/';
//Initialization configuration
app.run(['$rootScope', function($rootScope) {
$rootScope.appName = 'Tuban.com';
$rootScope.desc = 'Location-based address book';
$rootScope.author = 'Ghost Ballad';
$rootScope._email = 'wlhmyit@126.com';
}]);

//调用的服务列表
app.constant('ServiceConfig', {
    wei_content: SERVER_BASE_URL 'wei/get',
    wei_zan: SERVER_BASE_URL 'wei/zan',
    wei_comment: SERVER_BASE_URL 'wei/comment',
    wei_create: SERVER_BASE_URL 'wei/create',
    user_get: SERVER_BASE_URL 'user/get',
    user_login: SERVER_BASE_URL 'user/login',
    user_register: SERVER_BASE_URL 'user/register',
    user_common: SERVER_BASE_URL 'user/getCommon',
    user_ben: SERVER_BASE_URL 'user/getBen',
    user_self: SERVER_BASE_URL 'user/getSelf',
    user_common_update: SERVER_BASE_URL 'user/updateCommon',
    user_ben_update: SERVER_BASE_URL 'user/updateBen',
    user_ben_get_name: SERVER_BASE_URL 'user/singleBen/name',
    user_common_get_nickname: SERVER_BASE_URL 'user/getCommon/name',
    user_ben_get_realname: SERVER_BASE_URL 'user/singleBen/name',
    wei_get_token_page: SERVER_BASE_URL 'wei/getByToken',
    wei_delete: SERVER_BASE_URL 'wei/delete',
    user_update_password: SERVER_BASE_URL 'user/updatePassword',
    article_get: SERVER_BASE_URL 'article/get',
    article_detail: SERVER_BASE_URL 'article/get/id',
    amap_url: 'http://webapi.amap.com/maps?v=1.3&key=ad925c5003760094713775d64748d872&callback=init'
});
//JSON parse
app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    $httpProvider.defaults.transformRequest = [function(data) {
        var obj = [];
        for (var key in data) {
            obj.push(key '=' data[key]);
        }
        return obj.join('&');
    }];
}]);
//路由配置
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
    /*URL路由*/
    $urlRouterProvider.otherwise("/");
    /*状态配置*/
    $stateProvider
    //首页
    .state('index', {
        url: '/',
        views: {
            '': {
                templateUrl: 'views/index/index.html',
            },
            'header@index': {
                templateUrl: 'views/header.html',
                controller: 'HeaderController'
            },
            'footer@index': {
                templateUrl: 'views/footer.html',
                controller: ''
            },
            'weibo@index': {
                templateUrl: 'views/index/weibo.html',
                controller: 'WeiboController'
            },
            'article@index': {
                templateUrl: 'views/index/article.html',
                controller: 'ArticleController'
            },
            'post@index': {
                templateUrl: 'views/index/post.html',
                controller: 'PostWeiboController'
            }
        }
    })
    .state('login', {
        url: '/login',
        views: {
            '': {
                templateUrl: 'views/login/login.html',
                controller: 'LoginController'
            }
        }
    })
    .state('register', {
        url: '/register',
        views: {
            '': {
                templateUrl: 'views/register/register.html',
                controller: 'RegisterController'
            }
        }
    })
    .state('contacts', {
        url: '/contacts',
        views: {
            '': {
                templateUrl: 'views/contacts/contacts.html',
                controller: ''
            },
            'header@contacts': {
                templateUrl: 'views/header.html',
                controller: 'HeaderController'
            },
            'userinfo@contacts': {
                templateUrl: 'views/contacts/userinfo.html',
                controller: 'UserInfoController'
            },
            'map@contacts': {
                templateUrl: 'views/contacts/map.html',
                controller: 'MapController'
            },
            'search@contacts': {
                templateUrl: 'views/contacts/search.html',
                controller: 'SearchUserController'
            }
        }
    })
    .state('ucenter', {
        url: '/ucenter',
        views: {
            '': {
                templateUrl: 'views/ucenter/ucenter.html',
                controller: ''
            },
            'header@ucenter': {
                templateUrl: 'views/header.html',
                controller: 'HeaderController'
            },
            'userWeibo@ucenter': {
                templateUrl: 'views/ucenter/weibo.html',
                controller: 'UcWeiboController'
            },
            'userDetailInfo@ucenter': {
                templateUrl: 'views/ucenter/user.html',
                controller: 'UcUserController'
            },
            'footer@ucenter': {
                templateUrl: 'views/footer.html',
                controller: ''
            }
        }
    })
    .state('article', {
        url: '/article/:id',
        views: {
            '': {
                templateUrl: 'views/article/article.html',
                controller: ''
            },
            'header@article': {
                templateUrl: 'views/header.html',
                controller: 'HeaderController'
            },
            'article_content@article': {
                templateUrl: 'views/article/article_content.html',
                controller: 'ArticleDetailController'
            },
            'footer@article': {
                templateUrl: 'views/footer.html',
                controller: ''
            }
        }
    })
    .state('article_index', {
        url: '/article',
        views: {
            '': {
                templateUrl: 'views/article/article.html',
                controller: ''
            },
            'header@article_index': {
                templateUrl: 'views/header.html',
                controller: 'HeaderController'
            },
            'article_content@article_index': {
                templateUrl: 'views/article/article_content.html',
                controller: 'ArticleDetailController'
            },
            'footer@article_index': {
                templateUrl: 'views/footer.html',
                controller: ''
            }
        }
    });

}]);

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1243
24
Use Composer to solve the dilemma of recommendation systems: andres-montanez/recommendations-bundle Use Composer to solve the dilemma of recommendation systems: andres-montanez/recommendations-bundle Apr 18, 2025 am 11:48 AM

When developing an e-commerce website, I encountered a difficult problem: how to provide users with personalized product recommendations. Initially, I tried some simple recommendation algorithms, but the results were not ideal, and user satisfaction was also affected. In order to improve the accuracy and efficiency of the recommendation system, I decided to adopt a more professional solution. Finally, I installed andres-montanez/recommendations-bundle through Composer, which not only solved my problem, but also greatly improved the performance of the recommendation system. You can learn composer through the following address:

How to configure MongoDB automatic expansion on Debian How to configure MongoDB automatic expansion on Debian Apr 02, 2025 am 07:36 AM

This article introduces how to configure MongoDB on Debian system to achieve automatic expansion. The main steps include setting up the MongoDB replica set and disk space monitoring. 1. MongoDB installation First, make sure that MongoDB is installed on the Debian system. Install using the following command: sudoaptupdatesudoaptinstall-ymongodb-org 2. Configuring MongoDB replica set MongoDB replica set ensures high availability and data redundancy, which is the basis for achieving automatic capacity expansion. Start MongoDB service: sudosystemctlstartmongodsudosys

How to ensure high availability of MongoDB on Debian How to ensure high availability of MongoDB on Debian Apr 02, 2025 am 07:21 AM

This article describes how to build a highly available MongoDB database on a Debian system. We will explore multiple ways to ensure data security and services continue to operate. Key strategy: ReplicaSet: ReplicaSet: Use replicasets to achieve data redundancy and automatic failover. When a master node fails, the replica set will automatically elect a new master node to ensure the continuous availability of the service. Data backup and recovery: Regularly use the mongodump command to backup the database and formulate effective recovery strategies to deal with the risk of data loss. Monitoring and Alarms: Deploy monitoring tools (such as Prometheus, Grafana) to monitor the running status of MongoDB in real time, and

Navicat's method to view MongoDB database password Navicat's method to view MongoDB database password Apr 08, 2025 pm 09:39 PM

It is impossible to view MongoDB password directly through Navicat because it is stored as hash values. How to retrieve lost passwords: 1. Reset passwords; 2. Check configuration files (may contain hash values); 3. Check codes (may hardcode passwords).

What is the CentOS MongoDB backup strategy? What is the CentOS MongoDB backup strategy? Apr 14, 2025 pm 04:51 PM

Detailed explanation of MongoDB efficient backup strategy under CentOS system This article will introduce in detail the various strategies for implementing MongoDB backup on CentOS system to ensure data security and business continuity. We will cover manual backups, timed backups, automated script backups, and backup methods in Docker container environments, and provide best practices for backup file management. Manual backup: Use the mongodump command to perform manual full backup, for example: mongodump-hlocalhost:27017-u username-p password-d database name-o/backup directory This command will export the data and metadata of the specified database to the specified backup directory.

How to choose a database for GitLab on CentOS How to choose a database for GitLab on CentOS Apr 14, 2025 pm 04:48 PM

GitLab Database Deployment Guide on CentOS System Selecting the right database is a key step in successfully deploying GitLab. GitLab is compatible with a variety of databases, including MySQL, PostgreSQL, and MongoDB. This article will explain in detail how to select and configure these databases. Database selection recommendation MySQL: a widely used relational database management system (RDBMS), with stable performance and suitable for most GitLab deployment scenarios. PostgreSQL: Powerful open source RDBMS, supports complex queries and advanced features, suitable for handling large data sets. MongoDB: Popular NoSQL database, good at handling sea

How to encrypt data in Debian MongoDB How to encrypt data in Debian MongoDB Apr 12, 2025 pm 08:03 PM

Encrypting MongoDB database on a Debian system requires following the following steps: Step 1: Install MongoDB First, make sure your Debian system has MongoDB installed. If not, please refer to the official MongoDB document for installation: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-debian/Step 2: Generate the encryption key file Create a file containing the encryption key and set the correct permissions: ddif=/dev/urandomof=/etc/mongodb-keyfilebs=512

How to set up users in mongodb How to set up users in mongodb Apr 12, 2025 am 08:51 AM

To set up a MongoDB user, follow these steps: 1. Connect to the server and create an administrator user. 2. Create a database to grant users access. 3. Use the createUser command to create a user and specify their role and database access rights. 4. Use the getUsers command to check the created user. 5. Optionally set other permissions or grant users permissions to a specific collection.

See all articles