angular基础一

背景介绍

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

初识Angular

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

angualr官网

TS文档

node官网

创建一个angular项目

安装angular脚手架

• 命令行1 使用npm安装

npm install -g @angular/cli

• 命令行2 使用yarn安装

yarn global add @angular/cli

创建项目

• 命令行

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

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

启动项目

• 命令行

ng serve --open

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

启动默认页

认识项目目录

认识入口配置文件

// 核心模块
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 {
    
     }