原创AngularAMD 按需加载的实现
Posted web前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原创AngularAMD 按需加载的实现相关的知识，希望对你有一定的参考价值。
在进攻web前段这条路上要学习的东西太多了,虽然,步入这个行业才一年多，但是已经感觉到前端技术更新的速度了，自己也有做一个大牛的愿望，虽然前方的路很长，但是我依然努力前行！
最基础的css，js，html,jquery已经不够现在的开发方式和开发速度，所以引进新技术。
不管前端的技术有多少，让自己一个一个学会，并掌握才重要。
当时学习并使用AngularJS时，是因为自己想学习数据交互，并且通过nodeJS自己模拟开发一个商城。
当做的越多的时候，发现自己的知识越不够用。
最开始运用angjularJs主要是想实现单页面，开发运用Angular-ui-router（非官方版本）通过路由实现单页面。
Angularjs结合Nodejs实现了模块化管理机制更方便,运用数据双向绑定使数据交互快捷方便，深层的指令模板还在学习中。
此次使用AngularAMD按需加载结合Angular的单页面优化大大的提高了加载速度，也提升了用户体验。
接下来看看此案例的效果：
在文章的后面，有此案例的源码，大家可以下载下来进行学习。
首先，我们来看看此项目的文件目录，如下图：
其次，我们开始进入正题。
第一步：创建一个main.js 配置模块加载路径和 AMD规范模块。
/*require 配置js路径 和模块*/
require.config({
baseUrl:"",//配置根目录。
/*模块加载路径*/
paths:{
"app":'app',
"angular":'scripts/angular/angular.min',
"ui-router":'scripts/angular-ui-router/release/angular-ui-router.min',
"angularAMD":'scripts/angularAMD/angularAMD.min'
},
/*加载非AMD规范模块*/
shim:{
"angularAMD":["angular"],
"ui-router":['angular'],
},
deps:['app']
});
第二步：创建app.js 载入AMD配置的模块并配置路由。
define(['angularAMD','angular','ui-router'],function (angularAMD) {
var app = angular.module('app', ["ui.router"]);
app.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index',angularAMD.route({
url:'/index',
templateUrl:'index.html'
}))
.state('login',angularAMD.route({
url:'/login',
templateUrl:'login.html'
}))
.state('about',angularAMD.route({
url:'/about',
templateUrl:'about/about.html',
controllerUrl:'about/aboutController.js'
}))
}]);
return angularAMD.bootstrap(app);
});
第三步：创建每个模块的controller和页面html 例如aboutController.js、about.html
denfine([],function () {
return['$scope',function ($scope) {
$scope.title = "Controller中获取"
}]
});
<div>
<h2>About</h2>
<h4>This is About Page！</h4>
</div>
第四步：创建index.html 载入 require.js 定义data-main='main.js'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script data-main="main.js" src="scripts/requirejs/require.js"></script>
</head>
<body>
<h1>index</h1>
<button ui-sref="index">index</button>
<button ui-sref="login">login</button>
<button ui-sref="about">about</button>
<div data-ui-view></div>
</body>
</html>
最后在浏览器调试中可以查看按需加载的效果。
以上是关于原创AngularAMD 按需加载的实现的主要内容，如果未能解决你的问题，请参考以下文章
jQuery：实现图片按需加载的方法，当要显示内容的高度超过了页面的高度，按需加载，根据滚动条的位置来判断页面显示的内容