angularjs+requirejs整合

通过requirejs的配置让angularJS可以正常运行。以下是配置的步骤：

环境需求

require.js
angular.js

有了这两文件，就可以进行下一步了，具体将文件放到哪个目录，可以跟项目的目录结构走，无所谓。

配置步骤

首先要配置require.js的入口文件main.js

require.config({

    //配置angular的路径

    paths:{

        "angular":"js/angular",

    },

    //这个配置是你在引入依赖的时候的包名

    shim:{

        "angular":{

            exports:"angular"

        }

    }

})

配置地址的时候容易出错，这里需要些耐心。
下一步是最关键的一步了，我在弄的时候被绕懵了好几次，英文网站上的教程用的名词容易分不清，英文不好是硬伤。。。
我们平常在写angular的时候是这样写的：

var app = angular.module("模块名",[]);

app.controller("foo",function($scope){});

app.directive(...)

可以看到，几乎所有的操作都是在app上进行的。那么，在使用requirejs的时候，我们通常是这样写模块的：

define(["jquery"],function($){})

而两者结合起来理想中应该是这样的：

//ctrl.js

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

    app.controller("mainController",function($scope){

        ...

    })

})



//dirct.js

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

   app.directive("xxx",function(scope){

        ...

    })

})

可以看到，我们在编写controller和directive（或者service等等）的时候，都需要将方法作用在app上，那么这个app是什么的呢，其实可以想到，

就是angular.module("模块名",[])
那么，如何让所有的模块都能引入angular.module("模块名",[])呢，我们新建一个app.js

define(["angular","angular-route"],function(angular){

    return angular.module("模块名",[]);

})

这样，我们在引入app.js的时候，就可以拿到这个angular module了。

当这些步骤都做完之后，你会发现，这个程序还是跑步起来。所以我们还有最后一步。在启动一个angular程序的时候，需要把所有使用angularjs编写的模块都加载到页面中，要不然肯定会报错。。所以，我们需要一个angular的加载模块，这里我们可以在main.js里面添加

//main.js完整版

require.config({

  //配置angular的路径

    paths:{

        "angular":"js/angular", 
        "ctrl:"js/ctrl",
        "dirct":"js/dirct",
        "app":"js/app"

    },

    //这个配置是你在引入依赖的时候的包名

    shim:{

        "angular":{

            exports:"angular"

        }

    }

 }); 
require(["angular","ctrl","dirct","app"], function(angular) { angular.bootstrap(document,["app"]); });

angular.bootstrap方法是angular自带的，顾名思义，如果手工去调用，就是启动一个angular app的意思。具体看文档。

这样，在你的页面中引入<script src="js/require.js" data-main="js/main.js"></script>，就可以运行angular程序了！

index.html

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>My AngularJS AngularJS + RequireJS App</title>

  <link rel="stylesheet" href="css/app.css">

</head>

<body>

  <ul class="menu">

    <li><a href="#/view1">view1</a></li>

    <li><a href="#/view2">view2</a></li>

  </ul>

<div data-ng-view></div>

<div>Angular Require seed app: v<span app-version></span></div>

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

</body>

</html>

以上需要注意的地方：

1、index.html页面不要添加ng-app指令，否则会报错，详情请参考angularjs的加载流程，使用require.js时推荐使用angularjs手动加载方式

angular.bootstrap(document,["app"]，不用使用自动加载；

2、如上配置完之后，页面的加载会有闪烁，于是将模板中的{{xxx}}都改成了ng-bind的形式。改完了之后从页面渲染完到angular将数据填充完毕的那几百毫秒还是会闪一下。于是我想出了个hack，就是现在body或者某父标签上加一个class这个class是负责visibility:hidden的。等到angular把数据填充完毕，再用jQuery把那个class remove掉，这样就不会有闪烁了，进来先是空白的，然后一下子出来，也比较符合平常的用户习惯。

参考文档：http://www.startersquad.com/blog/angularjs-requirejs/

巴特西

angularjs+requirejs整合

环境需求

配置步骤

最新文章

热门文章