angular，angular momentum

编程之家2026-06-29733次浏览

大家好，angular相信很多的网友都不是很明白，包括angular momentum也是一样，不过没有关系，接下来就来为大家分享关于angular和angular momentum的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

Angular是什么

Angular是一种用于创建单一应用程序界面的前端框架，它有许多核心功能例如数据绑定，服务，指令以及依赖注入等等。它具有模块功能强大，拥有自定义命令等优点

【推荐课程：Angular教程】

Angular的介绍

AngularJS由Misko Hevery等人于2009年创建，后来呗谷歌所收购。它是一款优秀的前端JS框架被应用多多种产品中去。它不仅是一个理念先进的前端开发框架，还是一种端对端的解决方案。它遵循架构设计中的MVC模式，提倡数据与逻辑处理组件的松耦合。AngularJS通过指令技术实现了对HTML的自然扩展，以及通过编译技术实现了数据模型与展现视图的双向自动同步，减轻了复杂的DOM操作。另外它也对前端的自动化测试技术提供了良好的支持。

Angular的核心功能

数据绑定:表示模型和视图组件之间数据的自动同步。

控制器:表示Javascript函数绑定到特定的范围。

服务: Angular内配有多个内置服务，例如$http可作为一个XMLHttpRequest请求。但是这些单一对象在应用程序只可以实例化一次。

过滤器:表示从一个数组的条目中选择一个子集，并返回一个新的数组。

指令:指令是关于DOM元素标记。可以被用来创建作为新的自定义部件的自定义HTML标签。

模板:指的是符合从控制器和模型信息中呈现的视图。可以是单个文件或者是一个页面上的多个视图

路由:用于切换视图

模型视图:在中并未真正实现MVC设计模式，而是更接近于MVVM（模型-视图-视图-模型）设计模式

依赖注入: Angular有一个内置的依赖注入子系统，开发人员可以通过使用应用程序从而更便捷的开发，理解和测试。

Angular的优缺点：

Angular的优点：模板功能强大，是一个较为完善的前端框架，具有自定义命令可以多次使用。ng模块化引入了Java的相关知识跟规则很容易写出可复用的代码

Angular的缺点：入门简单，但是深入了解还是很难的。另外由Angular编写的应用程序是不安全的，服务器端身份验证和授权是必须用来保证应用程序的安全。

使用Angular如何实现国际化(详细教程)

本篇文章主要介绍了Angular项目实现国际化的方法，现在分享给大家，也给大家做个参考。

正如angular官网所说，项目国际化是一件具有挑战性，需要多方面的努力、持久的奉献和决心的任务。

本文将介绍angular项目的国际化方案，涉及静态文件(html)和ts文件文案的国际化。

背景Angular: 5.0

Angular Cli: 1.6.1(1.5.x也可以)

NG-ZORRO: 0.6.8

Angular i18ni18n模板翻译流程有四个阶段：

在组件模板中标记需要翻译的静态文本信息(即打上i18n标签)。

Angular的i18n工具将标记的信息提取到一个行业标准的翻译源文件(如.xlf文件,使用ng xi18n)。

翻译人员编辑该文件，翻译提取出来的文本信息到目标语言，并将该文件还给你(需要翻译人员接入，本文采用将xlf文件转为json格式文件输出，最终将json文件转换回xlf格式文件)。

Angular编译器导入完成翻译的文件，使用翻译的文本替换原始信息，并生成新的目标语言版本的应用程序。

你可以为每种支持的语言构建和部署单独的项目版本，仅需替换翻译后的xlf文件即可。

如何在模板文件中使用？

i18n提供了几种使用方式，还专门为单复数提供了翻译方式（个人没有使用，感觉不太方便）。接下来以一个单独的html文件来介绍几种使用方法。

<!DOCTYPE html>

<html>

<head>

<title>Angular i18n</title>

</head>

<body>

<h1 i18n="Site Header|An introduction header for i18n Project@@stTitle">Angular国际化项目</h1>

国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。

<ng-container i18n=@@agLetGo>让我们现在开始吧!</ng-container>朋友!

</body>

</html>上述代码展示了几种i18n的使用方式：

1、使用i18n属性标记（可添加上说明性文案，格式如：title|description@@id，title和description可帮助翻译人员更好地理解文案含义，是否添加取决于自身项目情况）

可以在静态标签上直接打上i18n的tag，如

生成的xlf(xml)字段格式为

<trans-unit id="agDescription" datatype="html">

<source>国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。</source>

<context-group purpose="location">

<context context-type="linenumber">linenum</context>

</context-group>

</trans-unit>2、为title添加i18n属性

对于html标签属性，同样可以添加i18n，如

生成的xlf(xml)格式同上

3、翻译文本，而不必创建元素

我们有时候会出现一句话多个断句情况，如果每次都添加span、label这些元素包裹的话，可能严重影响页面布局，这时候我们可以使用ng-container来包裹需要翻译的文案。

<ng-container i18n=@@agLetGo>让我们现在开始吧!</ng-container>朋友!

在页面显示为

LET'S GO朋友!

