Last active
December 21, 2015 10:23
-
-
Save simonwoo/9d417996d90ff55f711e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="myapp"> | |
| <head> | |
| <title>AngularJS: UI-Router Quick Start</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="container"> | |
| <p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i></p> | |
| <div class="navbar"> | |
| <div class="navbar-inner"> | |
| <a class="brand" href="#">Quick Start</a> | |
| <ul class="nav"> | |
| <li><a ui-sref="route1">Route 1</a></li> | |
| <li><a ui-sref="route2">Route 2</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="span12"> | |
| <div class="well" ui-view></div> | |
| </div> | |
| </div> | |
| <!-- Angular --> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> | |
| <!-- UI-Router --> | |
| <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> | |
| <!-- App Script --> | |
| <script> | |
| var myapp = angular.module('myapp', ["ui.router"]) | |
| myapp.config(function($stateProvider, $urlRouterProvider){ | |
| // For any unmatched url, send to /route1 | |
| $urlRouterProvider.otherwise("/route1") | |
| $stateProvider | |
| .state('route1', { | |
| url: "/route1", | |
| templateUrl: "route1.html" | |
| }) | |
| .state('route1.list', { | |
| url: "/list", | |
| templateUrl: "route1.list.html", | |
| controller: function($scope){ | |
| $scope.items = ["A", "List", "Of", "Items"]; | |
| } | |
| }) | |
| .state('route2', { | |
| url: "/route2", | |
| templateUrl: "route2.html" | |
| }) | |
| .state('route2.list', { | |
| url: "/list", | |
| templateUrl: "route2.list.html", | |
| controller: function($scope){ | |
| $scope.things = ["A", "Set", "Of", "Things"]; | |
| } | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
UI-route Doc