首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用require.js与angular搭建spa应用的方法实例

Posted in Javascript onJuly 19, 2017

前言

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

本文是接上篇，angular 实战部分，angular比较适合spa项目，这里不借助任何seed和构建工具，直接从零搭建，基本的angular项目结构大致包含如下几个部分：

1）app.js 入口

2）index.html html框架页

3）lib（vendor）第三方类库

4）components 业务组件

5）styles／images 静态资源部分

1、常规实现

创建文件夹demo1，按照上述结构分别创建app.js ,index.html文件，创建lib、components、styles和images文件夹，最终如下图所示：

利用require.js与angular搭建spa应用的方法实例

在此基础上，我们增加三个业务组件home，about，contact，并初始化基本代码如下：

利用require.js与angular搭建spa应用的方法实例

核心代码文件

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>demo1</title>
 <script src="https://cdn.bootcss.com/angular.js/1.6.0/angular.js"></script>
 <script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>

 <script src='./app.js'></script>
 <script src='./components/home/home.controller.js'></script>
 <script src='./components/about/about.controller.js'></script>
 <script src='./components/contact/contact.controller.js'></script>

</head>
<body>
 <div class="nav">
 <ul>
  <li><a ui-sref="home">Home</a></li>
  <li><a ui-sref="about">About</a></li>
  <li><a ui-sref="contact">Contact</a></li>
 </ul>
 </div>
 <div class="container">
 <div ui-view></div>
 </div>
</body>
</html>

app.js

angular.module('app', ['ui.router'])
 .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
 //默认指向
 $urlRouterProvider.otherwise('/home');

 $stateProvider.state('home', {
  url: '/home',
  templateUrl: './components/home/home.tpl.html',
  controller: 'HomeController',
  controllerAs: 'vm'

 }).state('about', {
  url: '/about',
  templateUrl: './components/about/about.tpl.html',
  controller: 'AboutController',
  controllerAs: 'vm'
 }).state('contact', {
  url: '/contact',
  templateUrl: './components/contact/contact.tpl.html',
  controller: 'ContactController',
  controllerAs: 'vm'
 })

 }])

controller中文件格式一直，tpl为view文件以home模块为例：

home.controller.js

angular.module('app')
 .controller('HomeController', HomeController);

HomeController.$inject = ['$scope'];

function HomeController($scope) {
 console.log("HomeController created successfully!!!");
}

home.tpl.html

<h2>Page Home</h2>

对命名做如下规定，所有文件夹都用小写，多词用点号隔开，所有文件都小写，多词用点号分割，控制器以.controller.js结尾，类似的有.service.js,.tpl.html,.directive.js,.filter.js等。

最终运行效果如下：

利用require.js与angular搭建spa应用的方法实例

上述代码能正常运行，但是我们发现一个问题，当前js文件或者说模块较少，我们引入不会有很大的问题，但是当我们的应用变得很大，文件几十甚至上百个，如何处理呢，有人说当然使用构建工具了，一个一个引入多慢呢，构建工具当然可以做到批量引入js文件，但是我们还需要考虑按需加载的问题，举例来说，我们在打开home的时候，about和contact是没必要加载的，但是按照我们传统的模式，所有脚本都完成了加载，这首先增加了http请求次数，脚本过多的加载解析也影响浏览器的渲染，用户体验并不友好，基于此，我们有几种方式来实现，1、基于requirejs来做，这也是本章内容要讲的部分；2、使用webpack分块打包，实现按需加载，后期看时间会加入对应的文章；3、使用oclazyload（可自行google）。本文就以requirejs来实现一下业务模块的按需加载，在此之前首先引入requirejs。

2、引入Requirejs

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用，但它也可以用在其他脚本环境，就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量，实现的是AMD规范，当然类似的还有CMD规范的实现框架seajs。

Requirejs中，简单的说一个文件一个模块，即是单文件模块，所以对模块的加载其实本质上是对文件的加载。

假设读者已经了解requirejs的基本使用方式。

上一节中，讲到了提了一下controller的注册方式，其中说到了动态注册，当然除了controller之外，还有service、directive等都可以实现动态注册，这也是我们实现按需加载的基础，现在对我们的项目做一下修改，增加requirejs配置文件，main.js

