SublimeText
首先在SublimeText新建HTML页面，然后导入angular.min.js和angular-route.js两个脚本文件，如下图所示
然后在body标签里添加ng-app属性，这个属性告诉angular从body开始全面监听元素动态，如下图所示
然后准备一个锚链接的列表，用于下面路由跳转使用，如下图所示
接下来我们就需要在script标签中通过module方法实例化angular了，注意实例化的时候添加ngRoute依赖，如下图所示
然后通过angular实例来实现config方法，如下图所示，在config方法中传入参数routeProvider
接下来利用routeProvider中的when方法来匹配路径，然后实现路由跳转，如下图所示
最后我们运行页面，你会看到如下图所示的展示，当你点击某个连接的时候，你会发现地址栏的连接也会跟着变得
Angular组件生命周期的A到Z指南
讨论几个不同的Angular组件，生命周期钩子的概念，以及组件生命周期如何在Angular中工作。
Angular是一种流行的，广泛使用的客户端平台，近年来赢得了数百万开发人员的心。随着Angular平台的出现，应用程序构建对于Web和移动设备变得更加容易。每年都有新版本出现，Angular生命周期不断发展。
该平台于2009年由谷歌推出.AngularJS是Angular团队的第一个倡议，受到广泛欢迎，并且依赖于HTML和JavaScript。但是，在更高版本中，您会发现JavaScript已被TypeScript取代。
Angular为开发人员提供了开发可在Web，移动和桌面上运行的应用程序的自由。随着时间的推移，Angular经历了许多修改，并在AngularJS之后引入了许多版本，现在直到Angular 7。
什么是Angular生命周期？
每个Angular版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里，我将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。为了平滑开发过程，Angular管理其所有组件。与任何自然生命周期一样，每个组件都有其生命周期事件，如出生，生活事件和死亡。
值得注意的是，Angular本身监督所有Angular组件和指令的生命周期 。为了在开发应用程序时顺利进行，您必须了解结果的生命周期。以下信息适用于组件和指令。
组件是任何Angular应用程序的主要构建块。因此，必须了解它们才能理解组件生命周期的处理步骤。只有这样才能在应用程序的开发中实现。
在Angular中你会注意到的最激动人心的事情是它中的每个组件都有一个生命周期，生命周期的每个阶段都从初始化到破坏。组件生命周期通常经历八个不同阶段。
当Angular组件初始化时，它会创建并显示其根组件。然后设计它们并生成子组件。对于在应用程序开发期间加载的所有组件，它会一直检查数据绑定属性何时更改和更新。当组件不再使用时，它将被删除并从DOM中排出。有时您可能必须在这些事件发生时编写一些额外的代码。我试图在组件的生命周期中展示最自然的一瞥。现在，让我们详细说明一下。
生命周期钩概述
组件生命周期中的事件也称为“生命周期钩子”。术语生命周期钩子 指的是开发人员可以在Angular应用程序中的组件生命周期中的特定点调用的简单函数。我们还可以声明这些生命周期钩子是Angular在组件生命周期中发生正事件时引发的回调方法。组件或指令的生命周期中有八种不同的钩子。
您也可以从Angular核心库执行钩子，以便将一些独特的组件合并到应用程序的生命周期中。开发人员通过实现Angular核心库中的一个或多个钩子接口来使用生命周期中的重要时刻。钩子事件可以包含在应用程序的任何阶段，以便对组件进行出色的控制。
例如，引入一个组件， ngOnInit由Angular召唤。
组件是TypeScript类，这就是您必须将每个组件视为构造方法的原因。在生命周期钩子事件中，首先执行组件类的构造函数。要将依赖项注入组件，必须使用构造函数。Angular首先执行构造函数，然后显式执行所有其他生命周期钩子方法。
构造函数与OnInt
作为开发人员，您必须生成组件并进行介绍。为此，您必须选择以下两个选项之一：您可以使用构造函数或使用 OnInit 生命周期方法。通过组件的初始化， OnInit 生命周期方法被触发。您喜欢使用哪种方法是您的决定，但许多人表示他们更喜欢使用 ngOnInit 声明或初始化，并尽量不使用构造函数。
接口
接口是挂钩生命周期方法的基本工具，因为应用程序的组件类需要实现基本接口。至于视图的引入，应该触发实现接口AfterViewInit 的方法是，方法是这样的 ngAfterViewInit。
ngOnchanges
当组件发生数据绑定属性变化时，会寻求此回调函数; 也就是说，当输入控件在组件内部更新时，此事件将被执行。Angular应用程序接收更改的数据映射，其中包含数据绑定属性的当前位置和先前位置，该位置包含在简单更改中。
使用此生命周期钩子，如果属性装饰器公开子组件，则父组件可以轻松地与其子组件通信 @InputDecorator 。开发人员使用此钩子来发现有关已更改的输入属性及其更改方式的详细信息。
属性：
ngOnInit
当Angular完成组件的创建和引入时，将调用此回调。它也会在Angular显示数据绑定属性时初始化。此事件仅在ngOnChanges 事件之后和构造函数之后才会调用它 。使用此挂钩，您可以初始化组件的逻辑。随着此钩子在之后初始化 ngOnChanges， 所有属性 ngOnInit 都可以使用其所有属性。在触发此代码之前，不能使用任何子指令属性。
属性：
ngDoCheck
每当需要检查组件或指令的输入属性时，这都是最常见的。您甚至可以使用此回调来检查您的逻辑。简而言之，通过此挂钩，您可以对要在组件中实现的逻辑进行自定义检查。
此钩子立即按需 ngOnInit发出，即使组件的属性没有变化，也会执行此挂钩。如果Angular未能检测到输入属性的任何变化，那么这个钩子就会出现问题。
属性：
ngAfterContentInit
ngAfterContentInit 后调用 ngDoCheck 时的组件TJE内容被引入，并检查首次。只要Angular在组件视图中进行任何内容投影，就会实现此方法。当属性明确划分为ContentChild 和 ContentChildren 完全初始化时，也会调用此方法 。
Angular可以在标记内使用此方法包含外部子组件。在组件的整个生命周期中，此挂钩被调用一次。
属性：
ngAfterContentChecked
该钩子方法通过使用角度变化检测装置调查组件内容的修改来完成其工作，并且即使没有进行修改它仍然执行其任务。它被调用， ngAftercontentInit 并在每次执行后执行 ngDoCheck。它在子组件的初始化中起着重要作用。
属性：
ngAfterViewInit
此生命周期方法在其之后进行调用， ngAfterContentChecked 并且仅在组件上使用。这ngAfterContentInit与它非常相似 ，只有在所有组件视图及其子视图之后才会调用它。
属性：
ngAfterViewChecked
在检查组件的视图和子视图之后，会触发此Angular生命周期方法。此方法在ngAfterViewInit 每个ngAfterContentChecked 方法之后接受 调用 。与上面讨论的许多其他生命周期钩子一样，它也仅适用于组件。
当从子组件等待某些内容时，此组件可能会有所帮助。
属性：
ngOnDestroy
在Angular破坏所有组件或指令后，此生命周期钩子会调用它。在这里，您可以使用清理逻辑并取消订阅所有可观察对象并从事件处理程序中分离。通过这样做，您可以防止内存泄漏。
属性：
