首页 > 代码库 > angular-ui-router速学

angular-ui-router速学

2024-09-11 08:17:54   217人阅读

Demo1

初始化

<html ng-app="app">
<head>
    <style>.active { color: red; font-weight: bold; }</style>
</head>
<ul class="nav navbar-nav">
  <li>
    <a ui-sref="home" ui-sref-active="active">Photos</a>
  </li>
  <li>
    <a ui-sref="about" ui-sref-active="active">About</a>
  </li>
</ul>    


<div ui-view>

</div>

    
<script src="http://www.mamicode.com/node_modules/angular/angular.js"></script>
<script src="http://www.mamicode.com/node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
    angular.module(‘app‘,["ui.router"])
    .config(function($stateProvider){

        let routeStates = [
            {
                name: ‘home‘,
                url: ‘/home‘,
                template: ‘<h3>home!</h3>‘
            },
            {
                name: ‘about‘,
                url: ‘/about‘,
                template: ‘<h3>about!</h3>‘
            }
        ]

        routeStates.forEach(state => {
            $stateProvider.state(state);
        })
    })

</script>
</html>

Demo2

使用controller和templateUrl属性

<script>
    angular.module(‘app‘,["ui.router"])

    .controller(‘loginController‘, function($scope) {
        $scope.name = ‘finley‘;
    })
    .config(function($stateProvider){

        let routeStates = [
            {
                name: ‘home‘,
                url: ‘/home‘,
                template: ‘<h3>home!</h3>‘
            },
            {
                name: ‘about‘,
                url: ‘/about‘,
                template: ‘<h3>about!</h3>‘
            },
            {
                name: ‘login‘,
                url: ‘/login‘,
                controller: ‘loginController‘,
                templateUrl: ‘views/login.html‘
            }
        ]

        routeStates.forEach(state => {
            $stateProvider.state(state);
        })
    })

</script>

项目代码：https://git.oschina.net/finley/angular-ui-router-demo/

参考：https://github.com/angular-ui/ui-router/wiki

 

angular-ui-router速学


联系
我们