angular+ui-router+requirejs整合demo

最新推荐文章于 2018-07-11 22:04:56 发布

tcsbtuchun

最新推荐文章于 2018-07-11 22:04:56 发布

阅读量1.9k

点赞数

分类专栏： web前端文章标签： requirejs ui-router angular ui-router+requirejs

本文链接：https://blog.csdn.net/u011690051/article/details/51445555

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p><a href="#/main">主页</a></p>
<div ui-view></div>
<script data-main="main" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
</body>
</html>

index2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<p><span ui-sref=".index1">page1</span></p>
<p><span ui-sref=".index2">page2</span></p>
<p><span ui-sref=".index3">page3</span></p>
<div ui-view></div>
</body>
</html>

main.js

(function(){
    require.config({
        paths : {
            "angular" : "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min",
            "route"   : "http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router"
        },
        shim : {
            "route" : {
                deps : ["angular"]
            }
        }
    });
    requirejs(["m"],function(){
        angular.bootstrap(document.body, ['myapp'])
    });
}());

m.js

define(["route"],function(){
    var myApp = angular.module('myapp', ['ui.router']);
    myApp.config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.when("", "/main");

        $stateProvider
            .state("main", {
                url: "/main",
                templateUrl: "index2.html"
            })
            .state("main.index1", {
                url:"/index1",
                template: "index1.html"
            })
            .state("main.index2", {
                url:"/index2",
                template: "Page-2.html"
            })
            .state("main.index3", {
                url:"/index3",
                template: "Page3.html"
            });
    });
    return myApp;
});