Require.js、Angular.js整合

页面导航:首页 > 网络编程 > JavaScript > Require.js、Angular.js整合

Require.js、Angular.js整合

来源: 作者: 时间:2016-01-23 10:23 【

Require js详见:初识Require js解密Require jsAngular js详见:初识Angular js之爱恨情仇整合Require js、Angular js配置在Requirejs中配置angular js。require-main js 配置requirejs config(

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文件

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<