angular知识点梳理第一篇

文章目录

• 背景介绍
• 初识Angular
  • 官网
• 学习前提知识
  • ts官网
  • 环境
  • node官网
• 创建一个angular项目
  • 安装angular脚手架
  • 创建项目
  • 启动项目
  • 启动默认页
  • 初始化编辑器
  • vscode安装angular插件
  • 认识项目目录
  • 认识入口配置文件
• 写到最后

背景介绍

从今天开始，我将会更会关于angular的内容，很久没有更新了帖子了，因为一直使用的一些技术都不算是比较新的技术，所以也没有进行一个更新，最近讲angular刷了一遍，这里简单的记录一下整个的整理知识点的过程，也谈一下angular和vue的一些优劣点吧！当然优劣点也仅仅从写法的角度，性能上我后期有时间的话做一些测试以后再进行评定，当然因为angular不是一个新知识点，所以我的帖子只是整理一下我梳理的一个过程，angualr很多的坑还请移步到别的那些经常写angular的博主那里找寻答案！当然后面我写的时候遇到的一些坑也会做记录！另外就是不排除看我的帖子的人有一些是有别的框架的基础的人，看的时候需要有些耐心，我会写的比较基础！

初识Angular

angular是一09年出来的一个构建前端SPA应用的一个框架，后来被Google收购以后就稍微知名度高了一些，他是一个基于MVVM模式的一个框架，之前叫做angularjs 后来到2.0版本以后就叫angualr了，可能觉得angular比较高级，这是她的一个比较简短的背景介绍，下面我们开始正式接触angualr

官网

Angular

学习前提知识

• javascript
• css
• html
• typescript

如果上面罗列的知识点你一点不会的话，这边是不建议学习angular的，如果你仅仅是typescript不太熟悉的话，对你学习angular影响不太大，也是可以学的，只是我个人觉得还是typescript进行一个学习比较好，毕竟他是基于ts语法进行编写代码的，ts本身也不会太难，只要你的js基本功还可以的话，学习ts的成本不会太高

ts官网

typescript

环境

• node

angular和vue使用的环境基本是一致的，都是基于node进行开发的，所以这里还是需要我们本地安装一下node环境的，环境的安装比较简单，直接下载一下本地下一步就好了！

node官网

nodejs

创建一个angular项目

安装angular脚手架

• 命令行1 使用npm安装

npm install -g @angular/cli

• 命令行2 使用yarn安装

yarn global add @angular/cli

安装angular脚手架

创建项目

• 命令行

ng new csdndemo [csdndemo是你自己的项目名字]

PS：这里说明一下，如果直接运行ng new + 项目名字是可以的，但是他是默认将node_modules也进行了一个加载，如果你想创建的过程中不让他进行加载模块代码的话，命令后加上 --skip install 即可

创建项目

启动项目

• 命令行

ng serve --open

启动项目

启动的时候，如果你当前有端口号4200被占用，他会提示你是不是接受使用别的端口进行打开项目，我们选择yes即可，我的下面启动页面就是端口被改掉的

启动默认页

启动默认页

初始化编辑器

• 这里使用的是vscode进行代码编写，我们引入刚才创建的项目，为了让该编辑器对angular项目进行一个比较友好的提示处理，我们需要进行安装一个angular的插件

vscode安装angular插件

vscode安装angular插件

认识项目目录

项目目录信息描述

认识入口配置文件

// 核心模块
import { NgModule } from '@angular/core';
// 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// 路由解析模块
import { AppRoutingModule } from './app-routing.module';
// 根组件
import { AppComponent } from './app.component';
// @NgModules 是angular的一个装饰器，他接受一个元数据对象，告诉该应用如何编译和启动应用
@NgModule({
  // 配置当前项目运行的组件
  declarations: [
    AppComponent
  ],
  // 配置当前模块运行所依赖的其他模块
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // 配置项目所需要的服务
  providers: [],
  // 指定应用的主视图（根组件） 通过引导AppModules来启动应用，这里一般写的是根组件 也就是app下面直接可以看到的那个组件
  bootstrap: [AppComponent]
})
// 根组件不需要导出任何东西，因为其他组件不需要引入它
export class AppModule { }

写到最后

这篇文章主要介绍了一些angular的创建和认识angular的目录结构的认识和梳理，考虑到阅读文章的精力保持的时间限制（很多人看文章，大篇幅的时候，会到最后精力不够），这里就先介绍到这里，如果你的精力还非常的旺盛或者是你之前基础比较好，看这些都基本不怎么需要思考的话，可以直接移步到我的下一篇文章！我们继续一起讨论angular的知识点！