如何使用Angular-UI-Router在Angular JS中进行路由？

AngularJS是基于JavaScript的前端Web应用程序框架, 由Google维护。AngularJS将HTML的属性解释为将输入/输出组件绑定到标准JavaScript变量表示的模型的指令。

先决条件：

HTML

CSS

JavaScript

AngularJS

Angular-UI-Router是一个AngularJS模块, 用于为AngularJS应用程序创建路由。路由是单页面应用程序(SPA)和常规应用程序的重要组成部分, 而Angular-UI-Router提供了在AngularJS中轻松创建和使用路由的功能。

Angular-UI-Router有stateProvider用于在应用程序中创建路由/状态的方法。状态提供程序将状态名称和状态配置作为参数。

语法如下：

$stateProvider
.state('StateName', {
    url: 'Url pattern for this State', template: "Html content", controller: "Name of the Controller for this state"
});

代替template, 可以使用templateUrl并指定要呈现状态的HTML文件的路径。

例子：

$stateProvider
.state('Home', {
    url: '/home', templateUrl: "home.html", controller: "HomeCtrl"
});

在路线之间导航的简单项目, 以演示Angular-UI-Router模块的用法。

先决条件：Node.js和npm

To run and install http-server node module to host demo app.

操作步骤：

1.创建一个目录结构, 如下所示：

routingDemo
--app.js
--index.html
--nav.html

2.创建nav.html

文件如下。该文件包含导航栏标题及其内容。

3.创建index.html文件如下所示。所有必需的依赖项都包含在这个文件中，包括nav.html文件和用于渲染不同路由内容的ui-view的定义。

说明：

所有依赖项都通过CDN包含在head标签中。

nav.html文件包含在body标签的index.html页面中

主体的最后一个部分定义了ui-view div, 将在其中渲染不同路径的内容。

注意：如果它不起作用, 请用以下内容替换第二和第三个脚本：

<script src="angular.min.js"></script>
<script src = "
https://unpkg.com/@uirouter/angularjs@1.0.7/release/angular-ui-router.min.js">
</script>

4.创造app.js文件如下。这是具有路由信息和要通过控制器执行的操作的应用程序文件。

// declares application module with name "myApp"
// inject ui.router dependency
var app = angular.module( 'myApp' , [ "ui.router" ]);
  
// define route configurations inside app.config
// injecting dependencies
app.config( function ($stateProvider, $locationProvider, $urlRouterProvider) {
  
     // creating routes or states
     $stateProvider
         .state( 'Home' , {
             url : '/home' , template : "<h1>Home Page</h1>" , controller : "HomeCtrl"
         })
         .state( 'Login' , {
             url : '/login' , template : "<h1>Login Page</h1>" , controller : "LoginCtrl"
         })
         .state( 'Signup' , {
             url : '/signup' , template : "<h1>Signup Page</h1>" , controller : "SignupCtrl"
         });
  
     // Redirect to home page if url does not 
     // matches any of the three mentioned above
     $urlRouterProvider.otherwise( "/home" );
});
  
// create empty controllers for the states as we are
// not doing anything but just displaying message
app.controller( 'MainCtrl' , function () {});
app.controller( 'HomeCtrl' , function () {});
app.controller( 'LoginCtrl' , function () {});
app.controller( 'SignupCtrl' , function () {});

5.要在浏览器中运行上述演示应用, 请安装http服务器节点模块。要安装http服务器模块使用以下命令：

npm install http-server -g

6.要在浏览器中运行上述演示应用程序，请安装http-server node模块。要安装http-server模块，使用以下命令:

http-server

上面的命令将在8080端口上托管演示应用。可以使用以下链接访问该应用：

localhost:8080/

7.如果通过浏览器访问此应用程序, 输出将如下所示：

8.点击导航栏的登录标签后，输出如下:

9.点击导航栏中的“注册”选项卡，输出如下:

在这个示例应用程序中创建了三个路由，即Home、Login和Sign。

应用：

路由对于单页应用程序很重要, 因为它们为同一页面上的应用程序提供了不同的功能。

使用angular-ui-router模块可以轻松创建和处理路由。

参考文献：

• https://github.com/angular-ui/ui-router/wiki/quick-reference
• https://ui-router.github.io/ng1/docs/1.0.0-beta.1/classes/state.stateprovider.html
• https://en.wikipedia.org/wiki/AngularJS

---