使用Angular UI Router进行Angular JS中的路由

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

先决条件：

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

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

语法：

$stateProvider
.state('StateName',{
    url: '此状态的URL模式',
    template: "HTML内容",
    controller: "此状态的控制器名称"
});

除了使用模板外，还可以使用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.

操作步骤:

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

2. 创建nav.html文件:这个文件由导航栏标题和内容组成。

使用Angular UI Router进行Angular JS中的路由

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

index.html 文件如下所示。该文件中包含了所有必需的依赖项，以及 nav.html 文件和 ui-view 的定义，不同路由的内容将在ui-view中渲染。

使用Angular UI Router进行Angular JS中的路由

说明:

所有依赖项都通过CDN包含在head标签中。
nav.html文件在index.html文件的body标签中包含。
body中的最后一个division定义了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 文件。这是应用文件，包含路由信息和通过控制器执行的动作。

// 声明应用模块，名称为 "myApp"
// 注入 ui.router 依赖
var app = angular.module('myApp', [ "ui.router" ]); 

// 在 app.config 中定义路由配置
// 注入依赖
app.config(function( $stateProvider,$ locationProvider, 
                            $urlRouterProvider) { // 创建路由或状态$ stateProvider
        .state('Home', {
            url : '/home',
            template : "<h1>主页</h1>",
            controller : "HomeCtrl"
        })
        .state('Login', {
            url : '/login',
            template : "<h1>登录页</h1>",
            controller : "LoginCtrl"
        })
        .state('Signup', {
            url : '/signup',
            template : "<h1>注册页</h1>",
            controller : "SignupCtrl"
        });

    // 如果 URL 与上述三个路由不匹配，则重定向到主页
    $urlRouterProvider.otherwise("/home");
});

// 创建空的控制器，因为我们只是显示消息而不做其他操作
app.controller('MainCtrl', function() {});
app.controller('HomeCtrl', function() {});
app.controller('LoginCtrl', function() {});
app.controller('SignupCtrl', function() {});

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