Angular CLI详解
Angular CLI 是什么?
Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程。它允许你做以下这些事情:
- 创建一个新的 Angular 应用程序
- 运行带有
LiveReload
支持的开发服务器,以便在开发过程中预览应用程序 - 添加功能到现有的 Angular 应用程序
- 运行应用程序的单元测试
- 运行应用程序的端到端 (E2E) 测试
- 构建应用程序
在详细介绍 Angular CLI 之前,我们先来看一下如何安装 Angular CLI。
前提条件
在使用 Angular CLI 之前,你必须确保系统中 Node.js 的版本高于 6.9.0
且 npm 的版本高于 3.0.0
。
若你尚未安装 Node.js,你可以访问 Node.js 官网,然后根据你所用的操作系统选择对应的安装方式。
若你本机已经安装 Node.js 和 npm,你可以通过运行以下命令,确认一下当前环境信息:
$ node - v # 显示当前Node.js的版本
$ npm -v # 显示当前npm的版本
当你本机 Node.js 环境确认无误后,你可以在命令行使用 npm 安装 TypeScript:
$ npm install -g typescript # 安装最新的TypeScript稳定版
安装 Angular CLI
若要安装 Angular CLI,只需在命令行中运行以下命令:
$ npm install -g @angular/cli
验证是否成功安装 Angular CLI,可在命令行运行:
$ ng version
在我本机运行上述命令,则输出以下结果:
@angular/cli: 1.1.1
node: 6.10.2
os: darwin x64
安装完 Angular CLI,接下来我们来使用它创建新的应用程序。
创建新的 Angular 应用程序
Angular CLI 为我们提供了两种方式,用于创建新的应用程序:
- ng init - 在当前目录创建新的应用程序
- ng new - 创建新的目录,然后在新建的目录中运行
ng init
命令
因此 ng new
与 ng init
的功能是相似的,只是 ng new
会为我们创建新的目录。
假设你还未创建新的目录,那么我们需要使用 ng new
命令来创建新的项目:
$ ng new my-app
当运行上面的命令后,将发生以下事情:
- 新的
my-app
目录被创建 - 应用程序相关的源文件和目录将会被创建
- 应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
- 自动配置项目中的 TypeScript 开发环境
- 自动配置 Karma 单元测试环境
- 自动配置 Protractor (end-to-end) 测试环境
- 创建
environment
相关的文件并初始化为默认的设置
此时 my-app
目录中 Angular 应用程序的目录结构如下:
.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
可用选项
--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'
, 用于设置源文件目录的名称--style
: string, 默认为'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
, 表示当创建新的应用程序时,使用内联模板
除此之外,你可以在本机上运行 ng generate --help
查看更多的可用选项。接下来让我们来看一下如何运行应用程序。
运行应用程序
首先进入使用 Angular CLI 创建的应用程序目录,例如:
$ cd my-app
然后运行:
$ ng serve
当运行上面的命令后,将发生以下事情:
- Angular CLI 从
.angular-cli.json
文件中加载配置信息 - Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
- Angular CLI 启动 webpack dev server 本地开发服务器,默认的地址是
localhost:4200
若要停止应用程序,你可以使用 ctrl+c
快捷键。
添加功能到现有的 Angular 应用程序
你可以使用 ng generate
命令,为已有的 Angular 应用程序添加新的功能。
ng generate class my-new-class
: 新建 classng 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 generate
命令与其它的子命令一样,也有快捷键,具体如下:
ng g cl my-new-class
: 新建 classng 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
: 新建服务
添加新的类
为了添加类名为 UserProfile
类,我们可以运行:
$ ng generate class user-profile
Angular CLI 会自动调整文件名和类名的字母大小写,因此以下命令具有相同的效果:
$ ng generate class user-profile
$ ng generate class userProfile
$ ng generate class UserProfile
运行上述命令后,在幕后将发生以下事情:
- 在
src/app
目录下将创建一个user-profile.ts
文件,该文件导出一个名为UserProfile
的类
可用选项
--spec
: boolean, 默认为false
, 表示是否生成单元测试相关的spec
文件
使用示例
# Generate class 'UserProfile'
$ ng generate class user-profile# Generate class 'UserProfile' with unit test
$ ng generate class user-profile --spec
添加新的组件
若想创建一个选择器为 app-site-header
的组件,则可以运行:
$ ng generate component site-header
installing componentcreate src/app/site-header/site-header.component.csscreate src/app/site-header/site-header.component.htmlcreate src/app/site-header/site-header.component.spec.tscreate src/app/site-header/site-header.component.tsupdate src/app/app.module.ts
Angular CLI 将自动调整文件名和组件名称的字母大小写,并将前缀应用于组件选择器,因此以下命令具有相同的效果:
$ ng generate component site-header
$ ng generate component siteHeader
$ ng generate component SiteHeader
运行上述命令后,在幕后将发生以下事情:
-
src/app/site-header
目录被创建 -
site-header
目录下会生成以下四个文件:- CSS 样式文件,用于设置组件的样式
- HTML 模板文件,用于设置组件的模板
- TypeScript 文件,里面包含一个
SiteHeaderComponent
组件类和组件的元信息 - Spec 文件,包含组件相关的测试用例
-
SiteHeaderComponent
组件会被自动地添加到最近模块@NgModule
装饰器的declarations
属性中。
可用选项
--flat
: boolean, 默认为false
, 表示在src/app
目录下生成组件而不是在src/app/site-header
目录中--inline-template
: boolean, 默认为false
, 表示使用内联模板而不是使用独立的模板文件--inline-style
: boolean, 默认为false
, 表示使用内联样式而不是使用独立的样式文件--prefix
: boolean, 默认为true
, 使用.angular-cli.json
配置的前缀作为组件选择器的前缀--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件--view-encapsulation
: string, 用于设置组件的视图封装策略--change-detection
: string, 用于设置组件的变化检测策略
使用示例
# Generate component 'site-header'
$ ng generate component site-header# Generate component 'site-header' with inline template and inline styles
$ ng generate component site-header --inline-template --inline-style
添加新的指令
若想创建一个选择器为 appAdminLink
的指令,则可以运行:
$ ng generate directive admin-link
installing directivecreate src/app/admin-link.directive.spec.tscreate src/app/admin-link.directive.tsupdate src/app/app.module.ts
Angular CLI 将自动调整文件名和指令名称的字母大小写,并将前缀应用于指令选择器,因此以下命令具有相同的效果:
$ ng generate directive admin-link
$ ng generate directive adminLink
$ ng generate directive AdminLink
运行上述命令后,在幕后将发生以下事情:
src/app/admin-link.directive.ts
文件被创建,该文件导出一个名为AdminLinkDirective
且选择器为appAdminLink
的指令src/app/admin-link.directive.spec.ts
文件被创建,该文件包含指令相关的单元测试信息AdminLinkDirective
指令会被自动地添加到最近模块@NgModule
装饰器的declarations
属性中。
可用选项
--flat
: boolean, 默认为true
, 表示在src/app
目录中生成指令而不是在src/app/admin-link
目录下--prefix
: boolean, 默认为true
, 使用.angular-cli.json
配置的前缀作为指令选择器的前缀--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件
使用示例
# Generate directive 'adminLink'
$ ng generate directive admin-link# Generate directive 'adminLink' without unit test
$ ng generate directive admin-link --spec=false
添加新的枚举
若想创建一个名为 Direction
的枚举类 ,则可以运行:
$ ng generate enum direction
installing enumcreate src/app/direction.enum.ts
Angular CLI 会自动调整文件名和枚举名称的字母大小写,因此以下命令具有相同的效果:
$ ng generate enum direction
$ ng generate enum Direction
运行上述命令后,在幕后将发生以下事情:
src/app.direction.enum.ts
文件被创建,该文件导出名为Direction
的枚举
添加新的模块
若想创建一个新的模块 ,则可以运行:
$ ng generate module admin
installing modulecreate src/app/admin/admin.module.ts
运行上述命令后,在幕后将发生以下事情:
src/app/admin
目录被创建- 在
src/app/admin/admin.module.ts
文件中,AdminModule
模块被创建
需要注意的是,新增的模块不会被自动添加到 src/app/app.module.ts
文件中的 AppModule
模块中,用户可以根据具体需求导入对应的模块。
若要在其它模块中导入刚才新增的模块,可以在 @NgModule
的 imports
属性中设定该新增的模块。具体示例如下:
import { AdminModule } from './admin/admin.module';@NgModule({// ...imports: [AdminModule]
})
export class AppModule { }
可用选项
--routing
: boolean, 默认为false
, 表示生成一个额外包含路由信息的AdminRoutingModule
模块,且该模块会被自动地导入到新建的模块中--spec
: boolean, 默认为false
, 表示添加src/app/admin/admin.module.spec.ts
单元测试文件
使用示例
# Add module 'admin'
$ ng generate module admin# Add module 'admin' with additional module containing routing information
$ ng generate module admin --routing
添加新的管道
若想创建一个名为 convertToEuro
的管道 ,则可以运行:
$ ng generate pipe convert-to-euro
installing pipecreate src/app/convert-to-euro.pipe.spec.tscreate src/app/convert-to-euro.pipe.tsupdate src/app/app.module.ts
Angular CLI 会自动调整文件名和管道名称的字母大小写,因此以下命令具有相同的效果:
$ ng generate pipe convert-to-euro
$ ng generate pipe convertToEuro
$ ng generate pipe ConvertToEuro
运行上述命令后,在幕后将发生以下事情:
src/app/convert-to-euro.pipe.ts
文件被创建,该文件导出一个名为ConvertToEuroPipe
的管道类src/app/convert-to-euro.pipe.spec.ts
文件被创建,该文件包含管道相关的单元测试信息CovertToEuroPipe
管道会被自动地添加到最近模块@NgModule
装饰器的declarations
属性中。
可用选项
--flat
: boolean, 默认为true
, 表示在src/app
目录中生成管道而不是在src/app/convert-to-euro
目录下--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件
使用示例
# Generate pipe 'convertToEuro' with spec and in /src/app directory
$ ng generate pipe convert-to-euro# Generate pipe 'convertToEuro' without spec and in /src/app/convert-to-euro directory
$ ng generate pipe convert-to-euro --spec=false --flat=false
添加新的服务
若想创建一个名为 BackendApiService
的服务 ,则可以运行:
$ ng generate service backend-api
installing servicecreate src/app/backend-api.service.spec.tscreate src/app/backend-api.service.tsWARNING Service is generated but not provided, it must be provided to be used
Angular CLI 会自动调整文件名和服务名称的字母大小写,因此以下命令具有相同的效果:
$ ng generate service backend-api
$ ng generate service backendApi
$ ng generate service BackendApi
运行上述命令后,在幕后将发生以下事情:
src/app/backend-api.service
文件被创建,该文件导出一个名为BackendApiService
的服务类src/app/back-api.service.spec.ts
文件被创建,该文件包含管道相关的单元测试信息
需要注意的是,Angular CLI 会提醒用户服务已成功创建,但尚未配置该服务。用户可以根据具体需求在模块或组件的 providers
属性中配置该新建的服务。具体示例如下:
import { BackendApiService } from './backend-api.service';@NgModule({// ...providers: [BackendApiService],bootstrap: [AppComponent]
})
可用选项
--flat
: boolean, 默认为true
, 表示在src/app
目录中生成服务而不是在src/app/backend-api
目录下--spec
: boolean, 默认为true
, 表示生成包含单元测试的 spec 文件
使用示例
# Generate service with DI token 'BackendApiService' in /src/app directory
$ ng generate service backend-api# Generate service with DI token 'BackendApiService' in /src/app/backend-api directory
$ ng generate service backend-api --flat=false
运行单元测试
Angular CLI 在新建项目的时候,自动为我们集成了 Karma test runner 测试框架。当添加新的功能时,我们可以利用 --spec
选项,告诉 Angular CLI 让它为我们生成功能相关的 .spec.ts
测试单元测试文件。
spec
文件在 src
目录中相应功能的同一目录下创建,这使得我们可以在使用功能时轻松找到它们。
若要运行单元测试,则可以运行:
$ ng test
此时在你的控制台将输出以下信息:
$ ng test
[karma]: No captured browser, open http://localhost:9876/
[karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome
运行上述命令后,在幕后将发生以下事情:
- Angular CLI 从
.angular-cli.json
文件中加载配置信息 - Angular CLI 基于
.angular-cli.json
文件中的Karma
相关的配置信息,运行Karma
。Karma 的配置文件默认在根目录下,文件名为karma.conf.js
。 - Karma 打开配置中设定的浏览器,默认是
Chrome
。 - Karma 然后指示浏览器 (Chrome) 使用 Karma 配置中指定的测试框架运行
src/test.ts
。默认情况下,采用的是Jasmine
框架。创建应用程序时,会自动创建src/test.ts
文件。它预先配置为加载和配置测试Angular 应用程序所需的代码,并运行src
目录中以.spec.ts
结尾的所有文件。 - Karma 将测试结果报告给控制台。
- Karma 监听
src
目录下的文件的变化,然后自动运行单元测试。
运行 End-to-End 测试
若要运行 e2e 测试,则可以运行:
$ ng e2e
构建应用程序
若要构建应用程序,则可以运行:
$ ng build
运行上述命令后,在幕后将发生以下事情:
- Angular CLI 从
.angular-cli.json
文件中加载配置信息 - Angular CLI 运行
Webpack
打包项目相关的 JavaScript 与 CSS 文件 - 打包后的资源,将被输出到配置文件中
outDir
所指定的目录,默认是输出到dist
目录
可用选项
--aot
: 开启ahead-of-time
编译--base-href
: string, 设置index.html
文件中<base>
元素的链接地址--environment
: string, 设置所使用的环境,默认为dev
--output-path
: string, 设置输出的路径--target
: string, 设置所使用的环境,默认为development
--watch
: boolean, 默认为false
, 开启watch
模式,监听文件异动并自动重新构建
Targets
指定 target
的值,会影响到构建流程的运行方式。它的可选值:
- development: 默认的模式,意味着不进行代码压缩或混淆
- production: 压缩和混淆代码
若需使用 production
模式,构建应用程序,则可以运行:
$ ng build --target=production
Environments
Environments
让你能够自定义应用程序行为。
你可以在 .angular-cli.json
文件中定义自己的 environments
文件。默认的是:
- dev:
environments/environment.ts
export const environment = {production: false
};
- prod:
environments/environment.prod.ts
export const environment = {production: true
};
需要注意的是,构建流程默认使用 dev
环境。
如果指定了不同的环境,构建过程将使用相应的环境:
# Uses environments/environment.ts
$ ng build# Also uses environments/environment.ts
$ ng build --environment=dev
$ ng build --env=dev# Uses environments/environment.prod.ts
$ ng build --environment=prod
$ ng build --env=prod
正如你在 src/main.ts
文件中看到的,通过导入 ./environments/environment
文件,我们就可以访问到 environment
相关的配置信息,具体如下:
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);
自定义构建流程
从 v1.0 开始,Angular CLI 提供了一个命令,用于将你的应用程序与 Angular CLI 分离。
默认情况下,Angular CLI 为您管理基础 Webpack 配置,因此您无需处理其复杂性。如果你希望手动配置webpack,并且您不再需要在Angular应用程序中使用Angular CLI,则可以运行:
$ ng eject
此时在你的控制台将输出以下信息:
==========================================================================================
Ejection was successful.To run your builds, you now need to do the following commands:- "npm run build" to build.- "npm run test" to run unit tests.- "npm start" to serve the app using webpack-dev-server.- "npm run e2e" to run protractor.Running the equivalent CLI commands will result in an error.==========================================================================================
Some packages were added. Please run "npm install".
运行上述命令后,在幕后将发生以下事情:
ejected: true
的属性被添加到.angular-cli.json
文件中- 在应用程序的根目录下将生成独立的
webpack.config.js
文件,因此你可以在没有使用Angular CLI
的环境下构建项目 package.json
中的构建脚本会被更新,因此你可以运行npm run build
来构建项目package.json
中的测试脚本会被更新,因此你可以运行npm run test
来运行单元测试package.json
中的启动脚本会被更新,因此你可以运行npm run start
或npm start
来启动开发服务器package.json
中的e2e
脚本会被更新,因此你可以运行npm run e2e
来运行End-to-End
测试
把应用程序与 Angular CLI 分离后,你就可以根据自己的要求自定义 Webpack
的配置。
文章转载自 Angular CLI 终极指南
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- angular2后台管理系统
angular2-4对angular1的改变是颠覆性的,增加了npm, typescript,等目前前端开发流行的元素,但坑多 github上开源项目:https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/tree/master/Angular2_CLI_Full_Project …...
2024/4/17 5:23:00 - 升级 AngularJS 至 Angular
Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in DepthUpgrade ShellTwo Approaches to Upgrading Angular ApplicationsManaging Routers and URLLazy Loading AngularJS Applications深入理解 NgUpgrade 原理 Angular 应用由组…...
2024/4/14 5:32:29 - Angular 笔记 一、起步
input绑定: 要先在app.Module中导入FormModule,否则会Console会报错:Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ import { FormsModule } from angular/forms; NgModule({ imports: [...FormsModule,....绑…...
2024/4/17 15:53:48 - (四)关于ng-app自动bootstrap框架
之前博客 (三)ng-app的使用困惑和angularJS框架的自动加载 提出了使用ng-app指令的情况。之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质。JS错误,最直观的表现方式就是:弹出一个非常不…...
2024/4/20 6:44:36 - Angular学习(1)——Angular模块化
Angular模块化 模块是组织应用和使用外部库扩展应用的最佳途径 NgModule 把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。 模块还可以把服务加到应用中。 这些服务可能是内部开发的(比如你自己写的&…...
2024/4/20 6:00:53 - Angular前端 + Django后端 + Keycloak 实现SSO功能
目录 前言: 前端Angular集成Keycloak: 1.使用github开源的的库 keycloak-angular: 安装Keycloak Angular和keycloak客户端keycloak-js库: Angular中设置Keycloak: Keycloak登录: 2.自己实现集成Keyc…...
2024/4/19 16:50:51 - angular和vue的对比学习之路
vue-ng打开vue的中文官网一段关于vue的描述 HTML 模板 JSON 数据,再创建一个 Vue 实例,就这么简单。 那我么再看下angular中文网 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要…...
2024/4/17 5:23:04 - 学习笔记Vue(三) —— 双向数据绑定机制(与angular对比)
一、Angular中的双向数据绑定(脏检查机制): AngularJs 为 scope 模型上设置了一个 监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch,用来…...
2024/4/14 5:33:00 - angular react vue 浏览器兼容情况汇总
一、逻辑层 框架 (1)angular Angular早在1.3版本就抛弃了对ie8的支持。 (2)react React 早在0.14.x 版本就抛弃了对ie8的支持。 (3)vue Vue就没打算支持ie8 二、UI层 框架 (1)bootst…...
2024/4/14 5:33:05 - angular和vue的差别
vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。vue的双向邦定是基于ES5 中的 getter/setter来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查&a…...
2024/4/14 5:32:55 - 前端框架React,Angular和Vue详解
前端框架React,Angular和Vue详解1. 三种架构概述2. Vue概述2.1 Vue简介2.2 Vue起源2.3 Vue特点3. React简介3.1 React概述3.2 React起源3.3 React特点4. Angular概述4.1 Angular简介4.2 Angular起源4.3 Angular特点5. 三种框架对比分析5.1 开源性质5.2 核心发展5.3 …...
2024/4/14 5:33:15 - 快速入门Angular或Vue前端环境配置和项目运行
本文档仅介绍Angular和Vue项目的环境安装到项目运行,具体相关api请到相应官网进行学习 第一步:建议安装编译器:vscode(也可以使用idea等其他编译器) 安装地址:https://code.visualstudio.com/Download 设置中文语言环…...
2024/4/14 5:33:00 - 前端集成—Angular 1.0项目iframe嵌入Vue项目
文章目录angular代码修改 加入集成模块: app/app.jsiframe集成的样式: /vue-integration/_vue-integration.scssiframe集成的html代码 : /vue-integration/vue-integration.htmliframe集成的控制器代码 : /vue-integration/vue-in…...
2024/4/14 5:33:00 - Vue\React\Angular的区别
1. 基本概念 Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。 React 是一个用于构建用户界面的 JavaScript 库 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是ÿ…...
2024/4/19 13:19:59 - KgoUI(1) 之 技术选型angular 和 vue
框架源代码:码云 最近几年前端技术发生了很大的变化,新技术,新开发模式层出不穷。之前divcssjs 包打天下的时代已经不复存在了。说到前端技术目前最火的莫过于三大mvvm框架 vue (vue并不算是mvvm框架,应该说是个m…...
2024/4/14 5:33:20 - Angular vs React vs Vue
文章目录前言一、Introduce1. Start2. License3. Popularity4. Job market二、Community and development三、Library Size四、Learn curve五、Use1. Basic Use2. Debug3 Css 动画4 Create project5 Dependencies六、Performance1. DOM manipulation2. Startup time3. Memory a…...
2024/4/14 5:32:55 - Angular父子组件通信及和vue的对比
文章目录一、父向子组件传递父组件给子组件传值-Input1 传入数据2 子组件引入Input模块3 子组件获取父组件数据父组件向子组件传递方法父组件向子组件传递自身二、父组件获取子组件使用ViewChild获得子组件本身三、子组件通过output触发父组件的方法1. 子组件引入output和event…...
2024/4/20 5:17:30 - angular和vue还有jquery的区别
angularjs简单介绍和特点 首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组…...
2024/4/14 5:33:05 - 对vue与angular和react的对比
概念:vue是一个构建数据驱动的web界面的渐进式框架,它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 vue对比angular 1、vue在设计之初参考了很多angularjs的思想 2、vue相对比与angular比较简单 3、 vue相对比与angular比较小巧&…...
2024/4/19 7:50:37 - 一份全面的React、Angular和Vue.js比较指南
对于开发人员而言,选择技术栈有时是一件相当棘手的任务。因为您需要综合考虑诸如:预算、时间、应用大小、最终用户、项目目标、以及可用资源等多方面因素。 无论您是初学者、开发人员、自由职业者还是项目架构师,只有详细了解了每种框架的优…...
2024/4/14 5:32:55
最新文章
- 矩阵混乱度(熵值)代码计算
1、先回顾下熵值的数据公式: 2、jax.numpy代码 注意的点:熵值计算的输入的必须是归一化的正值 import jax.numpy as jnp import jax def _entroy(probs):log_probs jnp.log2(jnp.maximum(1.0e-30, probs))mean_sum_plogp jnp.mean(- jnp.sum(log_pro…...
2024/4/20 7:40:23 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 钉钉与金蝶云星空对接集成获取流程实例(宜搭)打通收款退款新增
钉钉与金蝶云星空对接集成获取流程实例(宜搭)打通收款退款新增 接入系统:钉钉 钉钉(DingTalk)是阿里巴巴集团专为中国企业打造的免费沟通和协同的多端平台,提供PC版,Web版和手机版,有…...
2024/4/19 5:41:59 - 巨控科技新品发布:全方位升级,引领智能控制新纪元
标签: #巨控科技 #智能控制 #新品发布 #GRM560 #OPC560 #NET400 在智能控制领域,巨控科技始终以其前沿技术和创新产品引领着市场的潮流。近日,巨控科技再次以其行业领先的研发实力,推出了三大系列的新产品,旨在为各行各业提供更…...
2024/4/16 10:23:07 - 算法四十天-删除排序链表中的重复元素
删除排序链表中的重复元素 题目要求 解题思路 一次遍历 由于给定的链表是排好序的,因此重复的元素在链表中的出现的位置是连续的,因此我们只需要对链表进行一次遍历,就可以删除重复的元素。 具体地,我们从指针cur指向链表的头节…...
2024/4/17 22:38:46 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/19 14:24:02 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/19 18:20:22 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/19 11:57:31 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/19 11:57:31 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/19 11:57:52 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/19 11:57:53 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/19 11:58:14 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/19 11:58:20 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/19 23:45:49 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/19 11:58:39 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/19 11:58:51 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/20 3:12:02 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/19 11:59:15 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/19 11:59:23 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/19 11:59:44 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/19 11:59:48 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/19 12:00:06 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/19 16:57:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/19 12:00:25 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/19 12:00:40 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57