angular-ui-router 基本观点

示例

index.html

<html>
    <head>
        <title>Angular-UI Router Example</title>
        <script type="text/javascript" xx_src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
        <script type="text/javascript" xx_src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
        <script type="text/javascript" xx_src="../js/script.js"></script>
    </head>
    <body ui-view="mainView"> <!-- Defining a container for our view -->
    </body>
</html>

script.js

var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', function($stateProvider){
    $stateProvider.state('home', {                        // 创建一个称为“家”的状态
        url: '',                                          // 空URL表示当没有其他状态被调用时，此状态将被加载到主URL上
        views: {
            'mainView': {                                 // 我们在HTML中定义的视图容器部分
                template: '<h1>It works!</h1>'            // 为该视图设置模板
                /*templateUrl: '../templates/home.html'*/ //templateUrl将加载文件并将其内容用作模板
             }
        }
    });
}])

基础教程