SuperProductivity学习第七天-src/main.ts学习

本文介绍了如何在Angular应用中使用`platformBrowserDynamic()`启动AppModule,包括`@NgModule`装饰器的配置,服务注入的providers属性,以及如何处理环境变量。同时详细讲解了`window`对象的作用,如事件监听和ElectronAPI的扩展。
摘要由CSDN通过智能技术生成

方法

1.你的问题是什么,请描述出来,描述具体。
2.解决你的问题后,是否记住,能否记住和表达出来,不能的话就重复性记忆。
3.是否有的时候很烦躁,心很乱,思想飘絮,那就总结,今天干了点什么,要干点什么,明天干点什么,这周干了什么。
4.保持干净,环境的干净和自身和干净,比如桌子,比如衣服,带来一个好的状态

讲解src/main.ts

platformBrowserDynamic().bootstrapModule(AppModule)
使用 platformBrowserDynamic 启动 Angular 应用,从 AppModule 开始初始化和加载
AppModule来自src/app/app.module.ts
@NgModule装饰器

@NgModule({
  imports: [BrowserModule, FormsModule], // 导入需要的模块
  declarations: [AppComponent, HelloComponent], // 声明该模块内部使用的组件、指令和管道
  bootstrap: [AppComponent], // 指定启动应用时加载的组件
  providers: [UserService, ConfigService] // 新增providers属性解释
})
export class AppModule { }
  • providers:此属性用于声明本模块提供的服务(注入器中的服务实例)。在Angular中,服务是实现特定功能的类,它们可以在应用的任何地方(如组件、指令、管道等)通过依赖注入(DI)的方式被获取和使用。在providers数组中列出的服务,其实例将会在整个模块及其子模块范围内共享。这意味着在这个模块中创建的所有组件都可以访问到这些服务的同一个实例。

environment

会用 environment.prod.ts 替换 environment.ts

environment.ts
export const environment = {
  production: false,
  stage: false,
  version: pkg.version,
};
environment.prod.ts
export const environment = {
  production: true
};

Navigator

Navigator是浏览器对象模型(BOM)的一部分,提供了有关浏览器的信息和功能。

navigator.serviceWorker.register('ngsw-worker.js')

该函数用于注册一个Service Worker,使得应用可以在离线状态下仍然可以访问。
Service Worker是一种运行在浏览器后台的脚本,它可以对浏览器的网络请求进行拦截和处理,从而实现离线缓存、消息推送等功能。该函数返回一个Promise,该Promise会在Service Worker注册成功或失败时resolve。

window

你的问题在哪里?

window.addEventListener('touchmove', () => { });
想知道window对象指的哪个window对象。
// 在全局作用域下声明一个名为 ea 的属性,类型为 ElectronAPI,用于在应用中访问 Electron API。
declare global {
//扩展了全局 `Window` 接口 ,扩展
  interface Window {
    ea: ElectronAPI;
  }
}
扩展

在JavaScript和TypeScript中,window接口代表的是浏览器的全局对象,它提供了访问浏览器窗口以及与之交互的能力。这个接口包含了众多属性、方法以及事件处理程序,允许开发者控制窗口的行为、执行页面导航、操作文档对象模型(DOM)、管理定时器、处理用户输入(如鼠标点击、键盘输入和触摸事件等)以及其他与浏览器环境紧密相关的功能。

以下是一些 window 接口常见的组成部分:

属性:

location: 提供当前窗口加载的文档URL信息,并能修改该URL实现页面重定向。
history: 访问和操作浏览器历史记录,包括前进后退功能。
navigator: 包含有关浏览器的信息,例如名称、版本等。
document: 表示整个HTML文档,可通过此属性操作DOM元素。
console: 提供日志输出功能。
screen: 屏幕相关属性,如分辨率、颜色深度等。
performance: 用于获取网页性能数据的API。
方法:

open(url, name[, features]): 打开一个新的浏览器窗口或标签页。
alert(), confirm() 和 prompt(): 用户交互对话框。
setTimeout(), setInterval(): 调度函数在指定时间后执行或定期执行。
clearTimeout(), clearInterval(): 取消已设置的定时任务。
scrollTo(), scrollBy(): 控制窗口滚动位置。
close(): 关闭当前窗口。
事件监听:

如上文提到的 ‘touchmove’ 事件监听器,可以监听各种不同类型的事件,包括但不限于 ‘load’、‘unload’、‘resize’、‘scroll’、‘beforeunload’ 等。
类型扩展: 在TypeScript中,可以通过声明合并(declaration merging)的方式向 Window 接口添加自定义属性和方法,就像上面例子中的 ea: ElectronAPI。这样可以在Electron应用或其他特定环境中为 window 对象增加额外的功能。

总之,window 接口是浏览器JavaScript编程的核心入口点,涵盖了Web开发中几乎所有的全局功能。

src/main.ts 加载依赖是AppModule、src/app/app.module.ts

AppModule来自src/app/app.module.ts
1.设置默认语言为英语,切换至浏览器常用的语言
2.加载@NgModule装饰器加载的组件 AppComponent

下面将讲解 AppComponent字段文件src/app/app.component.ts

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值