在本文中，您将在angularjs1.5中开发一个简单的应用程序。这个应用程序将向您展示如何使用本教程第1部分中讨论的一些特性来构建基于组件的AngularJS应用程序。如果您想跳过教程直接深入代码，那么回购是公开的。在angularjs1.5之前，开发人员完全依赖于指令来在他们的应用程序中构建可重用的组件。目前，AngularJS 1.5+提供了使用.component（）方法来构建独立的、可重用的组件的功能，如React和Angular应用程序。SpeakerHang简介我很欣赏社区中的几个开发人员，其中之一就是Nadia Odunayo。她是一个Ruby开发人员和一个定期会议发言人。她做了一个很受欢迎的项目叫做Speakerline。Speakerline是一个开源项目，旨在帮助新演讲者揭开技术会议CFP流程的神秘面纱。这个项目是用铁轨建造的。SpeakerHang，我们将在本教程中构建的项目很大程度上受Speakerline的启发。这是一个更简单的版本。SpeakerHang显示会议发言人及其详细信息的列表，并允许您添加发言者。这里值得注意的是没有数据库或外部restapi。扬声器被添加到阵列中。本指南的关键是教您如何轻松构建基于组件的AngularJS应用程序。可视化扬声器构建应用程序的最佳方法是可视化最终产品的外观。让我们考虑一下组件中的SpeakerHang。查看以下可视化效果：可视化-扬声器组件扬声器-组件可视化从上图中，我们的可视化生成了四个组件。导航的第一个组件。添加演讲者窗体的第二个组件。添加扬声器容器的第三个组件。发言者名单的第四部分。注意：你可以将你的应用程序分解成任意多个组件，但要小心不要使过程复杂化。建造扬声器我已经为构建AngularJS 1.5+应用程序配置了一个入门包。starter pack附带webpack、Sass编译、autoreload、ES6传输、组件生成、Angularjs UI路由器和测试文件生成器。这是一个分叉和增强版的NG6起动器。将AngularJS starter pack，cd克隆到目录中，然后运行npm install来安装所有依赖项。运行gulp serve启动应用程序。你的应用程序应该如下图所示：AngularJS入门包索引在继续之前，我希望您删除以下内容：应用程序/公用目录。应用程序中的此行/应用程序js：从"./Common/Common"导入Common；从中所需的依赖项中删除公共项角度模块在应用程序js."关于"、"主零部件"文件夹和组件.js应用程序/组件目录中的文件。应用程序中的此行/应用程序js：从"./Components/Components"导入组件；从中所需的依赖项中删除组件角度模块在应用程序js.现在，你的应用程序应该显示一个空白页。如果没有错误，那么你就走上正轨了。设置路线我们将利用高效的UI路由器。打开应用程序js并将内容替换为以下代码：从"angular"导入angular；从'@uiRouter/angularjs'导入uiRouter；从""导入AppComponent/应用程序组件';导入'规格化.css';导入'skeleton.css/skeleton公司.css'；导入'/附件scss';角度模块（"应用程序"[路由器]).config（（$locationProvider，$stateProvider，$urlRouterProvider）=>{"nginjet"；$状态提供者.state（'app'{url:'/app'，摘要：是的，模板：""}).state（'home'{网址：'/home'，模板：'开发人员社区的演讲者之家'});//路由器的默认页面$urlRouterProvider。否则（'/home'）；}).component（'app'，AppComponent）；在上面的代码中，我们定义了home和app状态。我们还为应用程序配置了默认页面。当用户访问应用程序时将呈现的默认页面是呈现模板的/home路由。注意：模板可以是组件，也可以是字符串。你的应用程序应该呈现如下：SpeakerHang-住宅指数飞行器部件.导航栏是时候构建我们的组件了。之前，我们可视化了SpeakerHang应用程序，并提出了四个组件。导航栏组件添加扬声器容器组件扬声器窗体组件演讲者列表组件让我们从导航栏组件开始。在终端中运行以下命令以生成组件：gulp组件——名称navbar此命令将在components文件夹中生成一个新组件navbar，其中包含以下文件：导航组件.js-导航栏组件本身导航栏.html-导航栏模板导航栏.scss-导航栏模板的样式导航栏.js-导航条模块将所有东西连接在一起navbar.controller.js-定义业务逻辑的导航栏控制器导航栏规范js-导航栏测试文件第一步是将肉添加到导航栏模板中。将内容替换为：

下一步，前往应用程序js导入导航栏组件。应用程序/应用程序js...从'./components/navbar/navbar'导入NavBarComponent；...角度模块（"应用程序"[路由器，导航栏组件]).config（…）.component（'app'，AppComponent）；我们已经导入了导航栏组件，并在我们的应用程序模块中注册了它。然而，我们还需要采取更多的步骤，以确保它反映在页面上。在应用程序中调用导航栏组件/应用程序.html.应用程序/应用程序.html