关于AngularJS 与 Angular 概念的快速参考link

In Angular, the ngClass directive works similarly. It includes/excludes CSS classes based on an expression.

在 Angular 中，ngClass 指令用类似的方式工作。 它根据一个表达式包含/排除某些 CSS 类。

In the first example, the active class is applied to the element if isActive is true.

在第一个例子中，如果 isActive 为真，则 active 类被应用到那个元素上。

You can specify multiple classes, as shown in the second example.

就像第二个例子中所展示的那样，可以同时指定多个类。

Angular also has class binding, which is a good way to add or remove a single class, as shown in the third example.

Angular 还有类绑定，它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。

For more information see the Attribute, class, and style bindings section of the Template Syntax page.

要了解更多信息，参见模板语法中的属性、CSS 类和样式绑定部分。

ng-clicklink In AngularJS, the ng-click directive allows you to specify custom behavior when an element is clicked.

在 AngularJS 中，ng-click 指令指定当元素被点击时的自定义行为。

In the first example, when the user clicks the button, the toggleImage() method in the controller referenced by the vm controller as alias is executed.

在第一个例子中，如果用户点击了这个按钮，那么控制器的 toggleImage() 方法就会被执行，这个控制器是被 controller as 中指定的 vm 别名所引用的。

The second example demonstrates passing in the $event object, which provides details about the event to the controller.

第二个例子演示了传入 $event 对象，它提供了事件的详情，并被传到控制器。

Bind to the click eventlink绑定到 click 事件link

AngularJS event-based directives do not exist in Angular. Rather, define one-way binding from the template view to the component using event binding.

AngularJS 基于事件的指令在 Angular 中已经不存在了。 不过，可以使用事件绑定来定义从模板视图到组件的单向数据绑定。

For event binding, define the name of the target event within parenthesis and specify a template statement, in quotes, to the right of the equals. Angular then sets up an event handler for the target event. When the event is raised, the handler executes the template statement.

要使用事件绑定，把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。 然后 Angular 为这个目标时间设置事件处理器。当事件被触发时，这个处理器就会执行模板语句。

In the first example, when a user clicks the button, the toggleImage() method in the associated component is executed.

在第一个例子中，当用户点击此按钮时，相关组件中的 toggleImage() 方法就被执行了。

The second example demonstrates passing in the $event object, which provides details about the event to the component.

第二个例子演示了如何传入 $event 对象，它为组件提供了此事件的详情。

For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.

要查看 DOM 事件的列表，请参见网络事件。

For more information, see the Event binding section of the Template Syntax page.

要了解更多，请参见模板语法中的事件绑定部分。

ng-controllerlink

In AngularJS, the ng-controller directive attaches a controller to the view. Using the ng-controller (or defining the controller as part of the routing) ties the view to the controller code associated with that view.

在 AngularJS 中，ng-controller 指令把控制器附加到视图上。 使用 ng-controller(或把控制器定义为路由的一部分)把视图及其控制器的代码联系在一起。

Component decoratorlink组件装饰器link@Component({ selector: 'app-movie-list', templateUrl: './movie-list.component.html', styleUrls: [ './movie-list.component.css' ], })

In Angular, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator.

在 Angular 中，模板不用再指定它相关的控制器。 反过来，组件会在组件类的装饰器中指定与它相关的模板。

For more information, see Architecture Overview.

要了解更多，请参见架构概览。

ng-hidelinkIn AngularJS, the ng-hide directive shows or hides the associated HTML element based on an expression. For more information, see ng-show.

在 AngularJS 中，ng-hide 指令会基于一个表达式显示或隐藏相关的 HTML 元素。 参见ng-show了解更多。

Bind to the hidden propertylink绑定到 hidden 属性linkIn Angular, you use property binding; there is no built-in hide directive. For more information, see ng-show.

在 Angular 中，并没有一个内置的 hide 指令，可以改用属性绑定。 参见ng-show了解更多。

ng-hreflinkAngular DocsThe ng-href directive allows AngularJS to preprocess the href property so that it can replace the binding expression with the appropriate URL before the browser fetches from that URL.

ng-href 指令允许 AngularJS 对 href 属性进行预处理，以便它能在浏览器获取那个 URL 之前，使用一个返回适当 URL 的绑定表达式替换它。

In AngularJS, the ng-href is often used to activate a route as part of navigation.

