material start

Angularjs材料启动（ES6）

该分支包含此存储库中material start ES6教程分支的最终/完整版本（即step-10-finished ）。

您可以在这里看到现场演示。

该存储库中还有许多其他分支，您可能会发现有用：

• master （此分支） – 下面概述的es6分支的副本，并提供有关可用分支的其他注释。
• es5-tutorial逐步指令清楚地证明了如何使用ES5在几分钟内创建启动器应用程序。
• es5您在上述教程的最后一步中完成的最终ES5版本。
• es6-tutorial – 逐步指令清楚地证明了如何使用ES6在几分钟内创建启动器应用程序。
• es6您在上述教程的最后一步中完成的最终ES6版本。
• typescript – 使用打字稿构建的最终起动器应用程序。

注意：我们当前不提供typescript-tutorial分支，因为这些步骤与现有的es6-tutorial分支相似。

目的

该项目使用AngularJS材料的最新主分支来构建以下概述的应用程序。

上面是带有主尾版布局的入门应用的快照：显示用户列表（左）和用户详细信息视图（右）。

还显示了将显示针对较小设备尺寸的用户体验。响应式布局揭示了可用于隐藏用户列表的菜单按钮。共享按钮可用于显示共享底部图。

此入门应用程序演示了：

• AngularJS材料layout和flex选项可以轻松配置HTML容器
• AngularJS材料组件<md-toolbar> ， <md-sidenav>和<md-icon>可以快速提供基本应用结构
• 可以使用自定义控制器，并使用HTML模板显示<md-bottomsheet>
• 自定义控制器可以轻松，并在编程中打开/关闭Sidenav组件
• 使用响应式断点和$mdMedia
• 可以使用$mdThemingProvider更改/配置主题

该示例应用程序的目的是作为典型的AngularJS材料Web应用程序的学习工具和骨架应用，该应用程序由侧面导航区域和内容区域组成。您可以使用它来快速为这些项目引导您的Angular WebApp项目和开发环境。

“如何构建应用程序”

以下是一些通用步骤，可用于概念化应用程序实现过程：

1. 计划您的布局和要使用的组件

2. 使用硬编码的HTML和模拟内容来确保按需出现组件

3. 您的应用程序逻辑的电线组件

   使用与AngularJS指令和控制器的无缝集成。
   此集成假设您已经测试了您的应用程序逻辑。

4. 添加响应式断点

5. 添加主题支持

6. 确认ARIA合规性

7. 写端到端（E2E）测试

   使用AngularJS材料UI组件验证您的应用程序逻辑很重要。

线框

下图显示了我们如何计划布局并确定了启动器应用程序中将使用的主要组件：

注意：容器＃2（上图）是一个简单的<div>容器，而不是AngularJS材料组件。

入门

该项目使用JSPM.IO，该项目是SystemJS的软件包管理器，该软件包是在动态ES6模块加载器顶部构建的。这使开发人员可以加载任何模块格式（ES6，CONCORJS，AMD和GLOBALS）。

先决条件

该项目假设您拥有NodeJS和已安装的任何相关开发工具（例如Xcode）。

入门

克隆此存储库，并在终端中执行以下命令：

• git checkout master
• npm install
• npm run serve

注意：打开开发控制台以查看任何警告并浏览元素。

布局

您会在此项目中注意到一些文件/目录：

1. app/src这是存储所有应用程序文件的地方。
2. app/assets此文件夹包含应用程序使用的一些教程提供的图像和图标。
3. index.html应用程序的入口点。这使用system.js加载app/src/boot/boot.js bootstrap文件，该文件依次加载app/src/app.js文件，该文件导入所有依赖项并将其声明为AngularJS模块，并为应用程序配置图标和主题。

故障排除

如果您遇到了按预期运行或工作的申请：

1. 确保已安装JSPM并运行jspm update命令。
2. 在我们的论坛上伸出援手，看看是否有其他开发人员也遇到了同样的问题。
3. 该项目是基于Angularjs材料的master分支，因此它总是显示出最新，最大的。您可能需要更新package.json使用版本1.1.0或其他稳定版本以确保这不是我们最近更改的内容。
4. 在Github上搜索此问题。
5. 如果您看不到现有问题，请打开一个新的问题，其中包含相关信息以及所面临的问题的详细信息。