require.config({
 paths:{
 angular:'https://cdn.bootcss.com/angular.js/1.6.0/angular',
 ui_router:'https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router',
 app:'./app'
 
 },
 shim:{
 angular:{exports:'angular'}
 }
});

require(['angular','./app','ui_router'],function(angular,app){
 angular.element(document).ready(function(){
 angular.bootstrap(document,[app.name]);
 })
})

app.js修改如下：

define(['angular', 'ui_router'], function (angular) {
 var app = angular.module('app', ['ui.router'])
 .config(['$controllerProvider', '$provide', function ($controllerProvider, $provide) {
  app.register = {
  controller: $controllerProvider.register,//动态注册controller
  factory: $provide.factory//动态注册服务
  }
 }])
 .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
  //默认指向
  $urlRouterProvider.otherwise('/home');

  $stateProvider.state('home', {
  url: '/home',
  templateUrl: './components/home/home.tpl.html',
  controller: 'HomeController',
  controllerAs: 'vm',
  resolve: {
   deps: loadCtrl(['./components/home/home.controller'])
  }

  }).state('about', {
  url: '/about',
  templateUrl: './components/about/about.tpl.html',
  controller: 'AboutController',
  controllerAs: 'vm',
  resolve: {
   deps: loadCtrl(['./components/about/about.controller'])
  }
  }).state('contact', {
  url: '/contact',
  templateUrl: './components/contact/contact.tpl.html',
  controller: 'ContactController',
  controllerAs: 'vm',
  resolve: {
   deps: loadCtrl(['./components/contact/contact.controller'])
  }
  })

 }]);
 return app;


 function loadCtrl(path_arr) {
 return ['$q','$rootScope', function ($q,$rootScope) {
  var defered = $q.defer();
  require(path_arr, function () {





$rootScope.$apply(function(){














deffered.resolve();






})
49  });

  return defered.promise;

 }]
 };
})

修改controller注册方式如下：

define(['app'], function (app) {
 app.register.controller('HomeController', HomeController);

 HomeController.$inject = ['$scope'];

 function HomeController($scope) {
 console.log("HomeController created successfully!!!");
 }
})

最后修改修改index.html中脚本引入方式，以及去掉ng-app指令启动方式，angular应用启动已在main.js中通过domready后使用脚本启动。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>demo1</title>
 <script src="https://cdn.bootcss.com/require.js/2.3.3/require.js" data-main="./main"></script>

</head>
<body>
 <div class="nav">
 <ul>
  <li><a ui-sref="home">Home</a></li>
  <li><a ui-sref="about">About</a></li>
  <li><a ui-sref="contact">Contact</a></li>
 </ul>
 </div>
 <div class="container">
 <div ui-view></div>
 </div>
</body>
</html>

最终运行效果如下，可以看到只有在点击了对应的菜单时，才加载了对应的controller：

利用require.js与angular搭建spa应用的方法实例

由于代码简单，注释很少，有疑问可直接提交。

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

利用require.js与angular搭建spa应用的方法实例

- Author -

JerremyZhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
ztree简介_动力节点Java学院整理
Jul 19 #Javascript
Angular 1.x个人使用的经验小结
Jul 19 #Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 #Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 #Javascript
vue引入swiper插件的使用实例
Jul 19 #Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 #Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 #Javascript
查询效率(1) Hadoop(1) Simhash(1) Express(1) 字段分割(1) 控制流(1) 表结构(1) REGEXP(1) group by(1) delete in(1)
You might like
我的论坛源代码(十)
2006/10/09 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python类如何定义私有变量
2020/02/03 Python
浅析python标准库中的glob
2020/03/13 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Python如何实现大型数组运算（使用NumPy）
2020/07/24 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Python中过滤字符串列表的方法
2020/12/22 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Pure Collection美国官网：来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
西班牙在线药店：DosFarma
2020/03/28 全球购物
寒假实习自荐信
2014/01/26 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
起诉书范文
2015/05/20 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
关于MySQL中的 like操作符详情
2021/11/17 MySQL
基于Python实现nc批量转tif格式
2022/08/14 Python