20160419-搭建一个PC版本的 ng-redux 项目 1 （引入开源库）

Author: p2227

article/20160419-搭建一个PC版本的 ng-redux 项目 1 （引入开源库）.md

@@ -0,0 +1,49 @@
+# 搭建一个PC版本的 ng-redux 项目 1 （引入开源库）
+
+## 背景
+redux在建立的时候，就把项目定位于不仅仅服务于react。最近因为项目实际的需要，搭建了angular与redux结合的项目。类似于react全家桶，要想把ng与redux结合起来，也需要好几个库或者框架。基本联系如下图。也用了webpack打包与babel转码器。
+
+![](image)
+
+
+## angular
+由于浏览器版本问题(产品定位是IE7及IE8)，暂时不考虑react及高版本的ng，定位了1.0.8版本的ng。以此为基准考虑其他框架。为了方便切换版本，npm安装的是1.4.x,而另外手工准备一份旧的，需要的时候直接打包进vendor.js中。
+
+## ui-router
+在引入这个库时，并没有多大问题，因为这是一个典型的ng生态ui解决方案，**看源码**可以知道是里面的angular是全局变量，要与webpack结合，推荐用webpack官方的`imports-loader`载入。
+
+## redux-ui-router
+利用官网的利用和ng 1.4.x 的时候都好好的，但是一切换到1.0.8，就会提示
+ `WARNING: Tried to load angular more than once.` 和报错 `Uncaught TypeError: window.angular.$$csp is not a function` 一开始的时候，并我没有理会waring，而直接去找错误，一般会认为`$$csp`是一个新版本才有的功能。但是实际上并不是，1.0.8也有。于是我把目光转向warning，但是那句warning即使google找到的答案也是千奇百怪的。  
+ 经过自己冷静思考和逐步排查分析之后，终于发现是这样的。由于`redux-ui-router`要求ng版本为1.4.x (peerDependencies) ，但是我并不是那个版本，所以我的ng并不是直接在npm上拿下来的包，而是手工放进去了。但是npm还是会把1.4.x版本的ng拿到node_modules里面去，这样，当 redux-ui-router 中运行 `require('angular')`的时候，拿的是1.4.x版本的ng，同时我全局引入1.0.8的ng，两个就冲突了。 
+ 
+ 于是我新建了一个入口文件，直接引用redux-ui-router下面的一些功能，把`require('angular')`避开了。成功解决了这个问题。
+
+## ng-redux
+除了上面重复引入ng的问题，使用ng-redux的时候，还有另外一个问题。 
+
+官方的例子是利用`controllerAs`语法的，在高版本的ng下跑是没有问题的，但一切换到目标版本就会有问题。大招**看源码**有点费时间，在此之前我们可以先尝试**看测试用例**
+
+https://github.com/wbuchwalter/ng-redux/blob/master/test/components/connector.spec.js#L38
+
+```javascript
+  it('Should extend target (Object) with selected state once directly after creation', () => {
+     connect(
+      () => ({
+        vm: { test: 1 }
+      }))(targetObj);
+
+    expect(targetObj.vm).toEqual({ test: 1 });
+  });
+```
+
+由于之前一直在用过`react-redux`，connect是redux数据中心发生变化之后调用的函数，通知视图要改变，我们看到ng-redux在此要做的事情是在targetObj中修改一些属性。再结合以前用ng时候的情况，
+修改 `$scope`的属性就可以引起视图的改变。于是我把官网绑定在controller的例子改成绑定在`$scope`上。于是在controller中就这样写
+```
+const unsubscribe = $ngRedux.connect(state=> {
+    //some code
+    })($scope);
+```
+
+##  
+于是，我就把这三个库引入到项目中，从1.4.x版本的ng迁移到了1.0.8版本的ng。