AngularJS 路由
-
定义和用法
ngRoute 模块可帮助您的应用程序成为单页应用程序。如果要导航到应用程序中的其他页面,但又希望该应用程序是 SPA(单页面应用程序),而无需重新加载页面,则可以使用 ngRoute 模块。ngRoute 模块将您的应用程序路由到其他页面,而无需重新加载整个应用程序。下面示例演示了路由导航跳转到 "red.html","green.html" 和 "blue.html": -
我需要什么
为了使您的应用程序准备好进行路由,您必须包括 AngularJS Route 模块:然后,您必须在应用程序模块中添加ngRoute
作为依赖项:现在,您的应用程序可以访问提供$routeProvider
的 route 模块。使用$routeProvider
在您的应用程序中配置不同的路由: -
-
$routeProvider 方法
使用$routeProvider
,您可以定义用户单击链接时要显示的页面。下面示例演示了定义一个$routeProvider
:使用应用程序的
config
方法定义$routeProvider
。 加载应用程序时,将执行config
方法中注册的工作。 -
Controllers 控制器
使用$routeProvider
,您还可以为每个 “视图” 定义一个控制器。下面示例演示了添加控制器:“china.html” 和 “beijing.html” 是普通的 HTML 文件,您可以像在 AngularJS 应用程序的任何其他 HTML 部分中一样添加AngularJS 表达式。这些文件如下所示: -
Template 模板
在前面的示例中,我们在$routeProvider.when
方法中使用了templateUrl
属性。您还可以使用template
属性,该属性允许您直接在属性值中编写HTML,而不引用页面。下面示例演示了编写一个template
模板: -
otherwise 方法
在前面的示例中,我们使用了$routeProvider.when
方法。您也可以使用otherwise
方法,这是其他方法都不匹配时的默认路由。下面示例演示了如果未单击“Banana”或“Tomato”链接,请告知他们一个默认路由: