angularjs 搭建WEB项目

最新推荐文章于 2025-07-22 15:04:22 发布

转载最新推荐文章于 2025-07-22 15:04:22 发布 · 610 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000013044089

文章标签：

#测试 #前端 #ui #ViewUI

本文介绍了一种使用AngularJS结合自定义指令和工具搭建前端框架的方法，通过懒加载技术加速大型管理系统的开发效率。文章详细说明了技术栈的选择与项目组织结构。

angularjs-ey-ui

angularjs 实现网页版前端框架搭建，通过开发引入自定义指令及工具，及懒加载实现方式适合快速开发大型管理系统。

源码地址

源码地址： https://github.com/toutouping...

主要功能

菜单
懒加载
组件化
路由切换菜单功能

效果展示

图片描述

技术栈

angularjs 是一款优秀的前端JS框架，有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。
angular-ui-router 它是一个第三方路由框架，允许通过状态机制组织接口，而不是简单的URL路由。

require 实现js文件的异步加载以及管理模块之间的依赖性。

ocLazyLoad 通过 ocLazyLoad 实现动态（懒）加载模块和依赖。

Angular directives for Bootstrap angularjs 第三方指令插件。（注：本案例中主要是引入我自定义的组件，为了方便快速可以直接引入此UI）

Build Setup

# install dependencies
cnpm install

# serve with hot reload at localhost:8080
cnpm run server

项目组织架构

app/  
    home/                      -->登录模块文件夹
        controllers/            -->控制器文件夹
        directives/             -->指令文件夹
        services/               -->服务文件夹 
    login/                      -->登录模块文件夹
        controllers/            -->控制器文件夹
        directives/             -->指令文件夹
        services/               -->服务文件夹   
framework/                      -->主程序入口
theme/
    css/                        -->项目的样式文件夹
    img/                        -->项目的图片文件夹    
lib/                            -->项目使用的第三方库以及自定义库
index.html                      -->应用的入口文件
main.js                         -->加载语言等信息