AngularJS实际项目应用——程序入口启动

来源：互联网发布：淘宝女装店铺人气排名编辑：程序博客网时间：2024/05/17 08:33

一步一步看程序怎么启动的，angularjs是单页应用，基本就一个页面，页面主要结构如下：

<div class="body-wrap">    <!-- body-->    <div class="content-wrap" ui-view>    </div></div>

页面最下面引入requirejs

<script data-main="static/js/config-product" src="static/js/libs/require.js"></script>

真正的程序启动点在config-product.js里

(function(window){        var appPath=window.contextPath+ '/static/js/'+(window.isMobile?'app_m':'app')+'/';        var globalConfig = {            apiUrl :  window.contextPath + "/v1/",......//配置一些全局路径，方便引用        };        window.globalConfig = window.globalConfig || globalConfig;})(window);requirejs.config({    baseUrl: window.globalConfig.appPath,    paths:{'modules': globalConfig.modulesPath,        'jquery':globalConfig.libPath+'jquery',        'angular':globalConfig.libPath+'angular', ......    },    shim:{               'jquery':{            exports:'$'        },        'angularAMD':{            deps:["angular"],            exports:"angular"        },               'angular':{            deps: ['jquery'],             exports: 'angular'         },......       })require(['app','angularAMD'], function(app,angularAMD) {    angularAMD.bootstrap(app);});//程序启动入口

接着看app.js

define([    'angular',    'angularAMD',,    'layout/app-layout.module',   ......], function (ng,angularAMD) {    'use strict';    require(["angularCN"]);    return angular.module('app',[......        'app.layout',        'app.interceptors'    ]).config(['$httpProvider', function($httpProvider) {        //config global interceptors               $httpProvider.interceptors.push('failureMsgInterceptor');    }])

app.js里定义一个app module，引入依赖，做一些配置，上面的代码中省略了好多依赖和配置。

其中最重要的是app-layout.module，因为在这个里面配置了程序的默认路由，所以这个模块需要直接引入进来，加到app的依赖中去，接着看看app-layout.module.js怎么写的，其实和上面几篇文章介绍的.module文件没啥不同

define(["require","angular",'utils/routerHelper',"layout/layout.routes","angular-bootstrap","angular-cookie"],function(require,ng,routerHelper,routerCfg) {  var module = ng.module('app.layout',["ui.bootstrap","ngCookies"]);routerHelper.call(module,routerCfg);return module;});

主要作用就是配置路由，这个路由文件告诉ui-router怎么去呈现默认的ui-view

define([], function(){    var basePath={        layout:cmpConfig.appPath+'layout/'    };    return {        routers: {            'app':{                url: "",                abstract:true,                dependencies: [                    basePath.layout+'layout.controller.js'                ],                views:{                    '@':{                        templateUrl: basePath.layout+'layout.html',                        controller:'LayoutCtrl'                    }                }            },        }    }});

到这里，ui-view就会呈现layout.html里面的东西了，layout.html里面会对整个页面进行布局，比如是上下结构还是左右结构，然后里面会留出一个内容区域，通过点击不同的菜单，在这个内容区域实现切换页面

<div ui-view="content" class="taget-content-wrap  animated " ng-style="contentLeft"></div>

在结合上篇文章讲的详细路由过程，应该能明白程序是怎么跑起来的了。

0 0