AngularDart

MaterialButtonComponent Selector: <material-button> 平面或凸起按钮，带有可选的波纹效果。 Attributes: 以下属性通常与<material-button>一起使用： icon： 如果存在，则删除按钮的最小宽度样式。 要指定按钮中的实际图标，请使用<glyph>，<material-icon>或<img>。 no-ink： 如果存在，则从按钮中消除涟漪效应。 clear-size： 如果存在，则从按钮中删除最小宽度和边距。 dense: 如果存在，将字体大小减小到13px，按钮高度减少到32px。 Styling: 指定按钮颜色的首选方法是使用mixins： /* Make #myButton green with yellow text */ @include button-background-color('#myButton', green); @include button-color('#myButton', yellow); 将mixin用于颜色的优点是它们不会覆盖禁用的状态颜色。您也可以像使用普通DOM元素一样使用CSS设置按钮的样式，尽管这也会影响禁用状态： /* Make #myButton green with yellow text */ #myButton { background: green;

自述 Material Card 材料卡是由Google材料团队（也称为mdc-web）提供的卡片样式。 这是一个允许在AngularDart应用程序中使用样式的包装器。 有关如何使用这些样式的文档，请参阅 mdc文档 。 可以在这里找到 示例 。 建立 样式由包提供: angular_components/css/mdc_web/card/mdc-card.scss.css 。要在Angular组件中使用这些样式，只需将其添加为 Component 注解中的 styleUrls 值即可。我们建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。 @Component( selector: 'my-component', templateUrl: 'my_component.html', styleUrls: [ 'package:angular_components/css/mdc_web/card/mdc-card.scss.css', 'my_component.scss.css']) class MyComponent {} MaterialCardExample 查看 示例 ，查看 源码 。 来源： oschina 链接： https://my.oschina.net/u/3647851/blog/2032377

MaterialDateRangePickerComponent Selector: <material-date-range-picker> 材料设计风格的日期范围选择器。 用户可以选择预设日期范围，键入自定义日期范围，或通过播放日历选择范围。 当用户键入日期时，将专门处理具有2位数年份的日期。 例如。7/7/77被解释为1977年7月7日，而不是77年7月7日。这个逻辑看起来是未来20年：现在（2015年8月），“35”被解释为2035，但“36”被解释为“1936”。 明年，“36”将开始被解释为2036年。 由于此选择器的主要用途是针对全局每个应用程序的日期范围，因此该组件还可以读取和写入 ObservableReference 实例。 （还提供了 DatepickerModel 类，以便在依赖注入中更容易使用它。） Attributes: popupClass - 要添加到范围选择器弹出窗口的样式类，以便可以以封装方式设置弹出窗口的样式。 有关文档，请参阅 MaterialPopup 。 Inputs: applyButtonLabel String “Apply”按钮的标签。仅当您需要“Apply”以外的其他标签时才设置此变量。 如果设置，输入标签应该国际化。 compact bool 是否启用紧凑日历样式。 comparisonOptions List

码云项目页： https://gitee.com/scooplolwiki/toh-1 在这一部分，您将修改 起始应用程序 以显示有关英雄的信息。 然后，您将添加编辑英雄信息的功能。 完成后，应用程序应该看起来像这个 实例 （查看 源代码 ）。 构建结构 在开始编写代码之前，让我们验证一下你的结构。 如果没有，您需要返回并按照 上一页 的设置说明进行操作。 如果该应用尚未运行，请 启动该应用 。 当您进行更改时，请通过 重新加载 浏览器窗口来保持运行。 显示英雄 向AppComponent添加两个属性：一个 title 属性代表应用程序名，一个 hero 属性代表英雄名 lib/app_component.dart (AppComponent class) class AppComponent { final title = 'Tour of Heroes'; var hero = 'Windstorm'; } 现在使用绑定数据的新属性来更新 @Component 注解下的模板 lib/app_component.dart (@Component) template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>', 刷新浏览器，页面将显示标题和英雄名 双大括号是Angular插值绑定语法。

AppComponent 正在做所有的事情。 一开始，它展示了一个英雄的细节。 然后，它成为一个英雄和英雄细节列表的主/细节形式。 很快就会有新的要求和能力。 您不能在一个组件之上填充所有功能; 这是不可维护的。 您需要将其分解为子组件，每个子组件都专注于特定的任务或工作流程。 最终， AppComponent 可以成为托管这些子组件的简单 shell 。 在这个页面中，您将通过将英雄细节划分为单独的，可重用的组件来迈向这个方向的第一步。 当你完成后，应用程序应该看起来像这样。 从哪里开始 在开始使用本页面之前，请确认您之前在“Tour of Heroes”中拥有以下结构。 如果没有，请返回前面的页面。 如果还没运行，请启动应用，保持应用处于运行状态 创建英雄详情组件 创建文件: hero_detail_component.dart ,这个文件将控制新组件 HeroDetailComponent Angular 约定 组件类名称使用驼峰命名法并以“ Component ”结尾，例： HeroDetailComponent 组件文件的名称使用Snake Case命名法-单词小写且使用下划线分割以_component结束，例： hero_detail_component.dart 内部实现文件应该放在 lib / src 下。 有关详细信息，请参阅 pub package 布局约定。

在此页面中，您将扩展“Tour of Heroes”应用程序，以显示英雄列表，并允许用户选择英雄并显示英雄的详细信息。 完成此页面后，该应用应该看起来像这个 实例 （查看 源代码 ）。 必备条件 在继续本“英雄之旅”页面之前，请确认您在“英雄编辑器”页面之后具有以下结构。 如果您的结构不匹配，请返回该页面以弄清楚您错过了什么。 如果该应用尚未运行，请 启动 该应用。 当您进行更改时，请通过重新加载浏览器窗口来 保持运行 。 应用程序重构 在添加新功能之前，您可以从应用程序重构中受益。 应用模板文件 您将对应用程序组件的模板进行多次更新。 首先，将模板移动到自己的文件中： lib/app_component.html <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> 用指向新模板文件的 templateUrl 替换 @Component 模板： lib/app_component.dart (metadata) @Component( selector: 'my-app',

码云项目页： https://gitee.com/scooplolwiki/toh-0 此教程讲解Angular的文件架构，（查看 源代码 ）查看应用程序。 创建应用 开始，创建名为 angular_tour_of_heroes 的项目，使用WebStorm或者命令行和GitHub项目： angular-examples/quickstart ，更多介绍查看 安装开发 页中的 创建启动项目 。 运行应用，并使它持续运行 从IDE或命令行中启动应用，正如安装开发页运行应用部分所述。 你可能将在本教程之外更改应用，当你准备查看更改时，重新加载浏览器窗口，将会 重新加载应用 ，当保存更改时， pub 工具将检测更改和提供新的应用。 Angular 应用基础 Angular应用由组件组成，组件是由控制屏幕局部的一个html模板和组件类的组合，开始应用有一个显示简单字符串的组件组成。 lib/app_component.dart import 'package:angular/angular.dart'; @Component( selector: 'my-app', template: '<h1>Hello {{name}}</h1>', ) class AppComponent { var name = 'Angular'; } 每一个组件都以 @Component 注解开始