使用angularjs1.x构建前台开发框架（一）——构建基础架构

àì夳堔傛蜴生んèń 2022-07-16 05:07 193阅读 0赞

在web应用开发中，前台模块正逐渐变得越来越厚重（这也是大势所趋，浏览器的功能和性能都在迅速提升，一部分本来需要后台支持的业务逻辑完全可以交给前台来完成），进而演变出了前台开发框架，而angularjs就是其中之一。但通常angularjs的学习往往局限于数据双向绑定、路由（ui-router或ng-route）或者自定义标签这一类单点的功能，很少提及如何构建一个完整的可直接进行二次业务开发的web应用前台框架（当然，同一个架构也不可能适用于所有的业务场景），下面就给出这样一个例子。

例子的功能很简单：实现一个菜单，当点选菜单项条目时，子界面切换为对应的菜单项界面（但可以在此基础上扩展开发业务模块界面，后续也会在这个骨干框架的基础上补充其他框架模块用于web开发）。

下面是项目代码结构图：

![20161006211756473][]

下面是运行效果图（很丑，因为没怎么调样式，凑合看吧）：

![20161006212010271][]

IDE版本和依赖库版本：

IDE：WebStorm 10.0.3

依赖库：

angular 1.5.1 下载地址：[augularjs下载][augularjs]

angular-ui-router 0.2.13 下载地址：[angular-ui-router下载][angular-ui-router]

jquery 3.1.1 下载地址：[jquery下载][jquery]

require 2.1.9 下载地址：[requirejs下载][requirejs]

当这个框架工程构建完成后，我们可以在app目录下写业务涉及的界面，当然，这些业务界面必须在框架中注册。不多说，下面给出代码干货：

index.html：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>欢迎</title>
    </head>
    <body>
        <div id="menu" ng-controller="frameworkCtrl" ng-include="menus.url"></div>
        <div ui-view style="min-width: 1280px; max-width: 1440px; margin: 58px auto 0; border:1px solid #F00"
             ng-animate="{enter: 'fade-enter'}"></div>
        <script type="text/javascript" src="lib/require.js" data-main="main"></script>
    </body>
    </html>

主html页面：

第一个div为主菜单模块，ng-controller为主菜单模块定义控制器，ng-include则为主菜单模块链接上（显示）在控制器内定义的一个外部html（即运行效果图上的菜单界面），这个外部html在控制器内定义（即前面的frameworkCtrl中定义）。通常为模块定义控制器要求外部已声明module的作用域（即外层模块必须声明使用的ng-app），但这里为什么不需要呢？因为在下面的main入口函数有这样一句话：

var injector = angular.bootstrap($("html"),\[framework.name\])

这句实际上是为html元素声明了作用域（即framework这个module），效果等同于：

这样我们在为主菜单模块定义控制器的时候，外部html元素已经声明了module作用域，所以不会有问题。

第二个div为菜单项界面，在本例中使用的是ui-router，因此路由标签为ui-view（如果使用的是ng-route，标签应为ng-view），当主菜单触发菜单切换后，切换的对应菜单项界面在这里显示（比如在主菜单中点击了login，则对应的login子页面会在此处显示）。

基于框架的二次开发可以在这里做权限控制、页面的排版（比如主菜单div和菜单项div可以进行样式优化调整）或者为主菜单引入一些菜单树控件。

main.js：

/**
     * Created by 李庆 on 2016/10/6.
     */
    require.config({
        "shim":{
            "lib/angular":{
                "deps":["lib/jquery-3.1.1"],
                "exports":"angular"
            },
            "lib/angular-ui-router":{
                "deps":["lib/angular"]
            },
            "lib/jquery":{
                "exports":"$"
            }
        }
    });
    
    require(["framework/framework"],function(framework){
        var injector = angular.bootstrap($("html"),[framework.name])
    });

主（main）函数（入口函数）：

在require.config中定义整个前台框架的依赖库，后续会专门写一篇require使用的blog，这里就不赘述了。第二个require则是为整个html声明作用域。

当开发需要新增一些依赖库时，需要在这里声明引用。在主函数里不建议加入具体的业务处理代码，不过浏览器兼容性的判断或者session的处理可以放在这里做。

framework.js

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["lib/angular","lib/angular-ui-router","framework/config/frameworkConfig",
            "framework/controller/frameworkCtrl"],function(angular,router,frameworkConfig,frameworkCtrl){
            var dependency = [
                "ng",
                "ui.router",
                frameworkConfig.name
            ];
            var framework = angular.module("framework",dependency);
            framework.controller("frameworkCtrl",frameworkCtrl);
            return framework;
        }
    )

框架module：

构造html所需的module供main函数使用，dependency是构造module的依赖module（module的名称和module的文件名可能不同，如angular文件的内的module名称为ng，声明依赖是要么直接写module名称，要么写成文件名.name，如果用文件名.name，那么必须保证文件符合AMD规范），构造module完成后为module声明控制器，即主菜单界面所使用的frameworkCtrl。

框架支持多个路由树，比如在云计算项目中，管理员和租户看的菜单功能是完全不同的，就可以在框架module中增加一个路由树的依赖（每一个路由树实际是一个独立的module）。

frameworkConfig.js

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["lib/angular","lib/angular-ui-router"],function(angular,router){
        var serviceConfigs = ["$stateProvider","$urlRouterProvider","$controllerProvider",
            function($stateProvider,$urlRouterProvider,$controllerProvider){
    
                $urlRouterProvider.otherwise("/login");
    
                $stateProvider.state("login",{
                    url:"/login",
                    template:"<span>login</span>"
                });
    
                $stateProvider.state("c1",{
                    url:"/c1",
                    template:"<span>Page c1</span>"
                });
    
                $stateProvider.state("c2",{
                    url:"/c2",
                    templateUrl:"app/views/c2.html",
                    controller:"c2.ctrl",
                    resolve:{
                        deps:function($q,$rootScope){
                            var deferred = $q.defer();
                            var dependencies = ["app/controllers/c2.js"];
                            require(dependencies,function(ctrl){
                                $rootScope.$apply(function(){
                                    $controllerProvider.register("c2.ctrl",ctrl);
                                    deferred.resolve();
                                });
                            });
                            return deferred.promise;
                        }
                    }
                });
        }];
        var frameworkConfig=angular.module("frm",["ui.router"]);
        frameworkConfig.config(serviceConfigs);
        return frameworkConfig;
    });

路由管理模块（使用ui-router）：

声明路由模块（路由作为module的配置来声明），每个路由模块包含请求url、url匹配视图、url匹配控制器等等信息（后面会补充说明如何注册一个功能完整的路由模块），每个路由模块相当于一个菜单项界面（当在实际业务开发中需要新增界面时，必须在路由模块中注册）。

$urlRouterProvider.otherwise是定义默认路由项，当界面请求了一个在路由管理模块未定义的路由时，则会显示默认路由项对应的界面。

在路由管理模块中可以注册开发完整的路由模块（注册过的路由模块就可以在主菜单上点击查看了）。

frameworkCtrl.js

/**
     * Created by 李庆 on 2016/10/6.
     */
    define([],function(){
        var frameworkControl=["$rootScope","$scope",function($rootScope,$scope){
            $rootScope.menus={
                "url":"framework/views/menu.html"
            };
        }];
        return frameworkControl;
    })

框架module的控制器：

在控制器内部只声明了外部html的路径。

主菜单的控制器不建议处理过多的具体业务，但一些通用的全局变量可以放在此处。

menu.html

<div style="min-width: 1280px; max-width: 1440px; margin: 58px auto 0; border:1px solid #F00">
        <div>
            <ul>
                <li>
                    <a ui-sref="login">login</a>
                </li>
                <li>
                    <a ui-sref="c1">c1</a>
                </li>
                <li>
                    <a ui-sref="c2">c2</a>
                </li>
            </ul>
        </div>
    </div>

框架module控制器内声明的html：

包含三个路由项，每个路由项按ui-sref的格式来定义，ui-sref内容就是在路由管理模块中定义的url，在实际的业务开发中应当保证页面上提供的路由必须在路由管理模块中定义过，否则会出错（如在路由管理模块中定义了默认路由，则会显示默认路由的界面）。

当新增一个路由模块时，同时需要在主菜单界面新增一项（怎么修改视使用哪种菜单树控件而定）。

c2.js

/**
     * Created by 李庆 on 2016/10/6.
     */
    define([],function(){
        var c2Controller = function($scope){
            $scope.test = function(){
                console.log("enter controller");
            };
        };
        return c2Controller;
    });

c2菜单项路由模块定义的控制器：

在该控制器内部只定义了一个打印enter controller字符串的函数。

实际上这里是处理业务逻辑的地方，菜单项界面上所有的业务处理代码都在此处。

c2.html

c2菜单项路由模块定义的视图：

视图只包含一个按钮，点击会调用在控制器内部定义的打印函数。

这里则是实际的业务界面。

在这个例子中实际包含了两个MVC结构，一个是框架部分：frameworkCtrl.js是控制器（controller），index.html是视图（view），frameworkConfig.js可以算是数据模型（model，里面包含了菜单树信息）；另一个则是业务部分：c2.js是控制器，c2.html是视图，由于业务界面内容简单，不涉及到数据交互和展示，所以没有数据模型。

[20161006211756473]: /images/20220716/3ad5e0344bdb48f4a531581bda6f8167.png
[20161006212010271]: /images/20220716/e7c1bf6ce9d946f7af044e109d125ebd.png
[augularjs]: https://code.angularjs.org/
[angular-ui-router]: http://download.csdn.net/download/qq_27195003/9229013
[jquery]: http://jquery.com/download/
[requirejs]: http://download.csdn.net/download/yangnianbing110/6607231