在 AngularJS 中，ng-href 通常用来作为导航的一部分，激活一个路由。

MoviesRouting is handled differently in Angular.

路由在 Angular 中的处理方式不同。

Bind to the href propertylink绑定到 href 属性linkAngular Docs

Angular uses property binding; there is no built-in href directive. Place the element's href property in square brackets and set it to a quoted template expression.

在 Angular 中，并没有内置的 href 指令，改用属性绑定。 把元素的 href 属性放在方括号中，并把它设成一个引号中的模板表达式。

For more information see the Property binding section of the Template Syntax page.

要了解属性绑定的更多知识，参见模板语法。

In Angular, href is no longer used for routing. Routing uses routerLink, as shown in the following example.

在 Angular 中，href 不再用作路由，而是改用第三个例子中所展示的 routerLink 指令。

Movies

For more information on routing, see the RouterLink binding section of the Routing & Navigation page.

要了解关于路由的更多信息，请参见路由与导航的RouterLink 绑定部分。

ng-iflink

In AngularJS, the ng-if directive removes or recreates a portion of the DOM, based on an expression. If the expression is false, the element is removed from the DOM.

在 AngularJS 中，ng-if 指令会根据一个表达式来移除或重建 DOM 中的一部分。如果表达式为假，元素就会被从 DOM 中移除。

In this example, the

element is removed from the DOM unless the movies array has a length greater than zero.

在这个例子中，除非 movies 数组的长度大于 0，否则

元素就会被从 DOM 中移除。

*ngIflink

The *ngIf directive in Angular works the same as the ng-if directive in AngularJS. It removes or recreates a portion of the DOM based on an expression.

Angular 中的 *ngIf 指令与 AngularJS 中的 ng-if 指令一样， 它根据表达式的值移除或重建 DOM 中的一部分。

In this example, the

element is removed from the DOM unless the movies array has a length.

在这个例子中，除非 movies 数组的长度大于 0，否则

元素就会被从 DOM 中移除。

The (*) before ngIf is required in this example. For more information, see Structural Directives.

在这个例子中 ngIf 前的星号(*)是必须的。 要了解更多信息，参见结构型指令。

ng-modellinkIn AngularJS, the ng-model directive binds a form control to a property in the controller associated with the template. This provides two-way binding, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.

在 Angular1 中，ng-model 指令把一个表单控件绑定到了模板相关控制器的一个属性上。 这提供了双向绑定功能，因此，任何对视图中值的改动，都会同步到模型中，对模型的改动，也会同步到视图中。

ngModellink

In Angular, two-way binding is denoted by [()], descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view) and event binding (from the view to the component), thereby providing two-way binding.

在 Angular 中，双向绑定使用[()]标记出来，它被形象的比作“盒子中的香蕉”。 这种语法是一个简写形式，用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件)，就成了双向绑定。

For more information on two-way binding with ngModel, see the NgModel—Two-way binding to form elements with [(ngModel)]section of the Template Syntax page.

要了解使用 ngModel 进行双向绑定的更多知识，参见模板语法中的NgModel—使用 [(ngModel)] 进行双向绑定部分。

ng-repeatlink

In AngularJS, the ng-repeat directive repeats the associated DOM element for each item in the specified collection.

在 Angular1 中，ng-repeat 指令会为指定集合中的每一个条目重复渲染相关的 DOM 元素。

In this example, the table row (

) element repeats for each movie object in the collection of movies.

在这个例子中，对 movies 集合中的每一个 movie 对象重复渲染了这个表格行元素(

)。

*ngForlink

The *ngFor directive in Angular is similar to the ng-repeat directive in AngularJS. It repeats the associated DOM element for each item in the specified collection. More accurately, it turns the defined element (

in this example) and its contents into a template and uses that template to instantiate a view for each item in the list.

Angular 中的 *ngFor 指令类似于 AngularJS 中的 ng-repeat 指令。 它为指定集合中的每一个条目重复渲染了相关的 DOM 元素。 更准确的说，它把被界定出来的元素(这个例子中是

)及其内容转成了一个模板，并使用那个模板来为列表中的每一个条目实例化一个视图。

Notice the other syntax differences: The (*) before ngFor is required; the let keyword identifies movie as an input variable; the list preposition is of, not in.

请注意其它语法上的差异： 在 ngFor 前面的星号(*)是必须的；let 关键字把 movie 标记成一个输入变量；列表中使用的介词是 of，而不再是 in。

