码迷,mamicode.com
首页 > Web开发 > 详细

Require.js、Angular.js整合

时间:2015-06-14 22:49:29      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:require-js   requirejs   angular   angularjs   angular-js   

Require.js

详见:
初识Require.js
解密Require.js

Angular.js

详见:
初识Angular.js之爱恨情仇

整合Require.js、Angular.js

配置

在Requirejs中配置angular.js。
require-main.js

// 配置
requirejs.config({
...
  paths: {
    ‘jquery‘: ‘libs/jquery-2.1.3/jquery.min‘,
    ‘angular‘: ‘libs/angular-1.3.15/angular.min‘
  },
  shim: {
    ‘angular‘: {
      deps: [‘jquery‘],
      exports: ‘angular‘
    }
  },
  ...
});

创建

创建Angularjs应用模块。
angular-app.js

// 创建
define([‘angular‘], function(angular) {
  return angular.module(‘angularApp‘, []);
});

加载、启动

通过Requirejs加载、启动Angularjs
require-bootstrap.js

GlobalConfig.requireScripts.unshift(
  ‘angular‘,
  ‘angularApp‘
);
// 加载
requirejs(GlobalConfig.requireScripts, function (angular) {
  // 启动
  $(document).ready(function(){
    angular.bootstrap(document, [‘angularApp‘]);
  });

});

页面引用

<script src="/libs/require/require.js"></script>
<script src="/require-main.js"></script>
<script src="/require-bootstrap.js"></script>

文件中引用Angular.js

通过Requirejs依赖注入,引入angularjs模块

define([
  ‘angularApp‘ // 引入angularjs
], function(
  angularApp
) {

  angularApp.factory(‘loginService‘, function() {
    var loginService = {};

    loginService.login = function (data) {
      window.location.href = ‘/welcome‘;
    };

    return loginService;
  });
});

通过Requirejs动态加载js文件

详见简单、强大的swig.js

Require.js、Angular.js整合

标签:require-js   requirejs   angular   angularjs   angular-js   

原文地址:http://blog.csdn.net/hai8902882/article/details/46495107

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!