Angular 学习之 Hello World !

sun0322

已于 2022-12-07 08:27:40 修改

阅读量1.8k

点赞数 1

分类专栏： # TypeScript # node.js 文章标签： angular.js 学习前端

于 2022-11-23 22:29:53 首次发布

本文链接：https://blog.csdn.net/sxzlc/article/details/128008298

版权

node.js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

TypeScript

2 篇文章 0 订阅

订阅专栏

2.4.工程目录结构（src, package.json, package-lock.json）

2.5.src目录结构（app, assets, main.ts, index.html）

2.6.app目录结构（app.module.ts， app-routing.module.ts， app.component.html）

2.7.为什么访问 app.component.html （与 app.module.ts 设置有关）

问题3 ( 同事遇到的问题：Eclipse导入后端的 Gradle 工程失败 )

6.ng serve 是如何启动的

7.更多资料整理

7.1.Angular组成概述（★★★图★★★）

7.2.Node 的 package.json文件

7.3.全局安装【Webpack】【Webpack-cli】

7.4.使用 npm run test 运行（出错了，没有解决【TODO】）

7.5.package-lock.json的作用

7.6.关于main.ts

7.7.angular中app.module.ts的說明

7.8.app-routing.module.ts （可以设置主页）

7.9.rxjs

7.10.angular知识碎点之RXJS

7.11.Rxjs

7.12.创建组件, 创建服务

7.13.Angular CLI生成的“spec.ts”文件是干什么用的（单元测试用）

===

0.前言・前提（Angular介绍）

前言

AngularJS诞生于2009年，由Misko Hevery 等人创建，是一款构建用户界面的前端框架，后为Google所收购。 AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。 AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
Angular是AngularJS的重写，Angular2以后官方命名为Angular，2.0以前版本称为AngularJS。AngularJS是用JavaScript编写，而Angular采用TypeScript语言编写，是ECMAScript 6的超集。

前提（node.js已经按照）

Node.js之Hello World_sun0322的博客-CSDN博客

==================================

1.安装・查看版本

npm install -g @angular/cli

===比较旧的版本，至少是12，使用 ng --version 命令查看版本

ng version

C:\Users>npm install -g @angular/cli
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

added 227 packages in 41s

C:\Users>ng --version
Error: You need to specify a command before moving on. Use '--help' to view the available commands.

C:\Users>ng --version
Error: You need to specify a command before moving on. Use '--help' to view the available commands.

C:\Users>ng version
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.0.0
Node: 16.18.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1500.0 (cli-only)
@angular-devkit/core         15.0.0 (cli-only)
@angular-devkit/schematics   15.0.0 (cli-only)
@schematics/angular          15.0.0 (cli-only)


C:\Users>

2.创建・启动Angular工程

2.1.创建工程

ng new myFirstAngularProject

===

2.2.启动工程

启动

ng serve

  要到工程目录下执行
  默认 http://localhost:4200/

启动并打开浏览器

ng serve --open

Build at 的时间是【格林尼治时间】时间（实际的时间是21点46）

G:\GitSource\myFirstAngularProject>ng serve --open
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.79 MB |
polyfills.js          | polyfills     | 314.30 kB |
styles.css, styles.js | styles        | 209.42 kB |
main.js               | main          |  46.64 kB |
runtime.js            | runtime       |   6.54 kB |

                      | Initial Total |   2.36 MB

Build at: 2022-11-23T13:46:38.005Z - Hash: ed4dffe32e4a77dd - Time: 87777ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.

===

2.3.启动之后，浏览器访问，显示的效果

http://localhost:4200/

===

2.4.工程目录结构（src, package.json, package-lock.json）

2.5.src目录结构（app, assets, main.ts, index.html）

2.6.app目录结构（app.module.ts， app-routing.module.ts， app.component.html）

app-routing.module.ts 虽然这里没有，但是如果建立的话，在这里建立。

