接手了一个angular1.x的前端环境，以前只做过少量的前端跟vuejs开发，对大angular有点陌生。所以先从读文档与配置开发环境做起；
1.前言
读文档 你需要有一个网络终端设备（能上网的）网络搜索一下angular。。。因各人的阅读风格不同 我在此没有推荐；大量angular 相关资料让新手有点着急啊 ，有个大神曾说过 面对新的知识 第一次接触能掌握百分之二十就是有一定成果了。因此 我总评判自己读完之后是否理解了 20%；答案是肯定的，但是 很多时候就停留在 20% 没有再次学习啦。
2.配置angular开发环境
项目前端使用angular1.x+angularRoute+jquery+bootstrap等技术开发，开发时间较早，项目完成后较少有维护 所以需要自己摸索。首先是开发环境，因接触过一点 vuejs 比较喜欢vue的所见即所得的开发方式，于是决定将此angular项目配置成此开发方式；
配置开发环境自动更新的主要依赖包：
grunt（https://www.gruntjs.net/api/grunt）
grunt-contrib-connect （一个静态服务器）
grunt-contrib-watch（配置监听）
serve-index(用于创建静态文件服务器)
serve-static(用于启用目录浏览)
connect-livereload（监控你指定的目录中文件，如果有文件被更改，自动触发浏览器刷新页面）
connect-history-api-fallback（启用history）
因配置过vuejs开发环境，所以本地Mac中带有 nodejs环境和npm工具等，所以直接download了项目 直接 进入项目目录下 npm install 了pachage.json中的依赖包，项目中自带了 grunt工具。因此 配置开发环境使用的包都是基于grunt的；
安装完 angular 和angular-route等项目依赖之后就要进行 所见即所得环境的开发环境配置了，自动搭建静态文件服务器，不需在自己电脑上搭建Web服务器 也不需要浏览器插件：
1）首先将上述依赖包 npm 安装；
执行命令：npm install --save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload serve-index serve-static connect-history-api-fallback
2）修改Gruntfile.js文件：
配置定义中间件
配置grunt initConfig
注册任务
然后运行 grunt live 启动任务，如果没有报错配置就完成了；
。
。
。
然而并不是
3.遇到的问题
配置此开发环境的时候遇到问题有：CSP、404、livereload错误、403、CORS、502（后端问题）等
CSP：
grunt live后总报Content-Security-Policy 错误，网上找了很多解决办法，很多建议在 入口文件 一般为index.html中的head中加入meta标签类似于
<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; img-src https://*; child-src 'none';">
但是并没有什么用，显然我的问题不在这里。经过不断查找终于 在自己的 Chrome中安装了一个 disable CSP的插件，并开启此插件 问题就解决了， oh-my-god
livereload报错
经过检查端口发现livereload的端口并未启动，导致报错 直接手动 grunt watch 启动了就好了，然而发现的过程是漫长的
403
这个多半是权限问题，找了运维同事协助就解决了。
CORS
这个还是蛮高大上的，就是跨域 ；跨域真是个老问题 在vue中 直接配置一下Dev启动 就可以解决了，但是在angular中如何解决呢，首先我没有angular-cli 后端的NGINX配置也没有成功 不知道为何；并且发现前端代码已经存在了$httpProvider.defaults.useXDomain =true; 为什么还是会出现呢
很久很久以后我看到一篇关于Chrome跨域的文章，并且执行如下操作
1) 新建一个文件夹 /tmp/mychrome
2) 在终端执行
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/tmp/mychrome
弹出对话框选择启用不安全模式，我就不截图了
后来在运行 grunt live的时候终于没有 跨域了，我也是热泪盈眶。虽然关闭浏览器在打开的时候又不是 非安全模式了，但是我回果断选择不关闭浏览器；
404
这是我想说的重点，404 很神奇 一个运行 grunt live 自动打开 浏览器 更改代码后自动刷新就404的问题；我发现代码中已经启用了所谓的$locationProvider.html5Mode(true); 和在index.html中已经存在了<base href="/"> 并发现自己的问题是livereload自动重载后查不到路由的问题，并不是大部分的那种去掉锚点问题；
于是我重新定位问题，终于发现了connect-history-api-fallback；安装之后 并在中间件中添加，就不会出现刷新找不到路径了；此问题的原因大致在于 重新刷新是angular无法定位自己的管理路由问题；
502
这个是后台接口问题，跟前端没什么关系了。我终于可以去看后台拉；真是泪流满面的 自强不息 新手无指导angular入门呀。。。
网友评论