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

前端之家收集整理的这篇文章主要介绍了AngularJS实际项目应用——程序入口启动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一步一步看程序怎么启动的,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>
在结合上篇文章讲的详细路由过程,应该能明白程序是怎么跑起来的了。

猜你在找的Angularjs相关文章