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的内容请忽略,大家自己喜欢放哪,在哪引用)

    
    
    


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

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


stay hungry! stay foolish!

你可能感兴趣的:(AngularJs)