For more information, see Structural Directives.

要了解更多信息，参见结构性指令。

ng-showlink

Your favorite hero is: {{vm.favoriteHero}}

In AngularJS, the ng-show directive shows or hides the associated DOM element, based on an expression.

在 AngularJS 中，ng-show 指令根据一个表达式来显示或隐藏相关的 DOM 元素。

In this example, the

element is shown if the favoriteHero variable is truthy.

在这个例子中，如果 favoriteHero 变量为真，

元素就会显示出来。

Bind to the hidden propertylink绑定到 hidden 属性link

Your favorite hero is: {{favoriteHero}}

Angular uses property binding; there is no built-in show directive. For hiding and showing elements, bind to the HTML hidden property.

在 Angular 中，并没有内置的 show 指令，可以改用属性绑定。 要隐藏或显示一个元素，绑定到它的 hidden 属性就可以了。

To conditionally display an element, place the element's hidden property in square brackets and set it to a quoted template expression that evaluates to the opposite of show.

要想有条件的显示一个元素，就把该元素的 hidden 属性放到一个方括号里，并且把它设置为引号中的模板表达式，它的结果应该是与显示时相反的值。

In this example, the

element is hidden if the favoriteHero variable is not truthy.

在这个例子中，如果 favoriteHero 变量不是真值，

元素就会被隐藏。

For more information on property binding, see the Property binding section of the Template Syntax page.

要了解属性绑定的更多知识，参见模板语法中的属性绑定部分。

ng-srclinkThe ng-src directive allows AngularJS to preprocess the src property so that it can replace the binding expression with the appropriate URL before the browser fetches from that URL.

ng-src 指令允许 AngularJS 对 src 属性进行预处理，以便它能够在浏览器获取此 URL 之前，用一个返回适当 URL 的绑定表达式替换它。

Bind to the src propertylink绑定到 src 属性link

Angular uses property binding; there is no built-in src directive. Place the src property in square brackets and set it to a quoted template expression.

在 Angular 中，并没有一个内置的 src 指令，可以使用属性绑定。 把 src 属性放到方括号中，并且把它设为一个引号中的绑定表达式。

For more information on property binding, see the Property binding section of the Template Syntax page.

要了解属性绑定的更多知识，参见模板语法中的属性绑定部分。

ng-stylelink

In AngularJS, the ng-style directive sets a CSS style on an HTML element based on an expression. That expression is often a key-value control object with each key of the object defined as a CSS property, and each value defined as an expression that evaluates to a value appropriate for the style.

在 AngularJS 中，ng-style 指令根据一个绑定表达式设置一个 HTML 元素的 CSS 样式。 该表达式通常是一个“键-值”形式的控制对象，对象的每个键都是一个 CSS 属性，每个值都是一个能计算为此样式的合适值的表达式。

In the example, the color style is set to the current value of the colorPreference variable.

在这个例子中，color 样式被设置为 colorPreference 变量的当前值。

ngStylelink

In Angular, the ngStyle directive works similarly. It sets a CSS style on an HTML element based on an expression.

在 Angular 中，ngStyle 指令的工作方式与此类似。它根据一个表达式设置 HTML 元素上的 CSS 样式。

In the first example, the color style is set to the current value of the colorPreference variable.

在第一个例子中，color 样式被设置成了 colorPreference 变量的当前值。

Angular also has style binding, which is good way to set a single style. This is shown in the second example.

Angular 还有样式绑定语法，它是单独设置一个样式的好方法。它展示在第二个例子中。

For more information on style binding, see the Style binding section of the Template Syntax page.

要了解样式绑定的更多知识，参见模板语法中的样式绑定部分。

For more information on the ngStyle directive, see NgStyle section of the Template Syntax page.

要了解关于 ngStyle 指令的更多知识，参见模板语法中的NgStyle部分。

ng-switchlink

Excellent choice!

No movie, sorry!

Please enter your favorite hero.

In AngularJS, the ng-switch directive swaps the contents of an element by selecting one of the templates based on the current value of an expression.

在 Angular1 中，ng-switch 指令根据一个表达式的当前值把元素的内容替换成几个模板之一。

In this example, if favoriteHero is not set, the template displays "Please enter ...". If favoriteHero is set, it checks the movie hero by calling a controller method. If that method returns true, the template displays "Excellent choice!". If that methods returns false, the template displays "No movie, sorry!".

