AngularJS 与 RequireJs 集成

最新推荐文章于 2023-01-10 14:43:34 发布

timelessmemoryli

最新推荐文章于 2023-01-10 14:43:34 发布

阅读量1.9k

点赞数

分类专栏： Angularjs requirejs 文章标签： AngularJs RequireJs

本文链接：https://blog.csdn.net/u014788227/article/details/50739634

版权

Angularjs 同时被 2 个专栏收录

55 篇文章 1 订阅

订阅专栏

requirejs

3 篇文章 0 订阅

订阅专栏

目录结构

各文件清单

index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
       <title>AngularJs And RequireJs</title>
       <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="frontend/libs/bootstrap.min.css">
       <link rel="stylesheet" type="text/css" href="frontend/styles/index.css">
    </head>
    <body>
       <h1>This is index.html</h1>
       <a href="#" ui-sref="ab">go to ab state</a>
      <div ui-view="a"></div>
      <div ui-view="b"></div>
    </body>
    <script type="text/javascript" data-main="main" src="frontend/libs/require.js"></script>
</html>

main.js

require.config({
    baseUrl : 'frontend',
    paths : {
        //一些库文件
        'jquery': 'libs/jquery.min',
        'angular': 'libs/angular',
        'ui-router': 'libs/angular-ui-router',
        //js文件
        'bootstrap': "/AngularRequire/bootstrap",
        'app': "/AngularRequire/app",
        'router' : "/AngularRequire/router",
        'Controller' : 'controllers/Controller',
        'Directive' : 'directives/Directive',
        'Service' : 'services/Service'
    },
    shim : {
        'angular' : {
            exports :'angular'
        },
        'ui-router': {
            deps : ['angular'],
            exports : 'angular'
        }
    },
    deps : ['bootstrap'], //先运行该文件
    urlArgs : "bust=" + (new Date()).getTime() //防止读取缓存，调试用
});

bootstrap.js 启动引导angular, 下载路由，service, controller..

define(['jquery', 'angular', 'app', 'router', 'Service', 'Controller', 'Directive'], function(jquery, angular) {
   angular.element(document).ready(function() {
       angular.bootstrap(document, ['mainModule']);
   })
})

app.js 主模块

define(['jquery', 'angular', 'ui-router'], function(jquery, angular) {
return angular.module('mainModule', ['ui.router']);
})

router.js 配置路由

define(['app'], function(app) {
   app.config(['$stateProvider', function($stateProvider) {
        $stateProvider.state('ab', {
            url: '/ab',
            views : {
                'a' : {
                    templateUrl: 'frontend/partials/a.html',
                    controller : 'controller1'
                },
                'b' : {
                    templateUrl: 'frontend/partials/b.html',
                    controller : 'controller2'
                }
            }
        });
    }]);
})

Controller.js 合并下载所有controller

define(['controllers/controller1', 'controllers/controller2'], function() {})

controller1.js

define(['app'], function(app) {
   app.controller('controller1', ['$scope', 'service1', function($scope, service1) {
       $scope.pageA = service1.getData();
   }])
})

controller2.js

define(['app'], function(app) {
   app.controller('controller2', ['$scope', 'service2', function($scope, service2) {
       $scope.pageB = service2.getData();
   }])
})

Directive.js 合并下载所有directive

define(['directives/directive1', 'directives/directive2'], function() {})

directive1.js

define(['app'], function(app) {
   app.directive('a1', function() {
       return {
           restrict : 'E',
           replace : true,
           template : '<label>directive1</label>'
       }
   });
})

directive2.js

define(['app'], function(app) {
   app.directive('b', function() {
       return {
           restrict : 'E',
           replace : true,
           template : '<label>directive2</label>'
       }
   });
})

Service.js 合并下载所有service

define(['services/service1', 'services/service2'], function() {})

service1.js

define(['app'], function(app) {
   app.factory('service1', function() {
       return {
           getData : function() {
               return 'service1';
           }
       }
   })
});

service2.js

define(['app'], function(app) {
   app.factory('service2', function() {
       return {
           getData : function() {
               return 'service2';
           }
       }
   })
});

a.html

<h2>pageA</h2>
<span>{{pageA}}</span>
<a1></a1>

b.html

<h2>pageB</h2>
<span>{{pageB}}</span>
<b></b>

index.css 合并所有css

@import url('1.css');
@import url('2.css');

1.css

span {
color: blue;
}

2.css

label {
color: orange;
}