自整理 angular入门 ——打破高难度入门观念 （基础篇1）

前言：

很多人都觉得angular相对于vue和react来说入门成本太高，但也许大部分后来人都是先学的vue或react，才来学angular的，所以会对angular这种MVC模式很不习惯，所以会产生入门很难的错觉，因此本人写了一个简单的入门教程，想学angular的小白可以看看。

注意：本人这里直接以路由项目解说

一.angluar的背景

曾经：在12年到16年这个时间段都在用angular1.x开发单页面，15年，angular 2.X出现，更难，学习成本更高，导致大部分开发者转向

vue和react。

现在：

① 2.x和4.X和5.X也是基于模块化组件的开发模式，语法基于typescript。

② 5..X继承了angular1.X，还吸收了react的一些优点

③ angular所有版本加起来，用户量最多。

特点：基于typescript语法（该语法包含es5和es6，是js的超集）

说完了angluar的基础以后，咋们来看看他是怎么用的吧。

二.使用流程

1.安装angular脚手架

便捷复制：npm install -g @angular/cli(推荐）

便捷复制 ： yarn add global @angular/cli （不推荐）

便捷复制：cnpm install -g @angular/cli （不推荐）

安装前先在cmd窗口里输入  node -v 和npm-v 验证一下node和npm版本是否在6.9.x 和npm3.x.x以上。

这里推荐使用npm安装，使用yarn或cnpm安装后续命令可能会出问题。

2.创建项目

便捷复制：ng new my-app（项目名）

这时候会自动创建项目安装依赖，觉得慢的话可以ctrl+c停止掉自动安装，然后使用cnpm来安装依赖。

3.运行项目

便捷复制：ng serve --open

4.打包项目

cd 到项目目录后运行一下命令

便捷复制：ng build --prod --aot

会自动打包出一个build文件夹，拖入服务器即可。

三.项目目录结构分析

有此图看来我们主要内容写在src里

四.创建组件

cd到项目里，ng g component components/组件名

此处我们就创建一个news组件

观察项目变化：

A.生成news组件为一个文件夹 （html为模板，ts为逻辑，css为样式）

B.观察app.module.ts，会自动引入注册刚才的模块 （建议不要在app.module.ts里注释，否则会影响自动注册和自动引入。

C.使用组件

①在新建的组件的html里写视图模板，建议用div包裹起来，避免css冲突，此处不需要根div包裹，但推荐有。

②在.ts里写逻辑

③在根组件的app.component.html里注册子组件