One of the most important concepts in web development is writing clean, modular code. This is especially relevant when working as part of a team on highly complex applications. The Angular framework was built to create high-level applications, which can become very complex very fast, which in turn makes writing modular code all the more vital. One of the tools that can aid you greatly in this quest is the Angular UI Router, which was built to help manage different states of your web app. In contrast to the native AngularJS routing implementation, it gives you complete control over each of its views.
Web开发中最重要的概念之一就是编写干净的模块化代码。 在团队中处理高度复杂的应用程序时，这一点尤其重要。 构建Angular框架是为了创建高级应用程序，该应用程序可能很快变得非常复杂，这反过来使得编写模块化代码变得更加重要。 Angular UI Router是可以在此任务中大大帮助您的工具之一，它旨在帮助管理Web应用程序的不同状态。 与本地AngularJS路由实现相反，它使您可以完全控制每个视图。
If you have used ui-router before, you may be aware of how the dot-notation is used to define child states inside of a parent state. You may not, however, be aware of how the ui-router library deals with named views nested inside of a parent state. And this is what I am going to explain today.
如果您以前使用过ui-router，则可能会知道如何使用点符号定义父状态内的子状态 。 但是，您可能不知道ui-router库如何处理嵌套在父状态内的命名视图。 这就是我今天要解释的。
I am going to show you how ui-router uses absolute names to give you complete control over where specific pieces of a web app are displayed. This allows you to easily add and remove different pieces of the interface in order to make a modular application, built up of different components. Specifically, I am going to show you how to map a navigation bar, some body content, and a footer, to a specific state. As ever, the code for this tutorial can be found on GitHub and you can also find a demo at the end of the article.
我将向您展示ui-router如何使用绝对名称来完全控制Web应用程序的特定部分的显示位置。 这使您可以轻松地添加和删除界面的不同部分，以构建由不同组件组成的模块化应用程序。 具体来说，我将向您展示如何将导航栏，某些正文内容和页脚映射到特定状态。 与以往一样， 该教程的代码可以在GitHub上找到 ，您也可以在本文结尾处找到一个演示 。
Take a minute to navigate through the files that make up this demo (available at the GitHub link above). You can see we have an index.html file where we include AngularJS, as well as the library for the ui-router. In this file we also have two ui-view directives into which we will insert our content. Next we have an app.js file, which will contain the code for our Angular app, and a templates directory. This directory will be used to house all of our different views. Although this folder is not necessary, it is definitely in your best interest to use some sort of structure when building applications with Angular. As you can see, I have included an assets folder inside of the templates folder. This is where I like to keep my reusable components: headers, navbars, footers, etc. I figured you may find this convention helpful as it keeps your code extremely modular.
花一点时间浏览组成该演示的文件(可从上面的GitHub链接获得)。 您可以看到我们有一个index.html文件，其中包含AngularJS，以及ui路由器的库。 在此文件中，我们还有两个ui-view指令，我们将在其中插入内容。 接下来，我们有一个app.js文件，其中将包含Angular应用程序的代码，以及一个templates目录。 该目录将用于容纳我们所有的不同视图。 尽管此文件夹不是必需的，但在使用Angular构建应用程序时，一定要使用某种结构，这绝对是您的最大利益。 如您所见，我在templates文件夹中包含一个assets文件夹。 我喜欢在这里保留可重复使用的组件：标头，导航栏，页脚等。我认为您可能会发现此约定很有用，因为它可以使您的代码保持极端模块化。
Let’s begin configuring our application. Inside of our app.js file, we need to add a dependency on the ui-router to our main angular module.
让我们开始配置我们的应用程序。 在app.js文件中，我们需要将对ui路由器的依赖项添加到我们的主要angular模块中。
angular.module('app', ['ui.router'])Once that is done, we can move on to our application’s config object. Here, we will be dealing with $stateProvider and $urlRouterProvider, so we need to inject them into our config object in order to have them available.
完成后，我们可以继续进行应用程序的config对象。 在这里，我们将处理$ stateProvider和$ urlRouterProvider ，因此我们需要将它们注入到我们的config对象中，以使它们可用。
Next we want to pass the URL of our home state into $urlRouterProvider.otherwise(), so it maps our application to this state by default. We will then need to use $stateProvider, which is what we will be dealing with for the rest of the tutorial. $stateProvider is what ui-router gives developers to use when routing applications. A state corresponds to a “place” in the application in terms of the overall UI and navigation. A state describes what the UI looks like and what it does at that place. It works in the same way that ngRoute uses routeProvider.
接下来，我们要将原始状态的URL传递到$urlRouterProvider.otherwise() ，因此默认情况下它将应用程序映射到该状态。 然后，我们将需要使用$stateProvider ，这将在本教程的其余部分中处理。 $stateProvider是ui-router为开发人员在路由应用程序时提供的功能。 就整体UI和导航而言，状态对应于应用程序中的“位置”。 状态描述了UI的外观以及该位置的功能。 它的工作方式与ngRoute使用routeProvider方式相同。
Below is a how the app.js file should look at this moment. Once we have configured the urlRouterProvider, we utilize $stateProvider to define the different states of the application. In this instance, we are defining a state named home, and only the URL is configured.
以下是此时的app.js文件外观。 一旦配置了urlRouterProvider ，就可以使用$stateProvider定义应用程序的不同状态。 在这种情况下，我们定义了一个名为home的状态，并且仅配置了URL。
angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/' }); } ]);Now that you have the bare-bones set up, you need to define a views object inside of $stateProvider. It should be placed immediately following the home state’s URL. Inside this object is where we are going to define the names of our views, as well as the paths of their templates. Here you can also define things such as controllers; however, I have passed over that for the sake of brevity in this tutorial.
现在您已经完成了基本设置，您需要在$stateProvider内部定义一个views对象。 应将其放置在原籍州URL之后。 在该对象内部，我们将定义视图的名称以及它们的模板的路径。 在这里您还可以定义诸如控制器之类的东西。 但是，为了简洁起见，我在本教程中已将其忽略。
Moving on, we must first create and define an unnamed view that will target the parent state — which in this case is home. The templateUrl of this unnamed view will essentially tie the two together. This is known as relative naming and tells angular to insert this unnamed view in the <div ui-view> inside our index.html file. Your code should now replicate the app.js below.
接下来，我们必须首先创建并定义一个未命名的视图，该视图将针对父状态-在本例中为home。 这个未命名视图的templateUrl实际上会将两者绑定在一起。 这称为相对命名，它告诉angular将这个未命名的视图插入到我们的index.html文件内的<div ui-view> 。 您的代码现在应该复制下面的app.js
angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/', views: { '': { templateUrl: './templates/main.html' }, } }); } ]);As you can see, the unnamed view resolves to main.html, which should resemble the code below.
如您所见，未命名视图解析为main.html ，它应类似于下面的代码。
<div ui-view="nav"></div> <h1 class="text-center">This content is in main.html</h1> <div ui-view="body"></div> <div ui-view="footer"></div>The file main.html includes three named views – nav, body, and footer. In order for these components to appear under the home state, we must define them using absolute naming. Specifically, we must use the @ syntax to tell AngularJS that these components of our application should be mapped to a specific state. This follows the viewName@stateName syntax and tells our application to utilize named views from an absolute, or specific state. You can read more about relative vs. absolute names here.
文件main.html包含三个命名视图-导航，正文和页脚。 为了使这些组件出现在原始状态下，我们必须使用绝对命名来定义它们。 具体来说，我们必须使用@语法告诉AngularJS我们应用程序的这些组件应映射到特定状态。 这遵循viewName@stateName语法，并告诉我们的应用程序使用来自绝对或特定状态的命名视图。 您可以在此处阅读有关相对名称和绝对名称的更多信息 。
You will see @home used throughout our config object, to ensure that Angular knows our named views target our home state. If these absolute names are not present, the application will not know where to find these named views. That said, take a look below and see how the application should be routed.
您将看到@home在整个config对象中使用，以确保Angular知道我们的命名视图以我们的home状态为目标。 如果不存在这些绝对名称，则应用程序将不知道在哪里可以找到这些命名视图。 也就是说，请在下面查看并查看如何路由应用程序。
angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/', views: { '': { templateUrl: './templates/main.html'}, 'nav@home': { templateUrl: './templates/assets/nav.html' }, 'body@home': { templateUrl: './templates/body.html'}, 'footer@home': { templateUrl: './templates/assets/footer.html' } } }); } ]);And this is what we end up with:
这就是我们最终得到的结果：
See the Pen How to Write Modular Code with Angular UI-Router & Named Views by SitePoint (@SitePoint) on CodePen.
见笔如何写模块化的代码与角UI的路由器和命名视图由SitePoint( @SitePoint上) CodePen 。
As I said earlier, absolute naming makes your code extremely modular. In this tutorial, I placed all of our views inside of a templates folder. However, you can take this a step further and create folders for the different views of your applications. This allows you to reuse templates throughout your application, as well as in future projects! The ui-router library makes it extremely easy to use different components of a web application, such as header and footers for specific views. This will make it easier to reuse code throughout different projects, and can definitely save you time.
如前所述，绝对命名使您的代码具有极高的模块化性。 在本教程中，我将所有视图放置在模板文件夹中。 但是，您可以更进一步，并为应用程序的不同视图创建文件夹。 这使您可以在整个应用程序以及将来的项目中重用模板！ ui-router库使使用Web应用程序的不同组件(例如用于特定视图的页眉和页脚)非常容易。 这将使在不同项目中重用代码更加容易，并且绝对可以节省您的时间。
There is much more complex, high-level nesting you can do with absolute names — this was only one example! Nonetheless, I hope you gained a deeper perspective of some of the things that ui-router makes possible. In this article written by Antonio Morales, he does an extremely good job of explaining the differences between absolute and relative naming, child states, and other aspects of Angular’s ui-router library. As always, let me know if you have any questions regarding this tutorial. I would be happy to answer them.
您可以使用绝对名称进行更复杂的高级嵌套-这只是一个例子！ 尽管如此，我希望您对ui-router可以实现的某些事情有更深入的了解。 在Antonio Morales撰写的这篇文章中 ，他在解释绝对和相对命名，子状态以及Angular ui-router库的其他方面之间的区别方面做得非常出色。 与往常一样，如果您对本教程有任何疑问，请告诉我。 我很乐意回答他们。
翻译自: https://www.sitepoint.com/write-modular-code-angular-ui-router-named-views/
相关资源：jdk-8u281-windows-x64.exe