大佬教程收集整理的这篇文章主要介绍了AngularJS实际项目应用——程序入口启动,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一步一步看程序怎么启动的,angularjs是单页应用,基本就一个页面,页面主要结构如下:
<div class="body-wrap"> <!-- body--> <div class="content-wrap" ui-view> </div> </div>
<script data-main="static/js/config-product" src="static/js/libs/require.js"></script>
(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); });//程序启动入口
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; });
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' } } },} } });
<div ui-view="content" class="taget-content-wrap animated " ng-style="contentLeft"></div>在结合上篇文章讲的详细路由过程,应该能明白程序是怎么跑起来的了。
以上是大佬教程为你收集整理的AngularJS实际项目应用——程序入口启动全部内容,希望文章能够帮你解决AngularJS实际项目应用——程序入口启动所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。