angular|大地老师第一节 详细angular安装和运行

一，安装准备环节

1，首先安装node.js  Node.js

        选择安装版本时应选择则左侧的稳定版本 接着一直下一步就好 没出现问题

2，验证node.js以及npm是否安装成功

        输入cmd打开命令行输入（括号内不输入）：

 node -v   (node和-v中间有一个空格)

           然后输入：

npm -v  （安装好node.js后npm自己就安装上了）

        如果出现类似v10.13.0这样的版本号说明成功了（npm类似6.4.1版本号）

3，安装cnpm

        输入以下命令：

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

        我第一遍的时候手打的安装失败了抱着侥幸的心里觉得不安装也可以，

        但是后面安装依赖的时候使用npm可能会失败，最好是安装上 不行就多试几遍。

4，查看cnpm是否安装成功

        出现cnpm版本就说明成功了

5，安装angular脚手架 

        输入以下命令（建议用cnpm 因为npm容易失败）

npm install -g @angular/cli   或者  cnpm install -g @angular/cli

        只需要安装一次

        等待一分钟左右 提示里面出现 all packages installed 基本就成功了

6，验证脚手架是否安装成功

        输入以下命令

ng v

        如果出现红色的线条拼出的angular字样以及下方cli版本号则说明成功

二，angular创建项目

1，选择某个计算机盘新建文件夹以便存放今后的文件

        例如：D盘创建angular文件夹

2，进入刚创建的文件夹

        命令行输入：        

D：（进入D盘）

cd angular   （进入你刚才创建的文件夹）

        此时命令行显示的为：   D:\angular>

3， 在angular文件夹中创建文件夹（angulardemo01可以自己起名）

        命令行输入：              

ng new angulardemo01

        出现提示would you like to add Angular routing？

        刚学可加可不加     不加就输入n然后回车

        出现提示选择 css/scss/sass/less/stylus  不会scss就选css然后回车

        此时看angulardemo01文件夹会发现创建了文件

        此时的命令行在安装依赖 可以等看看npm能否安装成功

        如果你之前安装了cnpm那么你可以按住ctrl c来结束命令行安装

  4， cnmp安装依赖方法：

        命令行输入：     

cd angulardemo01    （进入文件夹）

cnpm install     （安装依赖 主要是安装packages.json里的模块）

5，运行项目

        首先将默认浏览器更改为不是ie  ie8是不介入angular的

        命令行输入：   

ng serve --open   

        编译完成自动打开浏览器

        如果出现welcome..... 以及angular的图标则说明成功！！！！

三，将文件导入vscode

1，文件-打开文件夹-选择创建的项目（angulardemo01）

2，添加编辑器提示

        在vscode左侧栏最后一个拓展中搜索  angular

        找到angular 10 snippets（可能会比10高）点击安装，

        如果安装后安装按钮变成重新加载启用就点击

        然后点击左侧栏第一个文件样式的图片 依次点击src-app-app.component.html

        在这个文件中测试是否有提示

3，验证是否可用

        更改上一流程进入的页面app.component.html的代码，再刷新浏览器 

        文字更改了就成功啦！！！！！

这篇好文章是转载于：学新通技术网