# angularjs-collect

**Repository Path**: hongjunyong/angularjs-collect

## Basic Information

- **Project Name**: angularjs-collect
- **Description**: 基于ui-router、requirejs、AMD后台管理项目搭建
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2017-11-02
- **Last Updated**: 2021-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于ui-router + requirejs + AMD搭建后台管理项目

## 1、效果展示
[http://myoli.xin/angularjs-collect/app/index.html#/index](http://myoli.xin/angularjs-collect/app/index.html#/index)

## 2、项目源代码
[https://gitee.com/hjy1993/angularjs-collect](https://gitee.com/hjy1993/angularjs-collect)

## 3、项目运行
    安装gulp：npm install gulp -g
    运行项目：gulp

## 4、目录结构介绍
    angularjs-collect
     |- app
        |- asset/bower_components 插件安装路径
        |- components
            |- module 具体模块
            |- system 基本布局
            |- wrapper.router.js 总路由配置（子路由要在这里引用）
        |- js 
            |- directive 指令
            |- service 服务
        |- scss 
            |- mixins css通用方法
            |- pages 项目页面对应的页面
            |- parts 相关组件样式
            |- asset.scss 引入第三方的样式
            |- oli-variables.scss 自定义颜色
            |- theme.scss 项目全局样式引用
        |- index.html 入口页面
        |- main.js 路由与依赖关系配置(配置各种引用)
        |- app.js 定义初始化angular项目的配置
        |- common.js 项目必备引用
        |- config.js 全局注入依赖

## 5、安装必要插件(版本需注意，易错)
> bower install angular@1.6.1（更新至1.6.8）

> bower install angular-ui-router@0.4.2

> bower install angularAMD@0.2.1

> bower install requirejs --save-dev

## 6、切入点data-main可以简写成main
    data-main="./main.js"
    
## 7、最后执行app.js文件
    deps: ['app']
    
等同于
    
    require(['app'],function(){
    })

## 8、路由采用绝对定位
    views:{
        // 容器页
        '':angularAMD.route({
            abstract: true,
            templateUrl: 'components/wrapper.html',
            controllerAs:'wrapperVM',
            controllerUrl: 'components/wrapper.controller.js',
            controller:'wrapper.controller'
        }),
        // 头部视图
        'header@index':angularAMD.route({//表示名为header的view属于index模板
            templateUrl: 'components/system/header/header.html',
            controllerAs:'headerVM',
            controllerUrl: 'components/system/header/header.controller.js',
            controller:'header.controller'
        })
        ......
    }

## 9、项目结构划分
    采用相对定位（当页面放大倍数，目录视图、内容不会被头部导航遮挡；并且目录、内容被撑满会自动出现滚动条）