Start开发中遇到的问题及解决办法

## AngularJS相关问题
### ng-repeat中的ng-model

**问题描述**：

实现一个通用表单，表单中的元素类型固定，但数量和名称不固定。由于数量和名称不固定，所以不能逐一写出表单元素，只能采用ng-repeat产生元素。代码如下。

``` javascript
$scope.fields = ['author', 'content', 'time'];
```

``` html
<div ng-repeat="field in fields">
    <label>{{field}}</label>
    <input ng-model="field">
</div>
```

很显然，这样会出现一个绑定问题，具体参见 [don't bind to primitives](https://github.com/angular/angular.js/issues/1267)

**解决方案**：

``` javascript
$scope.fields = [
    {name: 'author', model: ''}, 
    {name: 'content', model: ''}, 
    {name: 'time', model: ''}, 
];
```

``` html
<div ng-repeat="field in fields">
    <label>{{field.name}}</label>
    <input ng-model="field.model">
</div>
```

``` javascript
var postData = {};
for(var i = 0; i < fields.length; i++){
    postData[fields[i].name] = fields[i].model;
}
```

`postData` 即是构造好的可以提交的表单对象。

参考：[http://stackoverflow.com/questions/13714884/difficulty-with-ng-model-ng-repeat-and-inputs](http://stackoverflow.com/a/13715352)
### AngularJS get resource from different port

**问题描述**：

一个只有前端的 Web 应用，在 Service 层访问运行在另一个端口的 Server 提供 RESTful API 。代码如下。

``` javascript
factory('AppDataService', function($resource) {
    var urlPrefix = 'http://localhost:3333/';
    return $resource(urlPrefix + 'api/:path', {}, {
        list: {
            method: 'GET',
            params: {
                path: 'list'
            },
            isArray: true
        }
    })
})
```

然而，这样会导致端口号被截掉，因为 Angular 会将冒号后的内容作为一个参数，具体参见 [$resource strips port from url](https://github.com/angular/angular.js/issues/1243)

**解决方案**：

可以在端口号的冒号前使用双反斜线来解决这个问题

``` javascript
var urlPrefix = 'http://localhost\\:3333/';
```

参考：[http://stackoverflow.com/questions/19909611/why-the-port-number-is-cut-when-angular-app-call-rest-service](http://stackoverflow.com/a/19909809)
### 跨域请求资源（HTTP 访问控制）

**问题描述**：

同上一个问题，一个只有前端的 Web 应用，在 Service 层访问运行在另一个端口的 Server 提供 API 。由于 [跨域](http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html)（不同端口），出于安全考虑，浏览器会对脚本中发起的请求进行限制。

**解决方案**：

可以使用跨域资源共享（Cross-Origin Resource Sharing (CORS)）来解决这个问题，详细可见 [HTTP访问控制](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS) 。

提供 API 的 Server 是使用 NodeJS 和 Express 搭建，通过如下代码可以实现其他域对该服务器资源的请求。

``` javascript
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 
        'OPTIONS,GET,POST,PUT,DELETE');
    res.header("Access-Control-Allow-Headers", 
        "Content-Type, Authorization, X-Requested-With");
    if ('OPTIONS' == req.method){
        return res.send(200);
    }
    next();
});
```

参考：[http://stackoverflow.com/questions/20754489/access-control-allow-origin-and-angular-js-http](http://stackoverflow.com/q/20754489)
### 使用 angular.module().controller() 创建 Controller

**问题描述**：

``` javascript
angular.module('App.controllers', [])
    .controller('LoginCtrl', function () {
        $scope.property = true;
    });

angular.module('App', ['App.controllers'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'partials/login.html',
            controller: LoginCtrl
        });
    }]);
```

这样做会产生如下错误

``` javascript
Uncaught ReferenceError: LoginCtrl is not defined from App
```

**解决方案**：

直接使用 `LoginCtrl`，会被当成变量，而这个变量并不存在，因此报错。加引号改为 `String` 即可

``` javascript
$routeProvider.when('/', {
    templateUrl: 'partials/login.html',
    controller: 'LoginCtrl'
});
```
### 使用 $resource 与 RESTful 数据源交互

**问题描述**：

``` javascript
angular.module('App.services', []).
    factory('myservice', function ($resource) {
        ...
    }
```

这样做会产生如下错误

``` javascript
Error: Unknown provider: $resourceProvider <- $resource <- myservice
```

**解决方案**：

由于 `$resource` 并不是 AngularJS Core 的一部分，因此需要引入 `angular-resource.js` 文件，并载入 `ngResource` 模块。

``` javascript
angular.module('App.services', ['ngResource'])
```

在使用 `ngCookie` 等其他非 AngularJS Core 的模块时，如果报以上错误，也可使用同样方法解决。
### 在Controller 中引用 Angular Module Constants

**问题描述**：

使用一个 `myApp.config` 模块定义 app 的配置信息，代码放在 `config.js` 中

``` javascript
angular.module('myApp.config', [])
    .constant('APP_ID','54d32639da5b64d891fe283a')
```

在 `app.js` 中引入 `myApp.config` 模块

``` javascript
angular.module('myApp', ['myApp.controllers','myApp.config'])
```

在 `index.html` 中引入 `config.js` 文件 ，然后在 Controller 中使用 constant

``` javascript
angular.module('myApp.controllers', [])
    .controller('ListCtrl', ['$scope', 'myApp.config',
        function ($scope, config) {
            $scope.APP_ID = config;
        }])
```

这样做会产生如下错误

``` javascript
Unknown provider: myApp.configProvider <- myApp.config
```

**解决方案**：

直接注入常量名字

``` javascript
angular.module('myApp.controllers', [])
    .controller('ListCtrl', ['$scope', 'APP_ID',
        function ($scope, APP_ID) {
            $scope.APP_ID = APP_ID;
        }])
```
### $cookieStore 的使用

**问题描述**：

使用 $cookieStore 维护浏览器端用户登录信息，并进行相应跳转

**解决方案**：

在 `index.html` 中引入 `angular-cookies.js` 文件，并载入 `ngCookies` 模块

``` javascript
angular.module('myApp', ['ngCookies', 'myApp.controllers'])
```

将 `$cookieStore` 注入到 Controller 中

``` javascript
.controller('LoginCtrl', ['$scope', '$location', '$cookieStore', 
    function ($scope, $location, $cookieStore) {
        ...
    }
])
```

使用 `$cookieStore` ，在登录成功后

``` javascript
$cookieStore.put('username', $scope.user.username);
$location.path('/list');
```

在退出登录后

``` javascript
$cookieStore.remove('username');
```

在其他页面

``` javascript
if (!$cookieStore.get('username')) {
    $location.path('/login')
}
```
### 使用GET方法请求资源时附带参数（req.query和req.params区别）

**问题描述**：

获取某一用户（author 为 jason）发布的所有状态。

**解决方案**：

在 Server 端定义拦截

``` javascript
app.get('/api/:schemaName/list', httpAPI.list);
```

在 Service 定义方法

``` javascript
factory('AppDataService', function($resource) {
    var urlPrefix = 'http://localhost:3333/';
    return $resource(urlPrefix + 'api/:path1/:path2', {}, {
        list: {
            method: 'GET',
            params: {
                path1: '',
                path2: 'list'
            },
            isArray: true
        }
    })
})
```

在 Controller 中调用

``` javascript
AppDataService.list({path1: 'wbs', author: 'jason'}, function (wbs) {
    $scope.wbs = wbs;
})
```

调用时对象中的键 `list({path1: 'wbs', author: 'jason'})` 会与参数名 `params: {path1: '', path2: 'list'}` 进行匹配，如果传入了一个没有在 URL 中设置过的参数 `{author: 'jason'}` ，那它会以普通的查询字符串的形式被发送，因此，将会产生一个这样的请求 url

``` javascript
Name: /list?author=jason
Path: /api/wbs/list
```

在 Server 端获取参数，`req.query` 经过解析后返回 `{author: "jason"}` 对象，`req.params` 返回与 route 拦截匹配的参数，即 `req.params.schemaName` 可得到 `'wbs'` 。

参考：[Request.query and Request.param in ExpressJS](http://stackoverflow.com/a/18524191)
### Controller 中参数的压缩

**问题描述**：

由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果要压缩Controller的代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。

``` javascript
.controller('LoginCtrl', function ($scope, $location, $cookieStore) {
        ...
    }
)
```

**解决方案**：

第一种方法，把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法函数

``` javascript
.controller('LoginCtrl', ['$scope', '$location', '$cookieStore', 
    function ($scope, $location, $cookieStore) {
        ...
    }
])
```

第二种方法，在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组

``` javascript
LoginCtrl.$inject = ['$scope', '$location', '$cookieStore'];
```

参考：[XHR和依赖注入 ](http://angularjs.cn/A008)
## Mongoose相关问题
### Mongoose在创建Model时对Collection的命名

**问题描述**：

通过Mongoose操作MongoDB，创建一个user模型，在数据库生成的集合名为users

**解决方案**：

使用Mongoose从创建连接到向数据库写入一条数据经历了以下步骤

``` javascript
// 创建数据库（相当于在使用Hibernate的时候配置数据库）
mongoose.connect("mongodb://localhost/test");
// 定义UserSchema（相当于数据库建表）
var UserSchema = mongoose.Schema({
    username: String,
    password: String
});
// 创建User模型（相当于构建对象和数据库表映射）
var User = mongoose.model("user", UserSchema);
// 通过User模型，创建对象
var user = new User({
    username: 'admin',
    password: 'admin'
});
// 通过save方法持久化对象
user.save(function (err, doc) {
    if(err || !doc) {
        return false;
    } 
    return true;
});
```

向 MongoDB 中一个不存在的 collection 插入文档，数据库会自动创建一个 Collection ，然而为什么创建 user 模型会生成 users 集合？通过分析 Mongoose 源码可以发现，Mongoose 在模型名到数据库集合名的转换上，做了特殊处理，即使用名词复数形式。

可以通过两种办法解决此问题（即保持模型名和集合名的一致）：
- 准确使用名词复数对模型命名
- 注释掉 Mongoose 中名词变复数部分代码

参考：[Mongoose在创建Model时对Collection的命名策略](http://aiilive.blog.51cto.com/1925756/1405203)
### Mongoose __v 属性

**问题描述**：

使用 Mongoose，在 `save()` 持久化对象时，会出现一个 `__v` 字段

``` javascript
var user = new User({
    username: "admin",
    password: 'admin'
});
user.save() // { __v: 0, username: 'admin', password: 'admin' }
```

**解决方案**：

`__v` 是默认的 `versionKey` ，在通过 Mongoose 第一次创建一个 document 时产生。可以通过设置 `versionKey` 为 `false` 使其不可用。

``` javascript
new mongoose.Schema({..}, { versionKey: false });
var user = new User({
    username: "admin",
    password: 'admin'
});
user.save() // {username: 'admin', password: 'admin' }
```

参考：[Mongoose __v property - hide](http://stackoverflow.com/questions/13699784/mongoose-v-property-hide)
### 使用 Mongoose 做高级查询

**问题描述**：

从一个消息 Collection 中查询两个好友（aa和bb）之间的聊天记录

**解决方案**：

``` javascript
var options = {
    $or: [
        {
            "from": "aa",
            "to": "bb"
        },
        {
            "from": "bb",
            "to": "aa"
        }
    ]
}
db.find(options);
```

参考：[How do you do more advance queries with Mongoose?](http://stackoverflow.com/questions/8017989/how-do-you-do-more-advance-queries-with-mongoose-specifically-a-query-using-or)
[http://docs.mongodb.org/manual/reference/operator/query/or/](http://docs.mongodb.org/manual/reference/operator/query/or/)
## NodeJS 相关问题
### 全局地使用 EventEmitter

**问题描述**：

在多个地方（不同文件）使用同一个 EventEmitter 对象

**解决方案**：

在单个文件中，EventEmitter 的使用

``` javascript
var events = require("events");
var emitter = new events.EventEmitter();
emitter.on('ready', function(){
    console.log('Ready? Go!');
})
setTimeout(function(){
    emitter.emit('ready');
},1000)
```

在多个地方使用同一个 EventEmitter，可以使用 `module.exports`
在 `pubsub.js` 文件中定义模块

``` javascript
var EventEmitter = require('events').EventEmitter;
module.exports = new EventEmitter();
```

在 `a.js` 文件中使用

``` javascript
var pubsub = require('./pubsub');
pubsub.on('ready', function() {
  console.log('Ready? Go!');
});
```

在 `b.js` 文件中使用

``` javascript
var pubsub = require('./pubsub');
pubsub.emit('ready', function() {
  console.log('ready');
});
```

参考：[http://nodejs.org/api/modules.html#modules_module_exports](http://nodejs.org/api/modules.html#modules_module_exports)
[http://stackoverflow.com/questions/17177735/nodejs-use-eventemitter-object-globally](http://stackoverflow.com/questions/17177735/nodejs-use-eventemitter-object-globally)
[http://sunspot.blog.51cto.com/372554/1266428](http://sunspot.blog.51cto.com/372554/1266428)
### 在Node中用Q实现Promise

**问题描述**：

在调用增删改查接口前，需要先获取该 Collection 的 Model，获取 Model 之前，需要从 schemas 集合获取该 Model 的 Schema，而前面这两个操作都是异步的。

**解决方案**：

可以使用 promise 。

> promise是对异步编程的一种抽象。它是一个代理对象，代表一个必须进行异步处理的函数返回的值或抛出的异常。 – Kris Kowal on JSJ

promise 对象的核心部件是它的 then 方法，它是对 promise 解包以得到异步操作结果（或异常）的函数，用这个方法从异步操作中得到返回值（履约值），或抛出的异常（拒绝的理由）。then 方法有两个可选的参数，都是 callback 函数。

Node中可以使用 Q （`npm install q`） 来将 callback 变成 promise

``` javascript
var Q = require('q');
function getSchema(dbName, schemaName){
    var deferred = Q.defer();
    Db.find({'name': schemaName}, 'value', function(error, schema) {
        if(error){
            // rejects the promise with `error` as the reason
            deferred.reject(error)
        }else{
            // fulfills the promise with `data` as the value
            deferred.resolve(schema);
        }
    });
    return deferred.promise;
}
function getModel(dbName, shemaName){
    var deferred = Q.defer();
    // the first callback is onFulfilled, the seconde is onRejected
    getSchema(dbName, schemaName).then(function(schemaObj){
        if(!!schemaObj){
            DbSchema = new mongoose.Schema(schemaObj);
            var indb = mongo.model(schemaName, DbSchema);
            deferred.resolve(indb);
        }else{
            deferred.resolve(null);
        }
    }, function(err){
        console.error(err);
        deferred.reject(err);
    });
    return deferred.promise;
}
```

参考：[在Node.js 中用 Q 实现Promise – Callbacks之外的另一种选择](http://www.ituring.com.cn/article/54547)
### 使用 Forever 运行 Node 应用

**问题描述**：

在 node 进程因为内部错误挂掉时需要重启 node server ，在服务器端文件变更时，需要重启 node server

**解决方案**：

可以安装 forever 模块，使用 forever 运行 node 应用。

forever 是一个 nodejs 守护进程，能够启动，停止，重启 app 应用。forever 完全基于命令行操作，在 forever 进程之下，创建 node 的子进程，通过 monitor 监控 node 子进程的运行情况，一旦文件更新，或者进程挂掉，forever 会自动重启 node 服务器，确保应用正常运行。

安装

``` javascript
// forever要求安装到全局环境
npm install forever -g
```

启动

``` javascript
// -p指定根目录，-l指定输出日志，-e指定错误日志，-a表示日志使用追加模式
forever -p . -l access.log -e error.log -a start app.js
```

停止

``` javascript
// 停止所有运行的node App
forever stopall
// 停止其中一个node App
forever stop app.js
```

此外，也可以 [使用nodemon让node自动重启 ](http://blog.csdn.net/godha/article/details/17300293)

参考：[Nodejs服务器管理模块forever](http://blog.fens.me/nodejs-server-forever/)
[使用forever运行nodejs应用](http://yansong.me/2013/02/27/use-forever-run-a-node-app-created-by-express.html)


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Start开发中遇到的问题及解决办法 #2

AngularJS相关问题

ng-repeat中的ng-model

AngularJS get resource from different port

跨域请求资源（HTTP 访问控制）

使用 angular.module().controller() 创建 Controller

使用 $resource 与 RESTful 数据源交互

在Controller 中引用 Angular Module Constants

$cookieStore 的使用

使用GET方法请求资源时附带参数（req.query和req.params区别）

Controller 中参数的压缩

Mongoose相关问题

Mongoose在创建Model时对Collection的命名

Mongoose __v 属性

使用 Mongoose 做高级查询

NodeJS 相关问题

全局地使用 EventEmitter

在Node中用Q实现Promise

使用 Forever 运行 Node 应用

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Start开发中遇到的问题及解决办法 #2

Description

AngularJS相关问题

ng-repeat中的ng-model

AngularJS get resource from different port

跨域请求资源（HTTP 访问控制）

使用 angular.module().controller() 创建 Controller

使用 $resource 与 RESTful 数据源交互

在Controller 中引用 Angular Module Constants

$cookieStore 的使用

使用GET方法请求资源时附带参数（req.query和req.params区别）

Controller 中参数的压缩

Mongoose相关问题

Mongoose在创建Model时对Collection的命名

Mongoose __v 属性

使用 Mongoose 做高级查询

NodeJS 相关问题

全局地使用 EventEmitter

在Node中用Q实现Promise

使用 Forever 运行 Node 应用

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions