# angular1_webpack2

**Repository Path**: hkgit/angular1_webpack2

## Basic Information

- **Project Name**: angular1_webpack2
- **Description**: angular1 + webpack2 + bootstrap3 + flex框架，非常实用，demo页面会后面添加
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2017-10-17
- **Last Updated**: 2022-12-12

## Categories & Tags

**Categories**: angular-extensions

**Tags**: None

## README

### Angular oi.select
- https://github.com/tamtakoe/oi.select

### Angular UI-Router
- http://www.tuicool.com/articles/zeiy6ff

### Webpack知识
- http://www.cnblogs.com/sloong/p/5570774.html
- http://webpack.github.io/docs/multiple-entry-points.html

### bootstrap icon
- http://glyphicons.bootstrapcheatsheets.com/
- http://www.tutorialspoint.com/bootstrap/bootstrap_glyph_icons.htm

### angular-ui-grid
- http://ui-grid.info/docs/#/tutorial

### angular-toastr
- https://github.com/Foxandxss/angular-toastr

### flex
- https://material.angularjs.org/latest/layout/introduction

### ngAnimate
- http://augus.github.io/ngAnimate/
- http://www.jb51.net/article/68107.htm
- http://embed.plnkr.co/0r7GdM91jU2NWsqPtruh/

## 框架

#### angular1 + webpack2 + bootstrap3 + flex

![Alt text](./app/img/app-pic.png)

    app.main.js     程序入口文件
    app.config.js   配置文件
    app.run.js      运行
    page.module.js  页面模块
    plug.module.js  插件

    page            功能模块，每一个模块至少由4个部分组成(route.js、controller.js、html、less)，并且在page.module.js添加注入
    directive       自定义指定放到该文件夹下，并且在directive.module.js添加注入
    serve           自定义服务放到该文件夹下，并且在serve.module.js添加注入
    style
    img


## 开发时注意

- 调用后台接口需引入'IHttp'

- 开发时，不需要再引入 '$state' 和 '$stateParams'，只需要引入$rootScope即可。

```
    使用时：$rootScope.$state 和 $rootScope.$stateParams
```


- ### [name].route.js

```
module.exports = angular.module('login', [])
    .config(route)
    .name;

route.$inject = ['$stateProvider'];

function route($stateProvider) {
    $stateProvider.state('login', {
        url: '/',
        template: require('./login.html'),
        less: require('./login.less'),
        controller: require('./login.controller.js')
    })
}
```

- ### [name].controller.js

```
LoginCtrl.$inject = ['$rootScope', '$scope'];

module.exports = LoginCtrl;

function LoginCtrl($rootScope, $scope) {

}
```

- ### [name].html

```
<div flex layout="column" id="login">
    // 使用flex 布局
</div>
```

- ### [name].less

```
#login {
    // 在外面包一层，所有的样式写在这里面
}
```