1、入口页面

存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp

[html] view plain copy 在CODE上查看代码片派生到我的代码片

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title></title>

<link href="<%=request.getContextPath()%>/static/css/bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet">

<link href="<%=request.getContextPath()%>/static/css/sweetalert/sweetalert.css" rel="stylesheet" >

<link href="<%=request.getContextPath()%>/static/css/angularCommon.css" rel="stylesheet" >

<script data-main="<%=request.getContextPath()%>/static/js/workflow/app.js" src="<%=request.getContextPath()%>/static/js/bower_components/requirejs/require.js"></script>

</head>

<body>

<div>

<h1>这里是公共头部</h1>

</div>

<div ng-controller = "baseCtrl">

<!--     <button ng-click = "baseClick()">按钮测试</button> -->

<div ui-view></div>

</div>

<div>

<h1>这里是公共尾部</h1>

<button id = "test">根据js内容动态显示</button>

</div>

</body>

</html>

在上面引入了requirejs

2、app.js

[html] view plain copy 在CODE上查看代码片派生到我的代码片

require.config({

paths: {

"angular": "../angular/1.5.3/angular.min",

"angular-messages":"../angular/1.5.3/angular-messages.min",

"angular-locale_zh-cn":"../angular/1.5.3/angular-locale_zh-cn",

"angular-ui-router": "../bower_components/angular-ui-router/release/angular-ui-router",

"angularAMD": "../bower_components/angularAMD/angularAMD",

"ngload": "../bower_components/angularAMD/ngload",

"sweetalert": "../sweetalert/sweetalert.min",

"uiBootstrap": "../angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls-1.2.4.min",

"commonFunction":"../angularCommon/commonFunction",

"commonValueAndUrl":"../angularCommon/commonValueAndUrl",

"workFlowCommonModule":"../angularCommon/workFlowCommonModule"

},

shim: {

"angular": { exports: "angular" },

"workFlowCommonModule": ["angular"],

"angular-messages": ["angular"],

"angular-locale_zh-cn": ["angular"],

"commonValueAndUrl": ["commonFunction"],

"angular-ui-router": ["angular"],

"uiBootstrap": ["angular-ui-router"],

"angularAMD": ["angular"],

"ngload": ["angularAMD"]

}

});

define(["angular", "angularAMD", "angular-ui-router","sweetalert","uiBootstrap","angular-messages","angular-locale_zh-cn","commonFunction","commonValueAndUrl","workFlowCommonModule"], function (angular, angularAMD) {

var registerRoutes = function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise("/home");

$stateProvider.state("home", angularAMD.route({

url: "/home",

templateUrl: "../static/js/workflow-view/home-view.js",

controllerUrl: "../static/js/workflow/home.js"

}))

.state("about", angularAMD.route({

url: "/about",

templateUrl: "../static/js/workflow-view/about-view.js",

controllerUrl: "../static/js/workflow/about.js"

}))

;

};

var app = angular.module("app", ["ui.router",'ui.bootstrap','ngMessages','commonModule']);

app.config(["$stateProvider", "$urlRouterProvider", registerRoutes]);

app.controller('baseCtrl',function($scope,$uibModal,sendAjaxFactory) {

$scope.baseClick = function () {

swal("测试按钮")

}

});

return angularAMD.bootstrap(app);

});

在这里引入了一些需要的模块,其中就一些模块是笔者我自己写的。有的是第三方插件的

这里特别注意,由于SpringMVC会拦截.jsp结尾的文件。所以动态加载 的页面笔者都写到js文件中。如上面的about-view.js和home-view.js.其要动态加载的js文件分别 为about.js和home.js。如果不使用SpringMVc。那么动态加载的页面就可以不用写到js文件中(笔者 的工程中配置了拦截.jsp文件,不拦截.js文件)

AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】的更多相关文章

  1. AngularJS+RequireJs实现动态加载JS和页面的方案研究【中】

    3.动态加载的内容: home.js [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.co ...

  2. AngularJS+RequireJs实现动态加载JS和页面的方案研究【下】

    about.js: [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.controller( ...

  3. [AngularJS] 使用AngularAMD动态加载Controller

    [AngularJS] 使用AngularAMD动态加载Controller 前言 使用AngularJS来开发Single Page Application(SPA)的时候,可以选用AngularU ...

  4. [AngularJS] 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

  5. [AngularJS] 使用AngularAMD动态加载Service

    [AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...

  6. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

  7. 使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  8. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  9. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

随机推荐

  1. QuantLib 金融计算——随机过程之概述

    目录 QuantLib 金融计算--随机过程之概述 框架 用法与接口 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--随机过程之概述 载入模块 import Q ...

  2. 深入浅出理解基于 Kafka 和 ZooKeeper 的分布式消息队列

    消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题.实现高性能,高可用,可伸缩和最终一致性架构,是大型分布式系统不可缺少的中间件. 本场 Chat 主要内容: Kafk ...

  3. webpack打包报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    npm install –save-dev extract-text-webpack-plugin@next 会下载到+ extract-text-webpack-plugin@4.0.0-beta. ...

  4. android samsung note3  device not found

    descriptiong : android  samsung note3 device not found solution: usb link by PTP, DONE! (be curiosly ...

  5. Java简易撞鬼游戏demo

    9*9方格内两点随机行走,相遇则停止. public class 撞鬼 { public static int length = 9; public static char[][] matrix = ...

  6. 使用grunt搭建自动化的web前端开发环境

    使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...

  7. Nginx PHP fpm forbidden 原因

    可能是标红目录层级不一致 location / { root /var/www/html/public; index index.php; } location ~ \.php$ { root /va ...

  8. [问题解决]Fresco设置圆角效果不生效问题探究

    [问题解决]Fresco设置圆角效果不生效问题探究 /** * Created by diql on 2017/2/21 11:07:04. */ 问题 在View中设置: fresco:rounde ...

  9. Kaggle之路,与强者为伍——记Santander交易预测

    Kaggle--Santander Customer Transaction Prediction 原题链接 题目 Description 预测一个乘客在未来会不会交易,不计交易次数,只要有交易即为1 ...

  10. chrome bookmarks location

    .config/google-chrome/Default file: Bookmarks