首页
所有分类
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 相关文章推荐
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
JS动态添加Table的TR，TD实现方法
Jan 28 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
jquery分割字符串的方法
Jun 24 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 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
活动总结(790) 意向书(73) 承诺书(369) 责任书(145) 决心书(42) 主持词(345) 建议书(203) 广告词(105) 竞聘书(31) 聘任书(31)
You might like
非常好用的Zend Framework分页类
2014/06/25 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP中的使用curl发送请求（GET请求和POST请求）
2017/02/08 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript与CSS复习（《精通javascript》）
2010/06/29 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
让python在hadoop上跑起来
2016/01/27 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
AMAVII眼镜官网：时尚和设计师太阳镜
2019/05/05 全球购物
教师党员个人整改措施
2014/10/27 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
python xlwt模块的使用解析
2021/04/13 Python
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Java的Object类的九种方法
2022/04/13 Java/Android