在这个例子中，如果 favoriteHero 没有设置，则模板显示“Please enter ...”。 如果 favoriteHero 设置过，它就会通过调用一个控制其方法来检查它是否电影里的英雄。 如果该方法返回 true，模板就会显示“Excellent choice!”。 如果该方法返回 false，该模板就会显示“No movie, sorry!”。

ngSwitchlink

Excellent choice!

No movie, sorry!

Please enter your favorite hero.

In Angular, the ngSwitch directive works similarly. It displays an element whose *ngSwitchCase matches the current ngSwitch expression value.

在 Angular 中，ngSwitch 指令的工作方式与此类似。 它会显示那个与 ngSwitch 表达式的当前值匹配的那个 *ngSwitchCase 所在的元素。

In this example, if favoriteHero is not set, the ngSwitch value is null and *ngSwitchDefault displays, "Please enter ...". If favoriteHero is set, the app checks the movie hero by calling a component method. If that method returns true, the app selects *ngSwitchCase="true" and displays: "Excellent choice!" If that methods returns false, the app selects *ngSwitchCase="false" and displays: "No movie, sorry!"

在这个例子中，如果 favoriteHero 没有设置，则 ngSwitch 的值是 null， *ngSwitchDefault 中会显示 “Please enter ...”。 如果设置了 favoriteHero，应用就会通过调用一个组件方法来检查电影英雄。 如果该方法返回 true，就会显示 “Excellent choice!”。 如果该方法返回 false，就会显示 “No movie, sorry!”。

The (*) before ngSwitchCase and ngSwitchDefault is required in this example.

在这个例子中，ngSwitchCase 和 ngSwitchDefault 前面的星号(*)是必须的。

For more information, see The NgSwitch directives section of the Template Syntax page.

要了解更多信息，参见模板语法中的NgSwitch 指令部分。

Filters/pipeslink过滤器/管道linkAngular pipes provide formatting and transformation for data in the template, similar to AngularJS filters. Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see Pipes.

Angular 中的管道为模板提供了格式化和数据转换功能，类似于 AngularJS 中的过滤器。 AngularJS 中的很多内置过滤器在 Angular 中都有对应的管道。 要了解管道的更多信息，参见Pipes。

AngularJS

Angular

currencylink

Formats a number as currency.

把一个数字格式化成货币。

currencylink

The Angular currency pipe is similar although some of the parameters have changed.

Angular 的 currency 管道和 1 中很相似，只是有些参数变化了。

datelink

Formats a date to a string based on the requested format.

基于要求的格式把日期格式化成字符串。

datelink

The Angular date pipe is similar.

Angular 的 date 管道和它很相似。

filterlink

Selects a subset of items from the defined collection, based on the filter criteria.

基于过滤条件从指定的集合中选取出一个子集。

nonelink没了linkFor performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.

在 Angular 中，出于性能的考虑，并没有一个类似的管道。 过滤逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中，可以考虑构建一个自定义管道。

jsonlink

{{movie | json}}

Converts a JavaScript object into a JSON string. This is useful for debugging.

把一个 JavaScript 对象转换成一个 JSON 字符串。这对调试很有用。

jsonlink

{{movie | json}}

The Angular json pipe does the same thing.

Angular 的 json 管道做完全相同的事。

limitTolink

Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0).

从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。

slicelink

The SlicePipe does the same thing but the order of the parameters is reversed, in keeping with the JavaScript Slice method. The first parameter is the starting index; the second is the limit. As in AngularJS, coding this operation within the component instead could improve performance.

SlicePipe 做同样的事，但是两个参数的顺序是相反的，以便于 JavaScript 中的 slice 方法保持一致。 第一个参数是起始索引号，第二个参数是限制的数量。 和 AngularJS 中一样，如果们改用组件中的代码实现此操作，性能将会提升。

lowercaselink

Converts the string to lowercase.

把该字符串转成小写形式。

lowercaselink

The Angular lowercase pipe does the same thing.

Angular 的 lowercase 管道和 1 中的功能完全相同。

numberlink

Formats a number as text.

把数字格式化为文本。

numberlink

The Angular number pipe is similar. It provides more functionality when defining the decimal places, as shown in the second example above.

Angular 的 number 管道很相似。 但在指定小数点位置时，它提供了更多的功能，如第二个范例所示。

