使用WebStome 开发 Angular 简单Demo实现

                  使用WebStome 开发 Angular 简单Demo实现

一、安装Node.Js。

1.1 下载

Node.js 的地址 https://nodejs.org/en/download/

1.2 安装

按照自己版本进行自定义安装。（不在赘述，网上教程一堆）

1.3 建立文件夹

安装完成后，在node.js的安装目录下新建两个文件夹（1）node_cache （2）node_global 

1.4 配置环境变量

（1）配置node.js 的安装目录

在path下配置上node.js的路径。注意：在安装node.js的时候默认在环境变量中已经配置了。

个人路径：

（2）配置node_global的路径

在path下配置刚刚创建的那个node.js下新建的node_global的路径。

1.5 配置prefix和cache目录

cmd命令执行两条命令。

npm config set prefix "G:\node.js\nodeJsInstall\node_global"

npm config set cache "G:\node.js\nodeJsInstall\node_cache"

二、安装sass_binary

angular cli是依赖node-sass的，所以本机也要配置node-sass。

2.1 下载

下载地址：https://github.com/sass/node-sass/releases/

点击下载，完成后放在 node.js的安装目录中。

2.2 配置

进入 cmd 命令

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

set SASS_BINARY_PATH=G:\node.js\nodeJsInstall\win32-x64-57_binding.node

三、安装ali的cnpm

后续使用webstorm开发中，会下载一下国外包，如果使用npm，会被墙，进入cmd 执行

npm install -g cnpm --registry=https://registry.npm.taobao.org

四、安装typescript

进入到cmd 命令

npm install -g typescript typings

五、安装anfular-cli(最新版本号)

npm install -g @angular/cli@latest

   

                     --------------到此安装结束，我们开始新建一个Demo项目------------

六、运行angularJs

6.1 新建一个项目

（1）file-->new--> project  

（2）如图所示，无需改动，点击create

6.2 运行

（1）package.json 右击-->Show npm Scripts--start(右键)-->run start

（2）出现访问地址；出现Compiled successfully。 表示运行成功

（3）访问上图提示地址。

没有问题~~

七、创建Demo项目

（1）创建Angular Cli

上述工程中 src-->app(右键)-->new--> Angular Schematic

（2）选择component

填写自定义组件名称（我自己写的kip）

（3）打开kip.component.ts（记住selector框中的app-kip）

（4）编辑kip.component.html

（5）在app.component.html中配置 app-kip

（6）查看

测试完成~~

参考博客 ：   https://blog.youkuaiyun.com/kkkder/article/details/78706310