AngularJs与EasyUI的结合使用（一）————环境的搭建

因为最近在做关于 node.Js+AngularJs 的项目，项目的编写过程中遇到了一些问题。

由于想用 EasyUi 中的 numberspinner （数字微调器），所以安装了 EasyUi 的 model

由此牵引出来了一大串的问题。我会分为几篇文章，来分享一下解决问题所得到的经验。

首先，这一篇我来讲解一下我的项目环境和环境的配置方法。开发工具用的是 jetbrains 公司制作的 Webstorm，工程为 node ，前端应用 AngularJs、HTML、CSS。后端应用 node.Js。

我们先安装 AngularJs 的模块和 EasyUi 的模块（这一步是为了后端 node 的，若没有应用到，可以不装）

npm install AngularJs --save

npm install ng-easyui --save

然后，我们上 EasyUi 的官网，下载前端上使用的 EasyUi 插件。在 AngularJs 中文网，下载 AngularJs 的插件（官网太卡了）。

EasyUi官网链接：http://www.jeasyui.com/download/v155.php

AngularJs中文网链接：http://www.angularjs.net.cn/download/

下载好后，整个放到你的项目上就可以了，注意路径，之后引用（千万别放到后台上了，那样前台找不到路径会给你报404，node 项目上我是放在 public 路径下的 plugins 下了，自己建的，改了个名 ng-easyui）

接下来，导入 EasyUi 的 CSS 样式，在你的 CSS 文件里（没有的话直接在 HTML 文件里导就行），加上下面代码

    @import '../plugins/ng-easyui/themes/material/easyui.css'
    @import '../plugins/ng-easyui/themes/angular.css'
    @import '../plugins/ng-easyui/themes/icon.css'

写在文件最前面就行了

我们需要的 Js 文件一共有三个，注意，其中 jquery.easyui.min.js 和 jquery.min.js 都在 ng-easyui 下

页面上导入 JavaScript 文件就可以了，三个，注意！一定要按照下面的顺序导入，其中 AngularJs 的位置可以随意（src的内容请忽略，大家自己喜欢放哪，在哪引用）

    <script src="../JS/jquery.min.js" type="text/javascript" charset="utf8"></script>
    <script src="../JS/jquery.easyui.min.js" type="text/javascript" charset="utf8"></script>
    <script src="../plugins/Angular/Angular.js" type="text/javascript" charset="utf8"></script>

关于为什么要按顺序来引用，大家可以了解一下 JavaScript 在页面加载时的加载方式。如果有什么不理解的也可以在下方的留言处留言给我，如果大佬们觉得我哪里写的有问题，希望可以帮我指出，大家一起学习，一同进步。

到这里，我们就将所需要的编程环境搭建完成了。

stay hungry! stay foolish!