Angular also has a percent pipe, which formats a number as a local percentage as shown in the third example.

Angular 还有一个 percent 管道，它把一个数组格式化为本地化的(local)百分比格式，如第三个范例所示。

orderBylink

Displays the collection in the order specified by the expression. In this example, the movie title orders the movieList.

使用表达式中所指定的方式对集合进行排序。 在这个例子中，movieList 被根据 movie 的 title 排序了。

nonelink没了linkFor performance reasons, no comparable pipe exists in Angular. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.

在 Angular 中，出于性能的考虑，并没有一个类似的管道。 排序逻辑应该在组件中用代码实现。 如果它将被复用在几个模板中，可以考虑构建一个自定义管道。

Modules/controllers/componentslink模块/控制器/组件linkIn both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.

无论在 AngularJS 还是 Angular 中，你都要借助“模块”来把应用拆分成一些紧密相关的功能块。

In AngularJS, you write the code that provides the model and the methods for the view in a controller. In Angular, you build a component.

在 AngularJS 中，你要在控制器中写代码，来为视图提供模型和方法。 在 Angular 中，你要创建组件。

Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript.

因为很多 AngularJS 的代码是用 JavaScript 写的，所以在 AngularJS 列显示的是 JavaScript 代码，而 Angular 列显示的是 TypeScript 代码。

AngularJS

Angular

IIFElink(function () { ... }());In AngularJS, an immediately invoked function expression (or IIFE) around controller code keeps it out of the global namespace.

在 AngularJS 中，用立即调用的函数表达式(IIFE)来包裹控制器代码可以让控制器代码不会污染全局命名空间。

nonelink没了linkThis is a nonissue in Angular because ES 2015 modules handle the namespacing for you.

在 Angular 中不用担心这个问题，因为使用 ES 2015 的模块，模块会替你处理命名空间问题。

For more information on modules, see the Modules section of the Architecture Overview.

要了解关于模块的更多信息，参见架构概览中的模块部分。

Angular moduleslinkAngular 模块linkangular.module("movieHunter", ["ngRoute"]);In AngularJS, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon.

在 AngularJS 中，Angular 模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。

