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

使用requirejs来管理angularJS依赖示例

时间:2015-04-14 19:50:29      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:requirejs

  有关requirejs是什么在这里不做解释,只用纯代码实战让你感受requirejs依赖管理的强大。

一、首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用。

//配置依赖
require.config({
    paths: {
      "angular":"angular"
    },
    shim:{
        "angular": {
            "deps":[],
            "exports": "angular"
        }
    }
  });

//定义模块
define([
    'angular',
    'controller'
    ], function (angular) {    
  
    angular.module('HelloModel', ['HelloCtrls']);

    return {
        angularModules: [ 'HelloModel' ]
    };    
    
});


二、定义angular中的控制器模块controller.js

define([ 'angular' ], function(angular) {

    var componentCtrls = angular.module('HelloCtrls', []);

     componentCtrls.controller('helloCtrl', [ '$scope', function($scope) {
        $scope.greet = "hello world";
      } ]);

    return componentCtrls;
});


三、新建一个index.html文件测试

<!DOCTYPE html>
<html ng-app="HelloModel">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="js/require.js" data-main="js/main" defer async="true" ></script>
</head>
<body ng-controller="helloCtrl">

{{greet}}

</body>
</html>


四、文件组织结构

     技术分享


       最简单的demo示例,有用你就点个赞吧!后期可能会修改,也欢迎大家提意见O(∩_∩)O~


使用requirejs来管理angularJS依赖示例

标签:requirejs

原文地址:http://blog.csdn.net/u010834071/article/details/45045743

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