Angular开发准备

Angular准备工作

一、 Angular 介绍

Angualr 是一款来自谷歌的开源的 web 前端框架,诞生于 2009 年,是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当 中。根据项目数统计 angular(1.x 、2.x 、4.x、5.x、6.x、7.x)是现在网上使用量最大的框 架。
Angualr 基于 TypeScript 和 react、vue 相比 Angular 更适合中大型企业级项目。

二、学习 Angular 必备基础

必备基础:html 、css 、js、es6

三、Angular 环境搭建

1、安装前准备工作:

  • 安装 nodejs
    • 安装 angular 的计算机上面必须安装最新的 nodejs–注意安装 nodejs 稳定版本 1.2、
  • 安装 cnpm npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装
       npm install -g cnpm --registry=https://registry.npm.taobao.org3
    
  • 使用 npm/cnpm 命令安装 angular/cli (只需要安装一次)
      npm install -g @angular/cli 或者 cnpm install -g @angular/cli
    

四、Angular创建项目

  • ng new demo(项目名)
  • cd demo
  • ng serve --open

五、Angular 环境搭建以及创建项目的时候 可能遇到的错误

  • npm 安装 angular/cli 失败
    • 解决方案:用 cnpm 安装
  • 创建项目 npm i 的时候失败
    • 解决方案 1:ctrl+c 结束项目,cd 到项目里面,用 cnpm i 安装依赖
    • 解决方案 2:创建项目的时候 --skip-install
  • 创建项目后用 npm i 或者 cnpm i 后项目没法运行
    • 解决方案:用 yarn 替代 cnpm 和 npm
      • cnpm instal @angular/cli (我的 npm 会报错);
      • ng new 的时候阻止自动安装 ng 包,只创建 ng 目录
      • 安装 yarn npm install -g yarn / cnpm install -g yarn
      • 进入目录 my-app 使用 yarn 安装 ng 所依赖的包 yarn
    • 注意:yarn 命令 等同于 npm install / cnpm install 使用 yarn 前提是先安装 yarn , 安装使用 cnpm install -g yarn 就可以安装

六、创建Angular组件

  • ng g c components/组件名
  • ng g c 组件名
    • 会生成四个文件: .html 、 .scss、.ts、 .spec.ts、

七、创建Angular模块

  • ng g m 组件名
    • 会生成四个文件: .html 、 .scss、.ts、 .spec.ts、.module.ts

八、Angular目录结构分析

在这里插入图片描述

九、Angular组件以及组件中的模板

  • Angular模板绑定数据
    在这里插入图片描述
    在这里插入图片描述
  • Angular模板里面绑定属性
    在这里插入图片描述
    在这里插入图片描述
发布了24 篇原创文章 · 获赞 4 · 访问量 4465

猜你喜欢

转载自blog.csdn.net/Amo__/article/details/100096476