angular知识点梳理第一篇

2022-05-09 19:30:04 浏览数 (1)

文章目录
  • 背景介绍
  • 初识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安装
代码语言：javascript复制
npm install -g @angular/cli
  • 命令行2 使用yarn安装
代码语言：javascript复制
yarn global add @angular/cli
创建项目
  • 命令行
代码语言：javascript复制
ng new csdndemo [csdndemo是你自己的项目名字]

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

启动项目
  • 命令行
代码语言：javascript复制
ng serve --open

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

启动默认页
初始化编辑器
  • 这里使用的是vscode进行代码编写，我们引入刚才创建的项目，为了让该编辑器对angular项目进行一个比较友好的提示处理，我们需要进行安装一个angular的插件
vscode安装angular插件
认识项目目录
认识入口配置文件
代码语言：javascript复制
// 核心模块
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的知识点！

node.js typescript angularjs ide

0 人点赞