0810-angular

angular官网


1.安装node、npm(angular4需要最新版的node、npm)

全局安装

npm install -g n

升级node.js到最新稳定版

n stable

查看版本

node -v

2.安装ts

npm install -g typescript

3.安装CNPM

cnpm和npm一样,只是npm从国外下载镜像比较慢,cnpm与npm一样,但它由淘宝团队开发,直接连接的淘宝的镜像库。

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

4.使用cnpm安装angular

cnpm install-g@angular/cli

说明: 之前采用npm安装angular  各种报错。

5.设置ng采用cpm下载包

ng set --global packageManager=cnpm

6.创建一个angular项目

ng new my-app

7.启动开发服务器

cd my-app

ng serve --open    #ng serve是启动服务  --open是可以自动打开浏览器并访问http://localhost:4200/

8.编辑组件

CLI为我们创建了第一个Angular组件。 它就是名叫app-root的根组件。 你可以在./src/app/app.component.ts目录下找到它。


0810-angular_第1张图片
修改组件的titile
0810-angular_第2张图片
html使用组件
0810-angular_第3张图片
修改css
0810-angular_第4张图片
页面自动编译更新

9.项目文件概览

~src文件夹

应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。


0810-angular_第5张图片
src文件夹


0810-angular_第6张图片

~根目录


0810-angular_第7张图片
0810-angular_第8张图片







如果想重新卸载安装:

Npm uninstall -g @angular/cli

Npm cache clean

Npm install -g @angular/cli@latest

出现“Please take the following steps to avoid issues:

"npm install --save-dev @angular/cli@latest"”提示

输入命令行语句:npm install --save-dev @angular/cli@latest


angular4修仙指南

你可能感兴趣的