NgModuleslinkimport { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

NgModules, defined with the NgModule decorator, serve the same purpose:

Angular 的模块用 NgModule 装饰器进行定义，有如下用途：

* imports: specifies the list of other modules that this module depends upon

imports: 指定当前模块依赖的其它模块列表

* declaration: keeps track of your components, pipes, and directives.

declaration: 用于记录组件、管道和指令。

For more information on modules, see NgModules.

要了解关于模块的更多知识，参见NgModules。

Controller registrationlink控制器注册linkangular .module("movieHunter") .controller("MovieListCtrl", ["movieService", MovieListCtrl]);AngularJS has code in each controller that looks up an appropriate Angular module and registers the controller with that module.

在 AngularJS 中，在每个控制器中都有一些代码，用于找到合适的 Angular 模块并把该控制器注册进去。

The first argument is the controller name. The second argument defines the string names of all dependencies injected into this controller, and a reference to the controller function.

第一个参数是控制器的名称，第二个参数定义了所有将注入到该控制器的依赖的字符串名称，以及一个到控制器函数的引用。

Component decoratorlink组件装饰器link@Component({ selector: 'app-movie-list', templateUrl: './movie-list.component.html', styleUrls: [ './movie-list.component.css' ], })

Angular adds a decorator to the component class to provide any required metadata. The @Component decorator declares that the class is a component and provides metadata about that component such as its selector (or tag) and its template.

Angular 会往组件类上添加了一个装饰器，以提供所需的任何元数据。 @Component 装饰器把该类声明为组件，并提供了关于该组件的元数据，比如它的选择器(或标签)和模板。

This is how you associate a template with logic, which is defined in the component class.

这就是把模板关联到代码的方式，它定义在组件类中。

For more information, see the Components section of the Architecture Overview page.

要了解关于组件的更多信息，参见架构概览中的组件部分。

Controller functionlink控制器函数linkfunction MovieListCtrl(movieService) { }In AngularJS, you write the code for the model and methods in a controller function.

在 Angular1 中，你在控制器函数中编写模型和方法的代码。

Component classlink组件类linkexport class MovieListComponent { }

In Angular, you create a component class.

在 Angular 中，你要创建组件类。

NOTE: If you are using TypeScript with AngularJS, you must use the export keyword to export the component class.

注意：如果你正在用 TypeScript 写 AngularJS，那么必须用 export 关键字来导出组件类。

For more information, see the Components section of the Architecture Overview page.

要了解关于组件的更多信息，参见架构概览中的组件部分。

Dependency injectionlink依赖注入linkMovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { }In AngularJS, you pass in any dependencies as controller function arguments. This example injects a MovieService.

在 AngularJS 中，你把所有依赖都作为控制器函数的参数。 这个例子注入了一个 MovieService。

To guard against minification problems, tell Angular explicitly that it should inject an instance of the MovieService in the first parameter.

为了防止在最小化时出现问题，第一个参数明确告诉 Angular 它应该注入一个 MovieService 的实例。

Dependency injectionlink依赖注入linkconstructor(movieService: MovieService) { }

In Angular, you pass in dependencies as arguments to the component class constructor. This example injects a MovieService. The first parameter's TypeScript type tells Angular what to inject, even after minification.

在 Angular 中，你要把依赖作为组件构造函数的参数传入。 这个例子注入了一个 MovieService。 即使在最小化之后，第一个参数的 TypeScript 类型也会告诉 Angular 它该注入什么。

For more information, see the Dependency injection section of the Architecture Overview.

要了解关于依赖注入的更多信息，参见架构概览中的依赖注入部分。

Style sheetslink样式表linkStyle sheets give your application a nice look. In AngularJS, you specify the style sheets for your entire application. As the application grows over time, the styles for the many parts of the application merge, which can cause unexpected results. In Angular, you can still define style sheets for your entire application. But now you can also encapsulate a style sheet within a specific component.

样式表让你的应用程序看起来更漂亮。 在 AngularJS 中，你要为整个应用程序指定样式表。 随着应用程序的不断成长，为各个部分指定的样式会被合并，导致无法预计的后果。 在 Angular 中，你仍然要为整个应用程序定义样式，不过现在也可以把样式表封装在特定的组件中。

AngularJS

Angular

Link taglinkLink 标签linkAngularJS, uses a link tag in the head section of the index.html file to define the styles for the application.

AngularJS 在 index.html 的 head 区使用 link 标签来为应用程序定义样式。

Styles configurationlink样式配置link"styles": [ "styles.css" ],

With the Angular CLI, you can configure your global styles in the angular.json file. You can rename the extension to .scss to use sass.

使用 Angular CLI，你可以在 angular.json 文件中配置全局样式。 也可以把扩展名改为 .scss 来使用 sass。

StyleUrlslinkIn Angular, you can use the styles or styleUrls property of the @Component metadata to define a style sheet for a particular component.

在 Angular 中，你可以在 @Component 的元数据中使用 styles 或 styleUrls 属性来为一个特定的组件定义样式表。

styleUrls: [ './movie-list.component.css' ],

This allows you to set appropriate styles for individual components that won’t leak into other parts of the application.

这让你可以为各个组件设置合适的样式，而不用担心它被泄漏到程序中的其它部分。

兽神之叹难度等级扩充 两顿饭看出军统三剑客性格与结局，沈醉之母告诫：徐远举不可得罪也不可深交

最近发表

• LOL游戏读条慢但运行流畅：解决加载缓慢问题，游戏过程不卡顿的技巧分享
• 鹦鹉多久成年？了解不同品种的成长周期与特点
• CF手游 AWM-游骑兵评测 超强瞄准远近通吃
• 分析哪些足球比赛水位相对稳定且可靠的因素及其影响分析
• 你知道，普通人锻炼身体的办法，有哪些吗？
• 6542是什么药
• 使用截图工具捕获截图
• 苹果不会下架微信，但iPhone 16首销受挫已成定局？
• 别再一张一张的保存Word图片了，效率太低！教你2招，批量搞定！
• 中国入选世界杯(中国参加世界杯是哪一年)

友情链接

{{movie.price | currency}}	{{movie.price | currency:'USD':true}}	{{movie.releaseDate | date}}	{{movie.releaseDate | date}}
{{movie.title | lowercase}}	{{movie.title | lowercase}}	{{movie.starRating | number}}	{{movie.starRating | number}}	{{movie.starRating | number:'1.1-2'}}	{{movie.approvalRating | percent: '1.0-2'}}