-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpresskit.html
1 lines (1 loc) · 69.5 KB
/
presskit.html
1
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Press kit - Angular 官方文档</title><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script>tag=document.createElement("meta"),tag.name="robots",tag.content="noindex",document.head.appendChild(tag)</script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><script nomodule="" src="generated/ie-polyfills.min.js"></script><script>function loadCustomElementsShim(){document.write('<script src="assets/js/native-shim.js"><\/script>')}function loadCustomElementsPolyfill(){document.write('<script src="assets/js/custom-elements.min.js"><\/script>')}window.customElements?loadCustomElementsShim():loadCustomElementsPolyfill()</script><link rel="stylesheet" href="styles.8619b418e94a3136fcaf.css"></head><body><aio-shell ng-version="6.0.0" class="mode-stable sidenav-open page-guide-template-syntax folder-guide view-SideNav aio-notification-hide"><div id="top-of-page"></div><mat-toolbar class="app-toolbar no-print mat-toolbar mat-primary mat-toolbar-multiple-rows" color="primary"><mat-toolbar-row class="notification-container mat-toolbar-row"><aio-notification actionurl="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4" buttontext="Learn More" expirationdate="2018-07-01" icon="insert_comment" iconlabel="Announcement" notificationid="angular-v6-announcement" class="ng-tns-c2-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><a class="content" href="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4"><mat-icon class="icon mat-icon" role="img" aria-hidden="true" aria-label="Announcement"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message">Version 6 of Angular Now Available! </span><span class="action-button">Learn More</span></a> <button class="close-button mat-icon-button" aria-label="Close" mat-icon-button=""><span class="mat-button-wrapper"><mat-icon aria-label="Dismiss notification" class="mat-icon ng-tns-c2-0" role="img" svgicon="close" aria-hidden="true"><svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button class="hamburger mat-button" mat-button="" title="Docs menu"><span class="mat-button-wrapper"><mat-icon class="mat-icon" role="img" svgicon="menu" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button> <a class="nav-link home" href="/"><img alt="Home" height="40" src="assets/images/logos/angular/[email protected]" title="Home" width="150" class="ng-star-inserted"></a><aio-top-menu class="ng-star-inserted"><ul role="navigation"><li class="ng-star-inserted"><a class="nav-link" href="/features" title="特性">特性</a></li><li class="ng-star-inserted"><a class="nav-link" href="/docs" title="文档">文档</a></li><li class="ng-star-inserted"><a class="nav-link" href="/resources" title="资源">资源</a></li><li class="ng-star-inserted"><a class="nav-link" href="/events" title="会议">会议</a></li><li class="ng-star-inserted"><a class="nav-link" href="https://blog.angular.io/" title="博客">博客</a></li><li class="ng-star-inserted"><a class="nav-link" href="/translations/cn/home" title="关于中文版">关于中文版</a></li></ul></aio-top-menu><aio-search-box class="search-container"><input aria-label="search" placeholder="搜索" type="search"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter"><img src="assets/images/logos/twitter-icon.svg"></a><a href="https://github.com/angular/angular" title="GitHub"><img src="assets/images/logos/github-icon.svg"></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container mat-drawer-transition has-floating-toc" role="main"><div class="mat-drawer-backdrop ng-star-inserted"></div><div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div><mat-sidenav class="sidenav mat-drawer mat-sidenav ng-tns-c6-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted" tabindex="-1" style="transform:translate3d(0,0,0);visibility:visible"><aio-nav-menu><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-1 collapsed" style="position:relative" href="/guide/quickstart" title="Angular 破冰" target="_self">快速上手</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-1 expanded" type="button" title="此《英雄指南》教程会带你用 TypeScript 一步步创建一个 Angular 应用。" aria-pressed="true">教程<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial" title="第一部分：《英雄指南》教程简介" target="_self">1. 简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial/toh-pt0" title="第二部分：创建应用的外壳" target="_self">2. 应用的“外壳”</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial/toh-pt1" title="第三部分：构建一个简单的英雄编辑器" target="_self">3. 英雄编辑器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial/toh-pt2" title="第四部分：构建一个主从结构的页面，用于展现英雄列表" target="_self">4. 显示英雄列表</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial/toh-pt3" title="第五部分：把主从结构的页面重构成多个组件" target="_self">5. 主从组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial/toh-pt4" title="第六部分：创建一个可复用的服务来管理英雄数据" target="_self">6. 服务</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial/toh-pt5" title="第七部分：添加 Angular 路由器，并且学习在视图之间导航" target="_self">7. 路由</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/tutorial/toh-pt6" title="第八部分：通过 HTTP 来获取并保存英雄数据" target="_self">8. HTTP</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-1 expanded selected" type="button" title="学习 Angular 的核心知识" aria-pressed="true">核心知识<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="Angular 应用的基本构造块。" aria-pressed="true">架构<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/architecture" title="Angular 应用的基本构造块" target="_self">架构概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/architecture-modules" title="关于模块。" target="_self">模块（NgModule）简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/architecture-components" title="关于组件、模板和视图。" target="_self">组件简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/architecture-services" title="关于服务与依赖注入。" target="_self">服务与 DI 简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/architecture-next-steps" title="学完基础知识之后……" target="_self">后续步骤</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded selected" type="button" title="使用数据绑定构建动态视图" aria-pressed="true">组件与模板<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self">显示数据</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 expanded selected" style="position:relative" href="/guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self">模板语法</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self">生命周期钩子</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self">组件交互</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/component-styles" title="添加专属于某个组件的样式" target="_self">组件样式</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/elements" title="把组件转换成自定义元素。" target="_self">Angular 自定义元素</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/dynamic-component-loader" title="动态加载组件" target="_self">动态组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self">属性型指令</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self">结构型指令</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self">管道</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/animations" title="Angular 动画体系指南" target="_self">动画</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="Angular 的表单" aria-pressed="true">表单<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/user-input" title="用户输入触发 DOM 事件。我们通过事件绑定来监听它们，把更新过的数据导入回我们的组件和 model。" target="_self">用户输入</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/forms" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self">模板驱动表单</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/form-validation" title="验证用户的表单输入" target="_self">表单验证</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/reactive-forms" title="使用 FormBuilder 、分组和数组创建响应式表单。" target="_self">响应式表单</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/dynamic-form" title="使用FormGroup渲染动态表单" target="_self">动态表单</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="Observable 与 RxJS" aria-pressed="true">Observable 与 RxJS<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/observables" title="" target="_self">可观察对象(Observable)</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/rx-library" title="" target="_self">RxJS 库</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/observables-in-angular" title="" target="_self">Angular 中的可观察对象</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/practical-observable-usage" title="" target="_self">用法实战</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/comparing-observables" title="" target="_self">与其它技术的比较</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/bootstrapping" title="在应用的根模块（AppModule）中告诉 Angular 如何构造并引导引用。" target="_self">引导启动</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="Angular 中的模块" aria-pressed="true">Angular 模块<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self">NgModule 简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self">JS 模块 vs NgModule</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/frequent-ngmodules" title="介绍最常用的 Angular 模块" target="_self">常用模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/module-types" title="介绍特性模块的几种类型" target="_self">特性模块的分类</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self">入口组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self">特性模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/providers" title="服务提供商与 Angular 模块" target="_self">服务提供商</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/singleton-services" title="创建单例应用" target="_self">单例应用</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self">惰性加载的特性模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/sharing-ngmodules" title="共享 Angular 模块让你的应用现代化。" target="_self">共享 Angular 模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self">NgModule API</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self">NgModule 常见问题</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="依赖注入：创建并注入各种服务。" aria-pressed="true">依赖注入<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/dependency-injection-pattern" title="学习 Angular 依赖注入系统背后的依赖注入模式" target="_self">依赖注入模式</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self">Angular 依赖注入</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/hierarchical-dependency-injection" title="Angular 的多级注入体系会建立与组件平行的注入器树。" target="_self">多级注入器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self">DI 实用技巧</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self">HttpClient</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self">路由与导航</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self">测试</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self">速查表</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-1 expanded" type="button" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="true">其它技术<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self">国际化 (i18n)</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/language-service" title="使用 Angular 语言服务来为开发提速。" target="_self">语言服务</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/security" title="Angular 应用开发中的安全技术。" target="_self">安全</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="环境准备与部署" aria-pressed="true">环境准备与部署<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/setup" title="在你自己的机器上安装 Angular QuickStart 种子，以便更快、更高效的开发。" target="_self">搭建本地开发环境</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/setup-systemjs-anatomy" title="基于 SystemJS 的本地开发环境内幕。" target="_self">搭建方式剖析</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/browser-support" title="浏览器支持与 Polyfills 指南" target="_self">浏览器支持</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/npm-packages" title="建议的 npm 包，以及如何指定包的依赖。" target="_self">npm 包</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self">TypeScript 配置</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/aot-compiler" title="学习如何使用 AOT 预编译器。" target="_self">预先（AOT）编译</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/deployment" title="学习如何部署你的 Angular 应用。" target="_self">部署</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="Angular 的 Service Worker：控制应用的资源缓存。" aria-pressed="true">Service Worker<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self">快速起步</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self">与 Service Worker 通讯</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self">生产环境下的 Service Worker</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self">Service Worker 配置</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="Angular 的发布实践，更新计划以及与更新有关的资源。" aria-pressed="true">保持最新<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/updating" title="关于如何把 Angular 应用升级到最新版的信息。" target="_self">更新你的项目</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/releases" title="Angular 的版本、发布、支持与弃用策略。" target="_self">Angular 的版本发布</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="true">从 AngularJS 升级<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self">升级步骤</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/upgrade-performance" title="Upgrade from AngularJS to Angular in a more flexible way." target="_self">Upgrading for Performance</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position:relative" href="/guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self">AngularJS 与 Angular 的概念对照</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 expanded" style="position:relative" href="/guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self">服务端渲染</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/visual-studio-2015" title="在 Visual Studio 2015 中使用快速起步中的文件" target="_self">Visual Studio 2015 快速上手</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/styleguide" title="写出 Angular 风格的程序" target="_self">风格指南</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-2 collapsed" style="position:relative" href="/guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self">词汇表</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-1 collapsed" style="position:relative" href="/api" title="关于 Angular 中类和值的详细信息。" target="_self">API 参考手册</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-1 collapsed" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank">互助问答<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-1 collapsed" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank">官方 Material 组件库<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item ng-star-inserted level-1 collapsed" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank">ng-zorro 组件库<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version"><aio-select><div class="form-select-menu"><button class="form-select-button"><strong></strong>stable (v6.1.0)</button></div></aio-select></div></mat-sidenav><div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:264px;margin-right:0"><div class="content"><header translation-origin="off" class="marketing-banner"><h1 class="banner-headline no-toc no-anchor" id="press-kit">Press kit</h1></header><article class="presskit-container"><div class="presskit-row"><div class="presskit-inner"><div><h2 translation-origin="off" id="angular-logo">ANGULAR LOGO<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#angular-logo"><i class="material-icons">link</i></a></h2><p translation-origin="off">The logo graphics available for download on this page are provided under <a class="cc-by-anchor" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. This means that you can pretty much do what you like with it including printing it on shirts, creating your own variations, or getting it tattooed over your navel.</p><p translation-origin="off">We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.</p></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/angular/angular.svg" alt="Angular" width="250" height="250"></div><div><h3 translation-origin="off" class="l-space-left-3" id="full-color-logo">FULL COLOR LOGO<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#full-color-logo"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Angular Logo (png) - <a href="/assets/images/logos/angular/angular.png" download>Download</a></span></li><li><span>Angular Logo (svg) - <a href="/assets/images/logos/angular/angular.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><div><img src="assets/images/logos/angular/angular_solidBlack.svg" width="250" height="250"></div></div><div><h3 translation-origin="off" class="l-space-left-3" id="one-color-logo">ONE COLOR LOGO<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#one-color-logo"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Angular Logo Black (png) - <a href="/assets/images/logos/angular/angular_solidBlack.png" download>Download</a></span></li><li><span>Angular Logo Black (svg) - <a href="/assets/images/logos/angular/angular_solidBlack.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><div><img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg" width="250" height="250"></div></div><div><h3 translation-origin="off" class="l-space-left-3" id="one-color-inverse-logo">ONE COLOR INVERSE LOGO<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#one-color-inverse-logo"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Angular Logo White Semi-Transparent (png) - <a href="/assets/images/logos/angular/angular_whiteTransparent.png" download>Download</a></span></li><li><span>Angular Logo Semi-Transparent (svg) - <a href="/assets/images/logos/angular/angular_whiteTransparent.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div><h2 translation-origin="off" id="brand-icons">BRAND ICONS<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#brand-icons"><i class="material-icons">link</i></a></h2></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/animations.png" alt="Animations Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="animations">ANIMATIONS<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#animations"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Animations Icon (png) - <a href="/assets/images/logos/concept-icons/animations.png" download>Download</a></span></li><li><span>Animations Icon (svg) - <a href="/assets/images/logos/concept-icons/animations.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/augury.png" alt="Augury Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="augury">AUGURY<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#augury"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Augury Icon (png) - <a href="/assets/images/logos/concept-icons/augury.png" download>Download</a></span></li><li><span>Augury Icon (svg) - <a href="/assets/images/logos/concept-icons/augury.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/cdk.png" alt="CDK Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="component-dev-kit-cdk">COMPONENT DEV KIT (CDK)<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#component-dev-kit-cdk"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>CDK Icon (png) - <a href="/assets/images/logos/concept-icons/cdk.png" download>Download</a></span></li><li><span>CDK Icon (svg) - <a href="/assets/images/logos/concept-icons/cdk.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/cli.png" alt="CLI Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="cli">CLI<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#cli"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>CLI Icon (png) - <a href="/assets/images/logos/concept-icons/cli.png" download>Download</a></span></li><li><span>CLI Icon (svg) - <a href="/assets/images/logos/concept-icons/cli.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/compiler.png" alt="Compiler Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="compiler">COMPILER<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#compiler"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Compiler Icon (png) - <a href="/assets/images/logos/concept-icons/compiler.png" download>Download</a></span></li><li><span>Compiler Icon (svg) - <a href="/assets/images/logos/concept-icons/compiler.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/components.png" alt="Components Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="web-components">WEB COMPONENTS<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#web-components"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Web Components Icon (png) - <a href="/assets/images/logos/concept-icons/components.png" download>Download</a></span></li><li><span>Web Components Icon (svg) - <a href="/assets/images/logos/concept-icons/components.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/forms.png" alt="Forms Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="forms">FORMS<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#forms"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Forms Icon (png) - <a href="/assets/images/logos/concept-icons/forms.png" download>Download</a></span></li><li><span>Forms Icon (svg) - <a href="/assets/images/logos/concept-icons/forms.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/http.png" alt="HTTP Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="http">HTTP<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#http"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>HTTP Icon (png) - <a href="/assets/images/logos/concept-icons/http.png" download>Download</a></span></li><li><span>HTTP Icon (svg) - <a href="/assets/images/logos/concept-icons/http.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/i18n.png" alt="i18n Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="i18n">i18n<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#i18n"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>HTTP Icon (png) - <a href="/assets/images/logos/concept-icons/i18n.png" download>Download</a></span></li><li><span>HTTP Icon (svg) - <a href="/assets/images/logos/concept-icons/i18n.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/karma.png" alt="Karma Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="karma">KARMA<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#karma"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Karma Icon (png) - <a href="/assets/images/logos/concept-icons/karma.png" download>Download</a></span></li><li><span>Karma Icon (svg) - <a href="/assets/images/logos/concept-icons/karma.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/labs.png" alt="Labs Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="labs">LABS<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#labs"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Labs Icon (png) - <a href="/assets/images/logos/concept-icons/labs.png" download>Download</a></span></li><li><span>Labs Icon (svg) - <a href="/assets/images/logos/concept-icons/labs.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/language-services.png" alt="Language Services Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="language-services">LANGUAGE SERVICES<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#language-services"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Language Services Icon (png) - <a href="/assets/images/logos/concept-icons/language-services.png" download>Download</a></span></li><li><span>Language Services Icon (svg) - <a href="/assets/images/logos/concept-icons/language-services.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/material.png" alt="Material Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="material">MATERIAL<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#material"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Material Icon (png) - <a href="/assets/images/logos/concept-icons/material.png" download>Download</a></span></li><li><span>Material Icon (svg) - <a href="/assets/images/logos/concept-icons/material.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/protractor.png" alt="Protractor Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="protractor">PROTRACTOR<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#protractor"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Protractor Icon (png) - <a href="/assets/images/logos/concept-icons/protractor.png" download>Download</a></span></li><li><span>Protractor Icon (svg) - <a href="/assets/images/logos/concept-icons/protractor.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/pwa.png" alt="PWA Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="pwa">PWA<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#pwa"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>PWA Icon (png) - <a href="/assets/images/logos/concept-icons/pwa.png" download>Download</a></span></li><li><span>PWA Icon (svg) - <a href="/assets/images/logos/concept-icons/pwa.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/router.png" alt="Router Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="router">ROUTER<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#router"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Router Icon (png) - <a href="/assets/images/logos/concept-icons/router.png" download>Download</a></span></li><li><span>Router Icon (svg) - <a href="/assets/images/logos/concept-icons/router.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/universal.png" alt="Universal Icon" width="186" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="universal">UNIVERSAL<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#universal"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Universal Icon (png) - <a href="/assets/images/logos/concept-icons/universal.png" download>Download</a></span></li><li><span>Universal Icon (svg) - <a href="/assets/images/logos/concept-icons/universal.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div><h2 translation-origin="off" id="concept--feature-icons">CONCEPT & FEATURE ICONS<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#concept--feature-icons"><i class="material-icons">link</i></a></h2></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/dependency-injection.png" alt="Dependency Injection Icon" width="200" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="dependency-injection">DEPENDENCY INJECTION<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#dependency-injection"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Dependency Injection Icon (png) - <a href="/assets/images/logos/concept-icons/dependency-injection.png" download>Download</a></span></li><li><span>Dependency Injection Icon (svg) - <a href="/assets/images/logos/concept-icons/dependency-injection.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/lazy-loading.png" alt="Lazy Loading Icon" width="200" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="lazy-loading">LAZY LOADING<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#lazy-loading"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Lazy Loading Icon (png) - <a href="/assets/images/logos/concept-icons/lazy-loading.png" download>Download</a></span></li><li><span>Lazy Loading Icon (svg) - <a href="/assets/images/logos/concept-icons/lazy-loading.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/libraries.png" alt="Libraries Icon" width="200" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="libraries">LIBRARIES<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#libraries"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Libraries Icon (png) - <a href="/assets/images/logos/concept-icons/libraries.png" download>Download</a></span></li><li><span>Libraries Icon (svg) - <a href="/assets/images/logos/concept-icons/libraries.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/performance.png" alt="Performance Icon" width="200" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="performance">PERFORMANCE<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#performance"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Performance Icon (png) - <a href="/assets/images/logos/concept-icons/performance.png" download>Download</a></span></li><li><span>Performance Icon (svg) - <a href="/assets/images/logos/concept-icons/performance.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="presskit-image-container"><img src="assets/images/logos/concept-icons/templates.png" alt="Templates Icon" width="200" height="200"></div><div><h3 translation-origin="off" class="l-space-left-3" id="templates">TEMPLATES<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#templates"><i class="material-icons">link</i></a></h3><ul class="l-space-left-3"><li><span>Templates Icon (png) - <a href="/assets/images/logos/concept-icons/templates.png" download>Download</a></span></li><li><span>Templates Icon (svg) - <a href="/assets/images/logos/concept-icons/templates.svg" download>Download</a></span></li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div><h2 translation-origin="off" id="press-and-media">PRESS AND MEDIA<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#press-and-media"><i class="material-icons">link</i></a></h2><p translation-origin="off">For inquiries regarding press and media please contact us at <a href="/mailto:[email protected]">[email protected]</a>.</p></div></div></div><style>div.bullets ul{list-style-type:disc!important;margin-left:1em!important}</style><div class="presskit-row"><div class="presskit-inner"><div class="bullets"><h2 translation-origin="off" id="brand-names">BRAND NAMES<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#brand-names"><i class="material-icons">link</i></a></h2><h3 translation-origin="off" id="angular">Angular<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#angular"><i class="material-icons">link</i></a></h3><p translation-origin="off">The name <b>Angular</b> represents the work and promises provided to you by the Angular team.</p><p translation-origin="off">When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.</p><h4 translation-origin="off" id="example">Example<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#example"><i class="material-icons">link</i></a></h4><p translation-origin="off"><b>Version v4.1 now available</b> - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!</p><h4 translation-origin="off" id="example-1">Example<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#example-1"><i class="material-icons">link</i></a></h4><p translation-origin="off"><b>Correct: </b>"New <code>*<a href="/api/common/NgIf" class="code-anchor">ngIf</a></code> capabilities—new in version 4.0 is the ability to ..."</p><p translation-origin="off"><b style="color:red">Incorrect: </b>"New <code>*<a href="/api/common/NgIf" class="code-anchor">ngIf</a></code> capabilities in Angular 4—Angular 4 introduces the ability to ..."</p><p translation-origin="off"><b>Reasoning</b></p><p translation-origin="off">By not using “Angular 4” in the title, the content still feels applicable and useful after version 5, 6, 7 have been released, as the syntax is unlikely to change in the short and medium term.</p><h3 translation-origin="off" id="angularjs">AngularJS<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#angularjs"><i class="material-icons">link</i></a></h3><p translation-origin="off"><b>AngularJS</b> is the v1.x series of work and promises provided by the Angular team.</p><h4 translation-origin="off" id="examples">Examples<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#examples"><i class="material-icons">link</i></a></h4><ol><li>AngularJS is one of the most used framework on the web today (by number of projects).</li><li>Millions of developers are currently building with AngularJS.</li><li>Developers are beginning to upgrade from AngularJS to Angular.</li><li>I’m upgrading my application from AngularJS to Angular.</li><li>I'm using AngularJS Material on this project.</li></ol><p translation-origin="off">AngularJS projects should use the <a href="/assets/images/logos/angularjs/AngularJS-Shield.svg" title="AngularJS logo">original AngularJS logo</a> / icon, and not the Angular icon.</p><img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px" height="128" width="128"><h3 translation-origin="off" id="angular-material">Angular Material<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#angular-material"><i class="material-icons">link</i></a></h3><p translation-origin="off">This is the work being performed by the Angular team to provide Material Design components for Angular applications.</p><h3 translation-origin="off" id="angularjs-material">AngularJS Material<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#angularjs-material"><i class="material-icons">link</i></a></h3><p translation-origin="off">This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.</p><h3 translation-origin="off" id="3rd-party-projects">3rd Party Projects<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#3rd-party-projects"><i class="material-icons">link</i></a></h3><p translation-origin="off"><b>X for Angular</b></p><p translation-origin="off">3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to events or meetup groups.</p><p translation-origin="off">Developers should avoid using Angular version numbers in project names, as this will artificially limit their projects by tying them to a point in time of Angular, or will require renaming over time.</p><p translation-origin="off">Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.</p><p translation-origin="off"><b>Do not use</b></p><ul><li><code>ng2-</code></li><li><code>angular2-</code></li></ul><p translation-origin="off"><b>OK to use</b></p><ul><li><code>ng-</code></li><li><code>angular-</code></li></ul><p translation-origin="off">As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with components and directives provided by the Angular team.</p><h4 translation-origin="off" id="examples-1">Examples<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#examples-1"><i class="material-icons">link</i></a></h4><ul><li>The ng-BE team just launched <code>ng-health</code> to help developers track their own health.</li><li>I’m going to use NativeScript for Angular to take advantage of native UI widgets.</li><li><code>ReallyCoolTool</code> for Angular.</li><li><code>ReallyCoolTool</code> for AngularJS.</li></ul></div></div></div><div class="presskit-row"><div class="presskit-inner"><div class="bullets"><h2 translation-origin="off" id="terms-we-use">TERMS WE USE<a title="Link to this heading" class="header-link" aria-hidden="true" href="/presskit#terms-we-use"><i class="material-icons">link</i></a></h2><p translation-origin="off">We often use terms that are not part of our brand, but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified.</p><ul><li>Ahead of Time compilation (AOT)</li><li>Just in Time compilation (JIT)</li></ul></div></div></div></article></div></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted" style="max-height:34485px"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="6.0.0"></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="/about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="/resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="/presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="/events" title="Post issues and suggestions on github.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="/contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li></ul></div></div><p>Powered by Google ©2010-2018. 代码授权方式：<a href="/license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：6.1.1-local+sha.fe5eef45e.</p></aio-footer></footer></aio-shell><noscript><div class="background-sky hero"></div><section id="intro"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 & 桌面</div></div></section><h2 style="color:red;text-align:center;margin-top:-50px"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime.8449e895f8a924ee0f85.js"></script><script src="polyfills.e0d2c3e02a83a3cfb1a1.js"></script><script src="main.6f07a93e787bf7b7efab.js"></script></body></html>