AngularDart4.0 指南

2019独角兽企业重金招聘Python工程师标准>>>

指南

1.概述

      本文档为Angular的高级部分，如果你刚接触Angular，请先学习Angular。

指南	了解Angular的基础知识，如本地开发的 安装， 显示数据和接受用户输入，构建简单的表单， 将应用程序服务注入到组件中，以及使用Angular的模板语法。
教程	一步一步，沉浸式学习Angular的方法，在应用程序上下文中介绍Angular的主要功能与特点。
高级	Angular特征和开发实践的深入分析。
API	每个Angular库的详细细节。

示例代码
每个页面都包含页面随附的示例应用程序的代码段。 您可以在应用程序中重用这些片段。

参考页
词汇表定义Angular开发人员应该知道的术语。

Cheat Sheet列出了常见场景的Angular语法

API手册是Angular里的公共库的权威向导。

2.开发设置

使用条件：Dart SDK，Dartium（安装sdk时会自动安装）和WebStorm

创建一个启动项目

1.打开WebStorm

2.安装Dart插件并配置sdk目录和Dartium路径

3.从菜单中选择VCS> Git> Clone（前提是安装了Git插件）

4.  填写字段

• Git Repository URL：  https://github.com/angular-examples/quickstart
• 父目录：( 选择你的目录）
• 目录名称 angular_tour_of_heroes （或任何其他 有效的包名称）

5.单击克隆。

获取依赖关系

在WebStorm中：

1. 打开新项目。
2. 在项目视图中，双击pubspec.yaml。
3. 在编辑器视图的右上方pubspec.yaml：
   1. 单击 Enable Dart support.
   2. 单击Get dependencies.

     Note:若获取依赖不成功：

      1.检查浏览器能否访问pub.dartlang.org.

     2.操作系统当前用户对文件的操作权限不足

 windows 当前用户对C:\Users(用户)\root(当前用户名)\AppData\Roaming\Pub\Cache\hosted文件夹和项目文件夹没有写入权限。

    3.hosts文件包含：127.0.0.1       localhost

   4. 若使用了代理（翻墙）软件，webstorm >file>Setting>Appearance &Behavior>System Settings>HTTP Proxy>Manual proxy configuration>SOCKS  一定要和代理提供的域名和端口号一致。

注意：若上述条件满足，出现错误显示 os error "  " errorno=121 address:....  port:....  , 则手动从https://pub.dartlang.org/下载对应包，解压后放在C:\Users(用户)\root(当前用户名)\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org 目录下。

 WebStorm需要几秒钟来分析来源并进行其他内务处理。这只会发生一次。之后，您可以使用WebStorm进行通常的IDE工作，包括运行应用程序。

如果您不使用WebStorm，可以使用命令行下载依赖项：在终端窗口中，转到项目根目录并运行pub get。

自定义项目
   使用WebStorm或您最喜欢的编辑器：

    打开web / index.html，并用适合您的应用程序的标题替换<title>元素的文本。 例如：<title>英雄之角</ title>。

   打开pubspec.yaml，并更新描述以适合您的项目。 例如：描述：英雄之旅。

   可选项。 如果您想更改项目的名称，请使用适合您的应用程序的名称进行项目范围的搜索和替换pubspec名称条目（angular_app）的当前值 - 通常它将与 您之前选择的目录名称。

    该项目全局重命名将影响：pubspec.yaml，web / main.dart和test / app_test.dart。

运行应用程序
    在WebStorm中：

      在项目视图中，右键单击web / index.html。
      选择运行'index.html'。
     如果对话框说Chromium想要使用您的机密信息，请单击拒绝。 （您不应该使用Dartium进行通用浏览，Dartium不需要您的信息来运行此应用程序。）

      您应该在Dartium浏览器窗口中看到以下应用程序：

要从命令行运行应用程序，请使用pub serve命令启动Dart编译器和HTTP服务器。 然后，要查看您的应用程序，请使用浏览器导航到pub serve显示的URL。

重新载入应用程式
每当您更改应用程序时，请重新加载浏览器窗口。 当您保存更新代码时，该pub工具会检测更改并提供新的应用程序。

学习Angular 

    你不必阅读文档，如果你是初学者，下方是建议的学习步骤。

    1. 按照开始，通过引导来创建，运行和修改AngularDart应用程序。

    2.参加英雄之旅教程。
     英雄之旅让您逐步从安装到全功能的示例，演示了专业应用程序的基本特征：合理的项目结构，数据绑定，主/细节，服务，依赖注入，导航和远程 数据访问。

    3. 查看整体架构图。

    4.阅读数据显示以查看数据绑定是否在屏幕上放置组件属性值。

    5.阅读用户输入，了解如何响应用户启动的DOM事件。

    6.阅读表单，其中涵盖用户界面中的数据输入和验证。

    7.阅读依赖注入，了解如何从小型单用途零件构建大型，可维护的应用程序。

    8.扫描模板语法， AngularHTML模板的综合研究。

 

转载于:https://my.oschina.net/u/3647851/blog/1518454