ng-route && ui-router - Githubissues

Narutocc commented 7 years ago

单层路由使用ng-route

ng-route.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ng-route</title>
</head>
<body>
    <div>
        <a href="#/home">home</a>
        <a href="#/about">about</a>
        <div ng-view=""></div>
    </div>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>

<!-- 使用id直接把页面信息放在script标签里面 -->
<script type="text/ng-template" id="home.html">
    <h1>Home</h1>
</script>
<script type="text/ng-template" id="about.html">
    <h1>About</h1>
</script>

<script>
    var app = angular.module('myApp',['ngRoute']);
    app.controller('homeCtrl',['$scope',function($scope){

    }])
    app.controller('aboutCtrl',['$scope',function($scope){

    }])
    app.config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/home',{
            templateUrl:'home.html',
            controller:'homeCtrl'
        }).when('/about',{
            templateUrl:'about.html',
            controller:'aboutCtrl'
        }).otherwise({
            redirectTo:'/home' //设置默认进入的页面
        })
    }])
</script>

效果图如下： ng-route

Narutocc commented 7 years ago

多层路由使用ui-router

以下案例的目录结构： file

ui-router.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>ui-router</title>
</head>
<body>
    <a href="#/index">index</a>
    <a href="#/home">home</a>
    <div ui-view=""></div>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>
<script>
    var app = angular.module('myApp',['ui.router']);
    // 用到 $stateProvider 和 $urlRouterProvider 两个服务
    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        // 通过$stateProvider的state()函数来进行路由定义
        $stateProvider.state('index',{
            url:'/index',
            templateUrl:'template/index.html'
        }).state('index.a',{
            url:'/a',
            templateUrl:'template/a.html'
        }).state('index.b',{
            url:'/b',
            templateUrl:'template/b.html'
        }).state('home',{
            url:'/home',
            templateUrl:'template/home.html'
        })

        // 使用when来对一些不合法的路由进行重定向，默认打开的文件
        // $urlRouterProvider.when('*(或者为空也可以)','/index')路由为空时默认进入/index
        $urlRouterProvider.when('','/index');
    }])
</script>
</html>

一级路由index.html

<p>index</p>
<a href="#/index/a">a</a>
<a href="#/index/b">b</a>
<div ui-view=""></div>

一级路由home.html

<p>home</p>

二级路由a.html

<p>a</p>

二级路由b.html

<p>b</p>

效果图如下： ui-router

Narutocc commented 7 years ago

单层路由

ng-route:编写路由步骤：

引入 <script src="js/angular.js"></script>
引入 <script src="js/angular-route.js"></script>
注入依赖模块 ngRoute angular.module('myApp',['ngRoute']);
使用ngView指令 <div ng-view=""></div>

配置$routeProvider,定义路由规则


app.config(['$routeProvider',function($routeProvider){

}])


### 多层路由
**ui-router:编写路由步骤：**
1. 引入 `angular.js`
2. 引入 `angular-ui-router.js`
3. 主模块依赖  `“ui.router”`
4. 使用uiView指令
`<div ui-view=""></div>`
5. 配置

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

}])

Narutocc / angular

ng-route && ui-router #8

单层路由使用ng-route

多层路由使用ui-router

单层路由