* ng-container变为了注释块,这样做不会影响页面布局(尤其是应用了style样式的情况)

打上标签后，我们只要执行ng xi18n即可自动创建出xlf文件，通常为message.xlf，如需自定义，可自行前往 Angular CLI官网查看。

XLF与JSON转换

xlf转json方法

我个人是采用xml2js库进行操作，简单代码如下：

const fs= require('fs');

xml2js= require('xml2js');

var parser= new xml2js.Parser();

fs.readFile(fileName,'utf8',(err, data)=>{

parser.parseString(data, function(err, result){

//读取新文件全部需要翻译的数据，并对比已翻译的进行取舍，具体转换成的格式结构可自行查看

result['xliff']['file'][0]['body'][0]['trans-unit'].forEach((item)=>{

var itemFormat={

"key": item['$']['id'],

"value": item['source'][0]

};

//执行相关操作，key-value形式是为了统一翻译文件结构，可按需定义

})

});

});json转xlf方法

function backToXLF(translatedParams){

//文件格式可自行参考angular.cn官网的例子

var xlfFormat={

"xliff":{

"$":{

"version":"1.2",

"xmlns":"urn:oasis:names:tc:xliff:document:1.2"

"file": [

{

"$":{

"source-language":"en",

"datatype":"plaintext",

"original":"ng2.template"

"body": [

{

"trans-unit": []

}

]

}

]

}

};

if(translatedParams instanceof Array){

//获取原始名称

translatedParams.forEach((data)=>{

var tmp={

"$":{

"id": data.key,

"datatype":"html"

"source": [i18nItemsOrigin[data.key]],//这里的i18nItemsOrigin是json格式，属性名为key值，表示原始文案

"target": [data.value]

};

//数组,json项

xlfFormat['xliff']['file'][0]['body'][0]['trans-unit'].push(tmp);

});

}

var builder= new xml2js.Builder();

var xml= builder.buildObject(xlfFormat);

return xml;

}这样提取文案信息和转换翻译后的文件就完成了，接下来我们需要把翻译好的文案应用到项目中去。

部署翻译文件src目录下新建locale文件夹，将翻译转换后的demo.en-US.xlf文件存在改目录下

app文件夹下新建i18n-providers.ts

import{

LOCALE_ID,

MissingTranslationStrategy,

StaticProvider,

TRANSLATIONS,

TRANSLATIONS_FORMAT

} from'@angular/core';

import{ CompilerConfig} from'@angular/compiler';

import{ Observable} from'rxjs/Observable';

import{ LOCALE_LANGUAGE} from'./app.config';//自行定义配置位置

export function getTranslationProviders(): Promise<StaticProvider[]>{

// get the locale string from the document

const locale= LOCALE_LANGUAGE.toString();

// return no providers

const noProviders: StaticProvider[]= [];

// no locale or zh-CN: no translation providers

if(!locale|| locale==='zh-CN'){

return Promise.resolve(noProviders);

}

// Ex:'locale/demo.zh-MO.xlf`

const translationFile= `./locale/demo.${locale}.xlf`;

return getTranslationsWithSystemJs(translationFile)

.then((translations: string)=> [

{ provide: TRANSLATIONS, useValue: translations},

{ provide: TRANSLATIONS_FORMAT, useValue:'xlf'},

{ provide: LOCALE_ID, useValue: locale},

{

provide: CompilerConfig,

useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error})

}

]).catch(()=> noProviders);// ignore if file not found

}

declare var System: any;

//获取locale文件

function getTranslationsWithSystemJs(file: string){

let text='';

const fileRequest= new XMLHttpRequest();

fileRequest.open('GET', file, false);

fileRequest.onerror= function(err){

console.log(err);

};

fileRequest.onreadystatechange= function(){

if(fileRequest.readyState=== 4){

if(fileRequest.status=== 200|| fileRequest.status=== 0){

text= fileRequest.responseText;

}

};

fileRequest.send();

const observable= Observable.of(text);

const prom= observable.toPromise();

return prom;

}main.ts文件修改为

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

import{ platformBrowserDynamic} from'@angular/platform-browser-dynamic';

import{ AppModule} from'./app/app.module';

import{ environment} from'./environments/environment';

import{ getTranslationProviders} from'./app/i18n-providers';

if(environment.production){

enableProdMode();

}

getTranslationProviders().then(providers=>{

const options={ providers};

platformBrowserDynamic().bootstrapModule(AppModule, options)

.catch(err=> console.log(err));

});别忘了将locale目录添加到.angular-cli.json里，来单独打包。

这样我们对静态文案的翻译工作基本已经完成了，但是有些动态文案如ts文件里的文案或者第三方框架属性该如何翻译呢？下面会介绍针对 ts文件和 NG-ZORRO框架实现动态文案翻译的方案。

ts文件文案和NG-ZORRO框架文案翻译具体思路

通过Pipe调用Service方法，根据对应的唯一id值匹配json对象里的翻译结果，进而返回渲染到前端，参考于NG-ZORRO框架的国际化实现方案。

首先我们定义一下json翻译对象的格式,全部为三层结构,动态变量需要按%%包裹，这样做的原因是和项目结构相关联，也便于后期和i18n方式格式统一。

{

"app":{

"base":{

"hello":"文件文案",

"userCount":"一共%num%人"

}

}格式已定，我们继续定义Service处理方式

这里复用NG-ZORRO的国际化方案,可以简化我们的开发,有兴趣的可以参看一下其源码。

*** TranslateService***

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

//引入语言配置和国际化文件文案对象

import{ LOCALE_LANGUAGE} from'../app.config';

import{ enUS} from'../locales/demo.en-US';

import{ zhCN} from'../locales/stream.zh-CN';

@Injectable()

export class TranslateService{

private _locale= LOCALE_LANGUAGE.toString()==='zh-CN'? zhCN: enUS;

constructor(){

}

// path为app.base.hello格式的字符串,这里按json层级取匹配改变量

translate(path: string, data?: any): string{

let content= this._getObjectPath(this._locale, path) as string;

if(typeof content==='string'){

if(data){

Object.keys(data).forEach((key)=> content= content.replace(new RegExp(`%${key}%`,'g'), data[key]));

}

return content;

}

return path;

}

private _getObjectPath(obj: object, path: string): string| object{

let res= obj;

const paths= path.split('.');

const depth= paths.length;

let index= 0;

while(res&& index< depth){

res= res[paths[index++]];

}

return index=== depth? res: null;

}

}这样，只需要在Pipe中调用Service的translate方法即可

*** NzTranslateLocalePipe***

import{ Pipe, PipeTransform} from'@angular/core';

import{ TranslateService} from'../services/translate.service';

@Pipe({

name:'nzTranslateLocale'

})

export class NzTranslateLocalePipe implements PipeTransform{

constructor(private _locale: TranslateService){

}

transform(path: string, keyValue?: object): string{

return this._locale.translate(path, keyValue);

}

}好了，现在我们处理逻辑已经完全结束了，下面介绍一下如何使用

*** NG-ZORRO控件***

<nz-input [nzPlaceHolder]="'app.base.hello'|nzTranslateLocale"></nz-input>//无动态参数

<nz-popconfirm [nzTitle]="'app.base.userCount'|nzTranslateLocale:{num:users.length}"...>

...//有动态参数

</nz-popconfirm>

*** ts文件***

export class AppComponent implements OnInit{

demoTitle='';

users= ['Jack','Johnson','Lucy'];

constructor(privete translateService: TranslateService){

}

angular怎么读

angular音标：['æŋɡjələ]有棱角的。

Angular是一种Web应用程序框架，使用TypeScript语言编写，并由Google开发和维护。它是一个基于组件化开发、模块化设计的框架，主要用于开发单页应用程序（SPA）和移动应用程序。下面是对于Angular名称的读法的介绍。

1、Angular的名称来源于"角度"（"Angle"）这个词，因为在开发Web应用程序时，我们需要以不同的角度来看待组成Web应用程序的不同部分，例如：用户界面、业务逻辑和数据访问等。

2、Angular在中国大陆地区通常被称为"架构"（"Jià Gòu"），这是一个按照中文语言转译得来的名称。整个称呼的读音为"ān jú lā/架构”。其实，这种称呼并不是很准确，因为架构（Architecture）这个词跟Angular所提供的技术框架之间并没有太大的关联。

3、全球范围内，Angular的官方名称通常被读作"ang- yoo- ler"或"ang-ghula"，这是按照单词中字母的发音所得来的名称。根据这个名称，Angular应该被读作"Ang"+"Yoo"+"Ler"或"Ang"+"Ghula"。但需要注意的是，这个名称一般只被Angular的开发者、教程作者以及向非本地英语使用者介绍该框架的人所使用。

Angular是一种用于开发现代Web应用程序的成熟框架，其名称来源于"角度"这个词，并且在中国大陆地区通常被称为"架构"。不同地区的人有不同的读法，但可以根据单词字母的发音大致理解其正确的读法。

angular的近义词：

Angular是一款由Google开发的流行的框架，用于构建单页Web应用程序(SPA)。这个框架基于TypeScript编写，并采用模块化构建，可以简化前端开发流程，提高开发效率。以下是Angular的近义词：

1、 AngularJS：这是Angular的前身，它是一款由Google推出的JavaScript框架，用于开发动态Web应用程序。AngularJS由于其良好的性能和易用性，广受开发人员的欢迎。

2、React：React是由Facebook开发的JavaScript库，用于构建用户界面。类似于Angular，React也旨在简化Web应用程序的开发流程。React采用组件化开发，具有高度的灵活性和可重用性。

3、Vue.js：Vue.js是一款由尤雨溪开发的JavaScript框架，同样用于构建单页Web应用程序。Vue.js易于学习和使用，并具有高度的可定制性，可满足不同开发人员的需求。

4、Ember.js：Ember.js是一款开源的JavaScript框架，用于开发复杂的单页Web应用程序。它采用MVVM(Model-View-ViewModel)架构模式，具有强大的模板系统和丰富的扩展性。

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！

征信安全控件下载安装？安全控件下载安装析构函数有参数吗(什么是析构函数)