前端

使用Angularjs开发控制台类项目

核心特性：MVC、Module（模块化）、指令系统、双向数据绑定

1.MVC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!Doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <script>
            function HelloAngular($scope){
                $scope.greeting = {
                    text: "Hello"
                };
            }
        </script>
    </head>
    <body>
        <div ng-controller="HelloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>

2.Module（模块化）控制器模块化保证独立性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!Doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
     <script>
            var myModule = angular.module("HelloAngular", []);

            myModule.controller("helloAngular", ['$scope',
                function HelloAngular($scope) {
                    $scope.greeting = {
                        text: 'Hello'
                    };
                }
            ]);
        </script>
</html>

3.指令系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!Doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script>
        var myModule = angular.module("MyModule", []);
        myModule.directive("hello", function() {
            return {
                restrict: 'E',
                    template: '<div>Hi everyone!</div>',
                replace: true
            }
        });
    </script>
</html>

4.双向数据绑定 数据驱动视图示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<!Doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input ng-model="greeting.text"/>
            <p>{{greeting.text}},AngularJS</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>

项目结构与基本配置

  1. css
  2. images
  3. 其它js框架与工具引入（jq, mock等）
  4. 第三方组件引入（界面，字体，日期处理，图表，树结构等）
  5. 项目模块划分（通用，主控制台，header，sidebar，主项目功能区等）
  6. 进行路由分发的配置(main.js)

项目开发中的组件与功能模块

  1. modal框，modal框内数据交互
  2. 树结构的控制
  3. 全局搜索
  4. checkbox选中与删除等操作
  5. dataitem 编辑
  6. 分页控制
  7. tabs切换
  8. datagrid，排序，单列搜索，数据格式化

##自动化构建
grunt or webpack
grunt 配置文件

##测试 Karma

深度好文