目录
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 工程失败 )
7.3.全局安装 【Webpack】【Webpack-cli】
7.4.使用 npm run test 运行（出错了，没有解决 【TODO】）
7.8.app-routing.module.ts （可以设置主页）
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的博客-优快云博客
==================================
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.启动之后，浏览器访问，显示的效果
===
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的博客-优快云博客
===
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 是如何启动应用的_北冥友余的博客-优快云博客_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概述_环游记的博客-优快云博客_angular2
一个完整的Angular应用主要由六个部分构成：组件，模板，指令，服务，依赖注入和路由。
7.2.Node 的 package.json文件
Node —— package.json文件 - codejing - 博客园 (cnblogs.com)
原因：
传递项目时不传递node_modules这个文件夹
package.json文件。在这个文件中会记录项目依赖了哪些第三方模块
当别人拿到这个项目时，会根据package.json文件中所记录的依赖项去下载第三方模块。
这样项目在别人的电脑上就可以运行了。
使用
可以使用 npm install下载全部的依赖
npm install7.3.全局安装 【Webpack】【Webpack-cli】
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
运行的平台是nodejs
安装webpack的完整步骤_heyy1997的博客-优快云博客_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的博客-优快云博客
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的說明_愚者不愚、的博客-优快云博客_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
理解基本定义: 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的博客-优快云博客_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
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的博客-优快云博客
基于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的哈希码（这次提交之前或之后的提交都会回滚）
＝＝＝＝＝＝＝＝＝
扫一扫
9850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
