likes
comments
collection
share

一言不合Angular-1 Angular项目介绍和启动

作者站长头像
站长
· 阅读数 46

一言不合Angular

Angular介绍

Angular是由谷歌公司开发的一个重量级的前端框架，用来构建大型单页面应用

优点是内部集成了大量开箱即用的模块以及轻耦合的代码风格，代码风格简洁明了，跟vue和react比起来更适合中大型项目

缺点在于重，开发一个简单的页面往往要手动引入很多东西，以及相对于vue这种轻量级框架来说入门成本稍微高一些

Angular环境搭建

  1. nvm 一个电脑上可能同时会存在vue和react项目，或者不同版本的angular项目会需要不同的node版本。这里推荐nvm，使用nvm来安装和管理nodeJs。 1.1 windows系统的推荐这篇文章 blog.csdn.net/sjp991012/a…

    1.2 mac系统的推荐直接在终端安装 在终端中运行以下命令以下载并运行nvm安装脚本：

     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

 这将下载并运行nvm的安装脚本。根据你的nvm版本，可能需要替换URL中的v0.39.1为最新的版本号。

 安装完成后，你需要重新启动终端，或者运行对应的初始化命令使nvm生效。
 source ~/.bashrc

 运行以下命令检查nvm是否成功安装：
 command -v nvm
 如果安装成功，会返回nvm。

    安装Node.js和npm： 运行以下指令即可安装 nvm install node 如果需要安装指定版本需要在后面加上版本号，例如 nvm install 16.13.2

    nvm简单使用，

      可以查看你当前所有已经安装的所有node版本
  `nvm ls` 
  安装指定版本的 Node.js。
  `nvm install <version>`
  <!-- nvm use <version>：切换到指定版本的 Node.js。 例如： nvm use 16.13.2 可以切换到16.13.2版本 -->
  显示当前正在使用的 Node.js 版本。
  `nvm current`
  <!-- nvm alias <name> <version>：创建一个别名来引用某个特定版本的 Node.js。 例如 nvm alias default 16.13.2,那么在使用nvm use default 的时候就使用的是16.13.2的版本。 -->
  移除一个已创建的别名。
  `nvm unalias <name>`
  重新安装指定版本的 Node.js，并且将该版本的全局 npm 包重新安装。
  `nvm reinstall-packages <version>`
  在指定版本的 Node.js 环境中执行某个命令。
  `nvm exec <version> <command>`
  删除指定版本 Node.js 的安装目录。
  `nvm use --delete-prefix <version>`

安装Angular CLI

  1. 全局安装Angular CLI

yarn global add @angular/cli 或者 npm install @angular/cli -g

  • 如果要卸载，执行下面命令： yarn global remove @angular/cli

  • 检验安装是否成功 ng version 或者 ng v

新建Angular项目

ng new my-app

如果要跳过npm i安装 ng new my-app --skip-install

ng new之后Angular cli已经帮我们干了什么：

那么，这时候Angular cli帮你干了以下这么多事情：

  • 创建 my-app 目录
  • 应用程序相关的源文件和目录将会被创建
  • 应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
  • 自动配置项目中的 TypeScript 开发环境
  • 自动配置 Karma 单元测试环境
  • 自动配置 Protractor (end-to-end) 测试环境
  • 创建 environment 相关的文件并初始化为默认的设置

启动项目

安装完成之后就可以启动项目了：

cd my-app //进入my-app

npm run start 或者 ng serve //启服务

ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。 使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。 使用--port 参数可以设置制定的端口号，例如： ng serve --port 9527

ng serve命令提供了很多参数，可以适当参考。

  --dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件
  --verbose: boolean, 默认为 false
  --link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包
  --skip-install: boolean, 默认为 false, 表示跳过 npm install
  --skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库
  --skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件
  --skip-commit: boolean, 默认为 false, 表示不进行初始提交
  --directory: string, 用于设置创建的目录名，默认与应用程序的同名
  --source-dir: string, 默认为 'src', 用于设置源文件目录的名称
  --stylring, 默认为 'css', 用于设置选用的样式语法 ('css', 'less' or 'scss')
  --prefix: string, 默认为 'app', 用于设置创建新组件时，组件选择器使用的前缀
  --mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序
  --routing: boolean, 默认为 false, 表示新增带有路由信息的模块，并添加到根模块中
  --inline-style: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联样式
  --inline-template: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联模板

其他文件：

  .editorconfig： 给编辑器看的一个简单配置文件
  .gitignore： 配置git代码挂历忽略某些文件。注意！在当前文件里面删除和文件里面注明忽略哪个之后，也要把删除请求同步到代码库，这样才能生效
  angular.json： angular cli 的配置文件
  package.json：npm 配置文件，项目使用到的第三方依赖包
  package-lock.json：npm 配置文件，进行npm i 安装之后，具体安装了哪个依赖的哪个版本，会在此文件中体现。
  protractor.conf.js- ：运行 ng e2e 的时候会用到
  README.md：项目的基础文档
  tsconfig.json：TypeScript 编译器的配置
  tslint.json：运行 ng lint 时会用到

Angular CLI简单使用

