搭建AngularJS-CLI首先需要在windows上装node.js。安装node.js步骤:
1、http://download.csdn.net/download/huiling815/9709009 这是下载地址!!!!!!!!
2、然后一路next,默认是装到C盘的,我就装到了C盘
3、最后测试node是否安装成功,打开cmd,输入node -v,如果出现版本信息,证明安装成功,反之,亦然。
然后开始搭建AngularJS-CLI:
1、先添加淘宝的npm镜像(由于国内访问国外网站的速度实在是太慢了),由于我们只有要用到的一些东西,我
们采用以下的添加镜像方法
2、(windows 用户使用cmd,输入以下命令)
npmconfig set registryhttps://registry.npm.taobao.org
3、如果你之前安装失败过,最好在安装angular-cli之前先卸载干净,用以下 两句:
npm uninstall -g angular-cli
npm cache clean
4、然后在cmd命令中输入:cnpm install -g angular-cli,开始安装AngularJS-CLI等待。。。。。。。。时间可能比较
长,耐心等待!
5、安装完毕后,试下ng -v 和ng help,有显示正确内容就成功了
6、通过cmd命令进入C:\Users\用户\AppData\Roaming\npm\node_modules\angular-cli重新安装 npm install rxjs 之
后我们就可以在全局使用ng命令了
7、首先到你的工作目录下建立Angular工程目录
然后然后用命令行进入该目录,输入
ng new projectName
然后脚手架会帮我们搭建初始环境,由于初始化的时候Angualr-cli会去初始化node-modules依赖,所以会比较慢;如果没有切换淘宝镜像,会 非常慢。
耐心等待!!!!!!!!!!!!!!!!!!!!!!!
最后安装成功!!!!!!!!!
就这样,最简单的angular2工程创建好了;
工程结构熟悉一下:angular-cli.json 是angular-cli的配置文件,测试配置文件karma.conf.js,typescript的lint配置文
件,端到端的测试配置文件protractor.conf.js,导入es6模块的配置文件polyfills.ts,angular工程的main.ts引导启动文
件,全局样式style.css,typescript配置文件ts.config.json;typescript的声明文件typings.d.ts,以及生成了最贱的的一个
angular组建 app.components相关的css,html,ts。这些配置都是angular2的生产项目中需要配置的文件,angular-
cli帮我们做了这么多事情,我们只用了一个命令;(这些玩意我也没看懂!!!!!!)
9、然后输入cd projectName
命令行进入进入刚才的工程目录,输入
ng serve
如果要是运行项目比较大的话可以用以下的命令
ng serve --prod --aot
10、浏览器输入 http://localhost:4200/就可以看到appworks!
因为默认的4200的端口,如果你需要换的话也是可以的package.json里面的
ng serve --host localhost --port 4201
OK!!!!!!!!!!!
最后如果你的项目要在eclipse中的tomact上运行
在cmd命令窗口输入 ng build --prod --aot
会生成一个dist文件,把这个文件导入eclipse中就可以了!
这个教程可能不全面。希望大家支持!!!!