angular官网(angular和vue区别)

admin 2023年12月10日 04:00 179 0

大家好，今天给各位分享angular官网的一些知识，其中也会对angular和vue区别进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

一、腾讯QQ授权登录(asp.net + angular)

1、在前面QQ互联稍微介绍过一下，这里进行详细介绍。

2、首先打开QQ互联官网 https://connect.qq.com/index.html

3、在菜单上选择应用管理，进入后选择开发者认证，填写个人信息

4、完成开发者认证后，选择创建网站应用（提醒：同一个域名不需要创建多个应用，添加回调域即可）

5、做这步之前要先把网站大体开发好，同时部署到外网，有备案的域名，开放到80端口。

6、认证是一般选择添加一个腾讯提供的文件到网站根目录（验证开发者的权限）

7、回调域填写很重要、很重要、很重要（重要的事说三遍）

8、一般来说都是在登录页面上添加第三方登录链接的（QQ、微博、微信），所以登录页面需要做一些就修改

9、为了自定义开发，不采用官网推荐的写法，直接采用超链接方式。

10、回调页面是网站回调域里面的一个页面，需要做以下几处修改。

11、 appid在QQ互联官网>应用管理下的具体应用下可以看到，回调域网址是当前页面的外网地址（当然得先在应用回调域里配好）

12、先调用api里获取用户信息（get_user_info）接口，然后在回调函数里调用获取登录信息方法（QC.Login.getMe），成功后容易取得用户信息（常见的字段有用户开放id：openid，昵称：nickname，性别：gender，头像：figureurl_qq_2，），更多信息可通过控制台查看相关数据。

13、完成数据获取后，对数据进行相关处理，然后提交给后台，完成登录。

14、 QQ一键意义在于接入腾讯海量用户，减低网站注册门槛，实现社交关系的零成本引入和优质内容的快速传播。

二、Angular到底适合做什么类型的项目

首先Angular的背后是Google（难道这就是官网被墙的原因？），所以社区基础是不用担心的，整个生态也已经是非常的完整了，从最基本的Tutorial到StackOverflow的问题数到框架本身的剖析都有非常非常多，所以从这个角度看起来Angular应该算是上手比较容易的。

不过Angular目前的问题看起来也很明显

同样是TODOMVC的Sample，Angular完全载入用了1.1s（WebPagetest- Visual Comparison）。目前用到的基于Angular的就是Kibana，不得不说，确实挺慢的。。

Angular的2.0几乎是一个推翻重做的框架，估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话，会是一个很尴尬的时机。同样，如此大的改动似乎也反面印证了1.X并不是那么好。

React很大的特点就是“轻”，再加上VDOM这个很好的idea让React非常非常快（在上面那个测试里面0.3s左右就载入完毕）。另外React和Angular一个很大的不同就是React采用的是one-way data flow。

React的缺点嘛，大概就是现在还太新了很难说将来有没有大的API变化，目前在大的稳定的项目上采用React的，也就只知道有Yahoo的Email。所以现在很少有批评React的声音。也许不是真的就没有坑，而是那些坑还没有被踩出来而已。

还有就是React本身只是一个V而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Flux和routing相关的东西。

Angular是真正的大而全的framework，有自己一套思路，基本follow这个思路往里面填代码就OK。

React是一个简短有力的library，只负责解决某个单一的“痛点”。

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

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

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

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

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

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

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

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

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

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

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

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

<title>Angular i18n</title>

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

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

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

</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>

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

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

生成的xlf(xml)格式同上

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

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

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

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

我个人是采用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)=>{

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

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

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

function backToXLF(translatedParams){

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

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

if(translatedParams instanceof Array){

translatedParams.forEach((data)=>{

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

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

var builder= new xml2js.Builder();

var xml= builder.buildObject(xlfFormat);

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

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

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

} 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();

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},

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

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

function getTranslationsWithSystemJs(file: string){

const fileRequest= new XMLHttpRequest();

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

fileRequest.onerror= function(err){

fileRequest.onreadystatechange= function(){

if(fileRequest.readyState=== 4){

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

text= fileRequest.responseText;

const observable= Observable.of(text);

const prom= observable.toPromise();

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';

getTranslationProviders().then(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方式格式统一。

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

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

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';

export class TranslateService{

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

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

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

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

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

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

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

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

while(res&& index< depth){

return index=== depth? res: null;

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

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

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

name:'nzTranslateLocale'

export class NzTranslateLocalePipe implements PipeTransform{

constructor(private _locale: TranslateService){

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

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

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

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

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

export class AppComponent implements OnInit{

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

constructor(privete translateService: TranslateService){

文章到此结束，如果本次分享的angular官网和angular和vue区别的问题解决了您的问题，那么我们由衷的感到高兴！