|
AngularJS
|
Angular
|
ng-app
<body ng-app="movieHunter">
应用的启动过程被称为引导。
虽然可以从代码中引导 Angular 应用， 但很多应用都是通过 ng-app 指令进行声明式引导的，只要给它一个应用模块的名字(movieHunter)就可以了。
|
引导
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
import { 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 { }
Angular 没有引导指令。 总是要通过显式调用一个 bootstrap 函数，并传入应用模块的名字(AppComponent)来启动应用。
|
ng-class
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,
shazam: isImportant}">
在 AngularJS 中，ng-class 指令会基于一个表达式来包含/排除某些 CSS 类。该表达式通常是一个“键-值”型的控制对象， 对象中的每一个键代表一个 CSS 类名，每一个值定义为一个返回布尔值的模板表达式。
在第一个例子中，如果 isActive 为真，则 active 类被应用到那个元素上。
就像第二个例子中所展示的那样，可以同时指定多个类。
|
ngClass
<div [ngClass]="{'active': isActive}">
<div [ngClass]="{'active': isActive,
'shazam': isImportant}">
<div [class.active]="isActive">
在 Angular 中，ngClass 指令用类似的方式工作。 它根据一个表达式包含/排除某些 CSS 类。
在第一个例子中，如果 isActive 为真，则 active 类被应用到那个元素上。
就像第二个例子中所展示的那样，可以同时指定多个类。
Angular 还有类绑定，它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。
|
ng-click
<button ng-click="vm.toggleImage()">
<button ng-click="vm.toggleImage($event)">
在 AngularJS 中，ng-click 指令指定当元素被点击时的自定义行为。
在第一个例子中，如果用户点击了这个按钮，那么控制器的 toggleImage() 方法就会被执行，这个控制器是被 controller as 中指定的 vm 别名所引用的。
第二个例子演示了传入 $event 对象，它提供了事件的详情，并被传到控制器。
|
绑定到 click 事件
<button (click)="toggleImage()">
<button (click)="toggleImage($event)">
AngularJS 基于事件的指令在 Angular 中已经不存在了。 不过，可以使用事件绑定来定义从模板视图到组件的单向数据绑定。
要使用事件绑定，把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。 然后 Angular 为这个目标时间设置事件处理器。当事件被触发时，这个处理器就会执行模板语句。
在第一个例子中，当用户点击此按钮时，相关组件中的 toggleImage() 方法就被执行了。
第二个例子演示了如何传入 $event 对象，它为组件提供了此事件的详情。
|
ng-controller
<div ng-controller="MovieListCtrl as vm">
在 AngularJS 中，ng-controller 指令把控制器附加到视图上。 使用 ng-controller(或把控制器定义为路由的一部分)把视图及其控制器的代码联系在一起。
|
组件装饰器
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: [ './movie-list.component.css' ],
})
在 Angular 中，模板不用再指定它相关的控制器。 反过来，组件会在组件类的装饰器中指定与它相关的模板。
|
ng-hide
在 AngularJS 中，ng-hide 指令会基于一个表达式显示或隐藏相关的 HTML 元素。
|
绑定到 hidden 属性
在 Angular 中，并没有一个内置的 hide 指令，可以改用属性绑定。
|
ng-href
<a ng-href="{{ angularDocsUrl }}">Angular Docs</a>
ng-href 指令允许 AngularJS 对 href 属性进行预处理，以便它能在浏览器获取那个 URL 之前，使用一个返回适当 URL 的绑定表达式替换它。
在 AngularJS 中，ng-href 通常用来作为导航的一部分，激活一个路由。
<a ng-href="#{{ moviesHash }}">Movies</a>
路由在 Angular 中的处理方式不同。
|
绑定到 href 属性
<a [href]="angularDocsUrl">Angular Docs</a>
在 Angular 中，并没有内置的 href 指令，改用属性绑定。 把元素的 href 属性放在方括号中，并把它设成一个引号中的模板表达式。
在 Angular 中，href 不再用作路由，而是改用第三个例子中所展示的 routerLink 指令。
<a [routerLink]="['/movies']">Movies</a>
|
ng-if
<table ng-if="movies.length">
在 AngularJS 中，ng-if 指令会根据一个表达式来移除或重建 DOM 中的一部分。如果表达式为假，元素就会被从 DOM 中移除。
在这个例子中，除非 movies 数组的长度大于 0，否则 <table> 元素就会被从 DOM 中移除。
|
*ngIf
<table *ngIf="movies.length">
Angular 中的 *ngIf 指令与 AngularJS 中的 ng-if 指令一样， 它根据表达式的值移除或重建 DOM 中的一部分。
在这个例子中，除非 movies 数组的长度大于 0，否则 <table> 元素就会被从 DOM 中移除。
在这个例子中 ngIf 前的星号(*)是必须的。
|
ng-model
<input ng-model="vm.favoriteHero"/>
在 AngularJS 中，ng-model 指令把一个表单控件绑定到了模板相关控制器的一个属性上。 这提供了双向绑定功能，因此，任何对视图中值的改动，都会同步到模型中，对模型的改动，也会同步到视图中。
|
ngModel
<input [(ngModel)]="favoriteHero" />
在 Angular 中，双向绑定使用[()]标记出来，它被形象的比作“盒子中的香蕉”。 这种语法是一个简写形式，用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件)，就成了双向绑定。
|
ng-repeat
<tr ng-repeat="movie in vm.movies">
在 AngularJS 中，ng-repeat 指令会为指定集合中的每一个条目重复渲染相关的 DOM 元素。
在这个例子中，对 movies 集合中的每一个 movie 对象重复渲染了这个表格行元素(<tr>)。
|
*ngFor
<tr *ngFor="let movie of movies">
Angular 中的 *ngFor 指令类似于 AngularJS 中的 ng-repeat 指令。 它为指定集合中的每一个条目重复渲染了相关的 DOM 元素。 更准确的说，它把被界定出来的元素(这个例子中是 <tr>)及其内容转成了一个模板，并使用那个模板来为列表中的每一个条目实例化一个视图。
请注意其它语法上的差异： 在 ngFor 前面的星号(*)是必须的；let 关键字把 movie 标记成一个输入变量；列表中使用的介词是 of，而不再是 in。
|
ng-show
<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
在 AngularJS 中，ng-show 指令根据一个表达式来显示或隐藏相关的 DOM 元素。
在这个例子中，如果 favoriteHero 变量为真，<div> 元素就会显示出来。
|
绑定到 hidden 属性
<h3 [hidden]="!favoriteHero">
Your favorite hero is: {{favoriteHero}}
</h3>
在 Angular 中，并没有内置的 show 指令，可以改用属性绑定。 要隐藏或显示一个元素，绑定到它的 hidden 属性就可以了。
要想有条件的显示一个元素，就把该元素的 hidden 属性放到一个方括号里，并且把它设置为引号中的模板表达式，它的结果应该是与显示时相反的值。
在这个例子中，如果 favoriteHero 变量不是真值，<div> 元素就会被隐藏。
|
ng-src
<img ng-src="{{movie.imageurl}}">
ng-src 指令允许 AngularJS 对 src 属性进行预处理，以便它能够在浏览器获取此 URL 之前，用一个返回适当 URL 的绑定表达式替换它。
|
绑定到 src 属性
<img [src]="movie.imageurl">
在 Angular 中，并没有一个内置的 src 指令，可以使用属性绑定。 把 src 属性放到方括号中，并且把它设为一个引号中的绑定表达式。
|
ng-style
<div ng-style="{color: colorPreference}">
在 AngularJS 中，ng-style 指令根据一个绑定表达式设置一个 HTML 元素的 CSS 样式。 该表达式通常是一个“键-值”形式的控制对象，对象的每个键都是一个 CSS 属性，每个值都是一个能计算为此样式的合适值的表达式。
在这个例子中，color 样式被设置为 colorPreference 变量的当前值。
|
ngStyle
<div [ngStyle]="{'color': colorPreference}">
<div [style.color]="colorPreference">
在 Angular 中，ngStyle 指令的工作方式与此类似。它根据一个表达式设置 HTML 元素上的 CSS 样式。
在第一个例子中，color 样式被设置成了 colorPreference 变量的当前值。
Angular 还有样式绑定语法，它是单独设置一个样式的好方法。它展示在第二个例子中。
|
ng-switch
<div ng-switch="vm.favoriteHero &&
vm.checkMovieHero(vm.favoriteHero)">
<div ng-switch-when="true">
Excellent choice!
</div>
<div ng-switch-when="false">
No movie, sorry!
</div>
<div ng-switch-default>
Please enter your favorite hero.
</div>
</div>
在 AngularJS 中，ng-switch 指令根据一个表达式的当前值把元素的内容替换成几个模板之一。
在这个例子中，如果 favoriteHero 没有设置，则模板显示“Please enter ...”。 如果 favoriteHero 设置过，它就会通过调用一个控制其方法来检查它是否电影里的英雄。 如果该方法返回 true，模板就会显示“Excellent choice!”。 如果该方法返回 false，该模板就会显示“No movie,
sorry!”。
|
ngSwitch
<span [ngSwitch]="favoriteHero &&
checkMovieHero(favoriteHero)">
<p *ngSwitchCase="true">
Excellent choice!
</p>
<p *ngSwitchCase="false">
No movie, sorry!
</p>
<p *ngSwitchDefault>
Please enter your favorite hero.
</p>
</span>
在 Angular 中，ngSwitch 指令的工作方式与此类似。 它会显示那个与 ngSwitch 表达式的当前值匹配的那个 *ngSwitchCase 所在的元素。
在这个例子中，如果 favoriteHero 没有设置，则 ngSwitch 的值是 null， *ngSwitchDefault 中会显示 “Please enter ...”。 如果设置了 favoriteHero，应用就会通过调用一个组件方法来检查电影英雄。 如果该方法返回 true，就会显示
“Excellent choice!”。 如果该方法返回 false，就会显示 “No movie, sorry!”。
在这个例子中，ngSwitchCase 和 ngSwitchDefault 前面的星号(*)是必须的。
|
免费AI编程助手
更多建议：