2.7.为什么访问 app.component.html （与 app.module.ts 设置有关）

bootstrap: [AppComponent] // 下面代码14行

imports：在组件页面里用到基础类。
declarations：现有custom组件声明。
bootstrap：可以理解为Android的main launch，项目启动时从那个组件进入。

====

3.各种命令整理

查看当前版本
ng --version

======================================================

卸载之前的版本
npm uninstall -g @angular/cli

======================================================

清除缓存，确保卸载干净
npm cache verify

（在低版本的nodejs里面清除缓存使用的命令是npm cache clean）

======================================================

安装指定版本
npm install -g @angular/cli@12.0.5

======================================================
创建新工程
ng new myFirstAngularProject

======================================================

【CMD 命令行】中启动
ng serve
执行 ng serve 启动本地开发服务器（要到工程目录下执行）
（默认 http://localhost:4200/）

======================================================

【VS Code】中启动

npm start

---------

前提 :

各种配置文件都没有问题，比如（package.json)

{

  "name": "angular-app",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

。。。。

======================================================

切换镜像

npm config set registry http://registry.npm.taobao.org/

======================================================

根据 package.json, 下载【node_modules】中的内容

npm install

======================================================

使用npm init 命令可以快速生成package.json文件。

(默认情况下，这个命令会询问一些事情，比如项目的名称是什么、项目的版本是多少，如果不想填写可以使用默认值。)

npm init

======================================================

使用npm init -y 命令生成package.json文件，-y这个参数的意思是不填写任何信息，全部使用默认

npm init -y

======================================================

===

4.工作环境配置整理（私密）

Angular 学习之 Hello World （工作环境中的配置）_sun0322的博客-CSDN博客

===

5.遇到的问题

问题1

从Git取得的工程目录，没有【node_modules】文件夹，会出如下错误

An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'

使用下面命令解决（自己安装）

npm install -save-dev @angular-devkit/build-angular

但是，这个解决方法并非完全正确，正是因为这个解决办法，造成了问题2

应该采用下面的解决办法

进入工程目录之后，直接执行下面的命令

npm install

会根据工程的【package.json】文件自动安装需要的【包】

这种安装方式，即使你本地的Angular版本高于工程的Angular版本也不会有问题。

===

问题2

版本不匹配

ng 启动 Angular时，报如下错误

Can't resolve '../node_modules/ng-zorro-antd/ng-zorro-antd.less'

指定版本安装Angular（使用工程项目的Angular版本）

问题3 ( 同事遇到的问题：Eclipse导入后端的 Gradle 工程失败 )

失败原因：Eclipse安装的有问题。

（具体，安装Eclipse之前，没有先安装JDK（安装版本的JDK），造成Eclipse中的一些配置不对。）

解决：

安装（安装版本的JDK）之后，再安装Eclipse，这样就可以正常导入Grandle工程了

根本原因：

在安装Eclipse时，需要指定你的JRE目录，没有安装JRE，所以Eclipse的某些功能是安装失败的。

6.ng serve 是如何启动的

Angular : ng serve 是如何启动应用的_北冥友余的博客-CSDN博客_ng serve

1.当你在命令行中输入 ng serve 后
2.ng 会根据 angular.json 中的 main元素找到应用入口文件main.ts
3.main.ts 再加载根模块AppModule
4.AppModule 启动Angular模块(@ngModule)
5.@ngModule 为 AppModule 添加元数据,并指定了顶层组件AppComponent
6.AppComponent 中我们就可以为所欲为了

====

7.更多资料整理

7.1.Angular组成概述（★★★图★★★）

angular2概述_环游记的博客-CSDN博客_angular2

一个完整的Angular应用主要由六个部分构成：组件，模板，指令，服务，依赖注入和路由。

7.2.Node 的 package.json文件

Node —— package.json文件 - codejing - 博客园 (cnblogs.com)

原因：

传递项目时不传递node_modules这个文件夹

package.json文件。在这个文件中会记录项目依赖了哪些第三方模块

当别人拿到这个项目时，会根据package.json文件中所记录的依赖项去下载第三方模块。

这样项目在别人的电脑上就可以运行了。

使用

可以使用 npm install下载全部的依赖

npm install

7.3.全局安装【Webpack】【Webpack-cli】

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

运行的平台是nodejs

安装webpack的完整步骤_heyy1997的博客-CSDN博客_webpack安装

※　先新建两个文件夹

然后进入【node_global】文件夹

npm install webpack -g

系统变量中新建一个NODE_PATH 并添加node_global的路径

npm i webpack-cli -g

webpack -v

====

7.4.使用 npm run test 运行（出错了，没有解决【TODO】）

前言：
npm run的本质
npm run是npm run-script的简写，顾名思义就是执行脚本。执行的脚本配置在package.json中的scripts对象。

先用npm init --yes命令，生成【package.json】文件

（首先用node运行js文件，可以正常执行。）

G:\MyTypeScript>node helloworld.ts
Hello, World

G:\MyTypeScript>npm init --yes
Wrote to G:\MyTypeScript\package.json:

{
  "name": "mytypescript",
  "version": "1.0.0",
  "description": "",
  "main": "helloworld.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后运行 npm run test，出现如下错误

错误1

G:\MyTypeScript>npm run test
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path G:\MyTypeScript/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'G:\MyTypeScript\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\YourUserName\AppData\Local\npm-cache\_logs\2022-11-24T15_15_14_128Z-debug-0.log

原因。。。。

解决方法。。。。。

===============================================================

错误2


"Error: no test specified"
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! MyNodeJs@1.0.0 test: `echo "Error: no test specified" && exit 1`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the MyNodeJs@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\YourUserName\AppData\Roaming\npm-cache\_logs\2022-11-25T00_41_34_446Z-debug.log

原因。。。。

解决方法。。。。。

===

7.5.package-lock.json的作用

详解package-lock.json的作用_51CTO博客_package-lock.json

作用：
锁定安装时的包的版本号及包的依赖的版本号, 以保证其他所有人人在使用 npm install 时下载的依赖包都是一致的
（packag.json只单纯记录本项目的依赖，不会记录本项目依赖的项目的版本号。

详细：
packag.json只单纯记录本项目的依赖, 而没有记录下依赖的依赖, 并且依赖之间的版本号又没有明确固定, 导致无法保证依赖环境一致
而package-lock.json的出现就是解决上述问题, 它会详细的记录项目依赖的版本号及依赖的依赖的版本号

7.6.关于main.ts

angular源码分析之platformBrowserDynamic_weixin_33701564的博客-CSDN博客

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
 
if (environment.production) {
  enableProdMode();
}
 
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

xxx

7.7.angular中app.module.ts的說明

angular中app.module.ts的說明_愚者不愚、的博客-CSDN博客_angular app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginPageComponent } from './pages/login-page/login-page.component';
import { VersionStatusPipe } from './pipe/version-status.pipe';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { SocketCntService } from './services/api/socket-cnt.service';
 
@NgModule({ //装饰器
 
    declarations: [ //声明组件、指令和管道
 
        AppComponent,
        LoginPageComponent,
        VersionStatusPipe,
 
    ],
 
    imports: [ //需要的模块
 
        BrowserModule, //浏览器模块
        NgZorroAntdModule,
 
    ],
 
    providers: [ //声明模块中提供了什么服务
 
        SocketCntService,
 
    ], 
 
    bootstrap: [AppComponent] //声明模块的组组件是什么
 
})
 
export class AppModule { } //类

xxx

import语句后，@NgModule可以看到一个装饰器修饰的类。

@NgModule装饰器将AppModule标记为Angular模块类，@NgModule接受一个元数据对象，告诉Angular如何编译和启动应用

import： BrowserModule，每个在浏览器运行应用都需要他。

declarations：应用唯一组件
boostrap：根组件，Angular创建他并插入index.html

app.module.ts的用途
是它启动你的应用程序，并设置链接到你的其他模块。
模块是应用程序的逻辑层。每个模块都在逻辑上打包，因此人们更容易理解和维护由多个模块组成的应用程序。例如，如果你正在做一个丰富的应用程序，你应该有一个Login，一个MainPage，等等
你需要导入模块中的东西，使它知道什么時候将会使用。基本上，你的Login将需要表單模塊，这可能不需要另外的模塊。
在这里，这导致我们的AppModule应该只导入其他模块，它是链接到并提供将需要的服务全局。

xxxx

更多讲解

/*这个文件是Angular 根模块，告诉Angular如何组装应用*/


//BrowserModule，浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';  
//Angular核心模块
import { NgModule } from '@angular/core';
//根组件
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/header/header.component';

/*@NgModule装饰器, @NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用*/
@NgModule({
  declarations: [    /*配置当前项目运行的的组件*/
    AppComponent, NewsComponent, HomeComponent, HeaderComponent
  ],
  imports: [  /*配置当前模块运行依赖的其他模块*/
    BrowserModule
  ],
  providers: [],  /*配置项目所需要的服务*/
  bootstrap: [AppComponent]    /* 指定应用的主视图（称为根组件） 通过引导根AppModule来启动应用  ，这里一般写的是根组件*/
})

//根模块不需要导出任何东西，   因为其它组件不需要导入根模块
export class AppModule { }

HelloWorld中自动生成的代码

xxx

7.8.app-routing.module.ts （可以设置主页）

Angular routing生成路由和路由的跳转 - 我是ed - 博客园

前提（最开始的主页，设置Router跳转）

=== ====================

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

====================

作用

・设置主页（登陆画面）

aahttp://localhost:4200/login

・不同的地址，访问不同的组件

・地址不存时，跳转到指定的页面（和设置主页是一个原理）

const routes: Routes = [

  {

    path: '',

    redirectTo: 'login',

    pathMatch: 'full',

  },

  {

    path: 'login',

    component: LoginComponent,

  },

  {

    path: 'aaa',

    component: AAAComponent,

    children: [

      {

        path: '',

        redirectTo: 'aaa1',

        pathMatch: 'full',

      },

      {

        path: 'aaa1,

        component: AAA1Component,

      },

      {

        path: 'aaa2',

        component: AAA2Component,

      },

    ],

  },

];

xxx

7.9.rxjs

为什么我要使用rxjs - 知乎

理解基本定义: observable, observer, subscription

整理成这个公式：
Subscription = Observable.subscribe (observer)
observable: 随着时间产生的数据集合，可以理解为流，其 subscribe 方法可以启动该流
observer: 决定如何处理数据
subscription: 存储已经启动过的流，其 unsubscribe 方法可以停止该流

rxjs主要是一套兼具函数式和响应式编程特点，并擅长处理异步的解决方案.
在rxjs中，我们习惯把它的实例称作数据流。形象一点的话，异步操作就像是没有拧紧的水龙头，不知道什么时候会滴出下一滴水。等到数据来了，rxjs就把它推出去。当数据传递过来时，我们可能需要做很多的数据处理，包括对数据的整合，筛选以及转换，而rxjs就可以用它的api来帮助我们分离并简化这些操作。

最简Rxjs入门教程--别再被Rxjs的概念淹没了

最简Rxjs入门教程--别再被Rxjs的概念淹没了 - 知乎

7.10.angular知识碎点之RXJS

angular之RXJS_zhaoandong的博客-CSDN博客_angular rxjs

Observable (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。
Observer (观察者): 一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
Subscription (订阅): 表示 Observable 的执行，主要用于取消 Observable 的执行。
Operators (操作符): 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
Subject (主体): 相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。
Schedulers (调度器): 用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。
====
在实际编程中，我们主要与三个对象打交道：Observable、observer、Subscription：
https://www.cnblogs.com/dojo-lzz/p/5875714.html
observable adj. 可观察的;看得见的
observer n. 观察员；遵守者
Subscription 英 [səbˈskrɪpʃən] （报刊等的）订阅，订购；（书刊的）预订

===

7.11.Rxjs

Angular与Rxjs学习_hresh的博客-CSDN博客

RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX来自微软，它是一种针对异步数据流的编程。

7.12.创建组件, 创建服务

创建组件
my-app> ng g c login
// component

创建服务
my-app> ng g s login
// service

7.13.Angular CLI生成的“spec.ts”文件是干什么用的（单元测试用）

“spec.ts文件用于单个组件的单元测试。您可以通过ng测试运行Karma任务运行器。

7.14.XXX

xxx

7.15.XXX

xxx

7.16.XXX

xxx

7.17.XXX

xxx

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■其它知识点（gradle，git）

build命令

■环境变量
GRADLE_HOME
GRADLE_USER_HOME // 指定第三方jar的存放位置

■Gradle Wrapper
・命令：
gradlew clean build

・下载指定的版本
gradle wrapper --gradle-version=7.4.2
（在使用 gradlew -classes等命令时，下载最新的【gradle-wrapper.jar】）

■Gradle
gradle classes
gradle test
gradle clean
gradle build
gradle build -x test

■Gradle 初始启动配置
init.d
inin.gradle
gradle -init-script yourdir/init.gradle -q taskName

■Gradle 管理的第三方jar
・位置：
yourPath/.gradle\caches\modules-2\files-2.1

・结构：
和Maven不一样
(gradle: 三个目录，一个放源码，一个放jar，一个放pom文件)

■groovy语言

（Gradle项目中build.gradle都是用groovy写的）
支持函数式编程
groovy 支持 DSL（领域特点语言）
groovy 可以作为脚本语言，也可以作为面向对象语言.(面向对象语言时，需要定义类)

http://groovy-lang.org/documentation.html
https://groovy.apache.org/download.html

■与Maven相关
M2_HOME
inin.gradle 中指定【mavenLocal()】时，根据M2_HOME找到
【yourPath、apache-maven-3.6.3\conf\settings.xml】
这个文件，
根据这个文件中的设定，下载时，使用Maven的库进行下载。

git命令行操作

GIT命令行的一些基本操作_sun0322的博客-CSDN博客

基于Master创建Branch

$ git checkout -b test007
Switched to a new branch 'test007'

========================

根据远程分支，创建本地分支

git checkout -b test007 origin/test007

========================

查看（本地）所有分支（ * 代表当前所在的分支）

git branch
master
* test007

========================

查看（远程）所有的分支

git branch -r

========================

切换当前使用的分支

git checkout master

Switched to branch 'master'
M package-lock.json
M package.json
Your branch is up to date with 'origin/master'.

========================

删除本地分支

git branch -d test007
Deleted branch test007(was FFA23).

========================

获取最新代码（从远程更新代码）

git pull

========================

登录
git pull // 输入这个命令后（其他命令应该也行），会让你输入用户名，密码
========================

切换到你的分支，并确认
git checkout branch_name // 切换到你要合并的分支，并拉取最新的代码
git status // 查看当前在
========================
查看提交记录
git log -2 查看最近2次的提交历史记录
========================
回退命令：
git reset --hard HEAD^ 回退到上个版本
git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前
git reset --hard commitID 退到/进到，指定commit的哈希码（这次提交之前或之后的提交都会回滚）

＝＝＝＝＝＝＝＝＝

sun0322

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Angular 学习之 Hello World !

==0.前言（Angular介绍）AngularJS诞生于2009年，由Misko Hevery 等人创建，是一款构建用户界面的前端框架，后为Google所收购。AngularJS是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用，通过新的属性和表达式扩展了 HTML，实现一套框架，多种平台，移动端和桌面端。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
复制链接

扫一扫