新建组件

ng generate component news

  • installing component

    • create src/app/great-angular/news.component.css
    • create src/app/great-angular/news.component.html
    • create src/app/great-angular/news.component.spec.ts
    • create src/app/great-angular/news.component.ts
    • update src/app/app.module.ts

    在此过程中，Angular cli帮我们干了如下事情：

  • src/app/news 目录被创建

  • news目录下会生成以下四个文件：

  • CSS 样式文件，用于设置组件的样式

  • HTML 模板文件，用于设置组件的模板

  • TypeScript 文件，里面包含一个 组件类和组件的元信息

  • Spec 文件，包含组件相关的测试用例

  • news 组件会被自动地添加到 app.module.ts @NgModule 装饰器的 declarations 属性中。

其他命令

Angualr CLI提供了许多常用命令供我们选择：

  • ng generate class my-new-class // 新建类， 新建一个名为my-new-class的类 (class)
  • ng generate component my-new-component // 新建组件
  • ng generate directive my-new-directive // 新建指令
  • ng generate enum my-new-enum // 新建枚举
  • ng generate module my-new-module // 新建模块
  • ng generate pipe my-new-pipe // 新建管道
  • ng generate service my-new-service // 新建服务

当然，还有一些简写可以选择：

  • ng g cl my-new-class // 新建 class
  • ng g c my-new-component // 新建组件
  • ng g d my-new-directive // 新建指令
  • ng g e my-new-enum // 新建枚举
  • ng g m my-new-module // 新建模块
  • ng g p my-new-pipe // 新建管道
  • ng g s my-new-service // 新建服务

单元测试

Angular默认帮我们集成了``karma`测试框架，我们只需要： ng test

端到端测试

ng e2e

构建应用程序

ng build 或者 npm run build

其中过程应该是这样的： Angular CLI 从 .angular-cli.json 文件中加载配置信息 Angular CLI 运行 Webpack 打包项目相关的 html、 CSS 等文件 打包后的资源，将被输出到配置文件中 outDir 所指定的目录，默认是输出到 dist 目录。

Angular开发工具介绍

Angular目录结构分析

app.module.ts详解、以及Angular中创建组件、组件详解、 绑定数据

目录结构分析

文件 说明

|--E2e	应用的端对端(e2e)测试，用 Jasmine 写成并用 protractor 端对端测试运行器测试。
|--Node_modules	依赖包
|--Src	
   |--App	Angular应用文件
      |--App.module.ts	
      |---App.component.ts	
   |--assets	资源文件
   |--environments	环境配置：开发、部署
   |--index.html	应用的宿主页面。 它以特定的顺序加载一些基本脚本。 然后它启动应用，将根AppComponent放置到自定义<my-app>标签里。
   |--main.ts	项目的入口文件
   |--polyfills.ts	处理浏览器兼容问题
|--angular.json	Cli配置文件
|--.editorconfig	统一代码风格工具配置，不支持的需要安装插件
|--.gitignore	Git配置文件
|--karma.conf.js	在测试指南中提到的 karma 测试运行器的配置。
|--package.json	项目指定npm依赖包
|--tsconfig.app.json	Typescript编译配置
|--tsconfig.spec.json	Typescript测试编译配置
|--tsconfig.json	Typescript编译配置
|--tslint.json	Typescript语法检查器

详情参考：www.angular.cn/guide/file-…

app.module.ts、组件分析

app.module.ts

app.module.ts文件是整个angular项目的根模块。在这个文件里面可以引入和配置项目的各种组件、模块、服务和指令。作用相当于整个应用的入口文件，把每个组件和模块串联起来。在这个文件中，还能进行一些全局配置，例如路由配置、Http拦截器的配置等内容。

/* 
  BrowserModule是angular里面一个核心模块，它主要包含了一些在浏览器中运行Angular应用的指令管道和服务，以及支持浏览器特定功能的，例如 ngIf ngFor ngStyle。
  而且，当引入这个模块的时候，angular可以识别并运行应用。
 */
  import { BrowserModule } from '@angular/platform-browser';  
/*
  NgModule是Angular里面的一个装饰器,使用这个装饰器可以声明一个模块，通过装饰器可以将该模块所需要的指令、管道、服务、模块等内容收集在一起。
*/
  import { NgModule } from '@angular/core';

  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';

  @NgModule({
    declarations: [ // 用来声明当前模块的组件、指令和管道，在这当中列出的内容会被当前模块中的其他组件识别和使用
      AppComponent
    ],
    imports: [  // 用来引入当前模块所依赖的其他模块
      BrowserModule,
      AppRoutingModule
    ],
    providers: [],  //  该属性用来声明当前模块所依赖的服务
    bootstrap: [AppComponent] //  页面初始化启动的时候访问的第一个html页面组件
  })
  // 刚看到这句话的时候，我相信很多人跟我是同一个问题，为什么没有声明导出的内容？在查阅之后发现，这是Angular的特有的语法，应该声明的内容都在装饰器NgModule里面声明了，这里直接导出一个空内容即可
  export class AppModule { }
转载自:https://juejin.cn/post/7363519735055220762
评论
请登录