安装Nodejs
首先要安装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题。
没有安装的直接去nodejs官网找到对应系统下载nodejs安装。安装过程很简单,官网有教程。
安装完成后,打开控制台
输入node -v 和npm -v看看安装版本
npm是nodejs自带的包管理工具,npm默认使用海外的服务器如许切换服务器为淘宝镜像的话在控制台输入下面的命令
npm config set registry http://registry.npm.taobao.org/
当然你也可以使用cnpm那么则需要安装cnpm:
npm install -g cnpm
如遇权限问题则加sudo
sudo npm install -g cnpm
以上都成功了则代表你离angular近了一大步了,接下来就可以进入正题了(话说我早都等不及了😁)
安装AngularCli
AngularCli其实就是一个npm服务器上的一个包,当然使用Google提供的,我们只需要下载安装就可以了
安装命令:
npm install -g @angular/cli
如遇权限问题请仿照👆npm的权限问题解决方案
安装之后可以输入下面命令来查看是否安装成功
ng --version
如正确输出如下内容则表示安装成功
使用AngularCli生成Angular项目
在你的电脑上选择一个项目目录,在此目录进入控制台输入命令:
ng new my-app
接下来选择一些需要的功能,不知道是什么可以直接选择回车(回车默认y)
? Would you like to add Angular routing? (y/N) //是否需要路由 直接回车
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
SCSS [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
Sass [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com
//选择渲染样式所需要的技术,这里我们使用css
稍等三五分钟去喝杯水...
好的此时AngularCli已经帮我们生成了一个名为my-app的项目出来,在控制台进入目录中执行启动命令
cd my-app&&ng serve --open
稍等一分钟继续去喝水
好的,此时项目已经运行起来了,此时应该已经在你的Chrome浏览器(身为一个前端程序猿怎么能没有Chrome浏览器呢)中打开了,当然如果没有打开的话,你可以去控制台查看输出,输出中应该会有访问地址,没有就加我好友(当然只限妹子😁)
此时你可以选择一个开发工具打开生成的项目,尝试这修改src中的app.component.html、app.component.ts、app.component.css来查看变化,下面会说一下生成的各个目录的内容。