angular.js + require.js构建模块化单页面应用的方法步骤


Posted in Javascript onJuly 19, 2017

前言

本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍吧。

AngularJS描述:

angularjs是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案。通过开发者呈现一个更高层次的抽象来简化应用的开发。最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定、基本模版标识符、表单验证、路由、深度链接、组件重用、依赖注入、以及HTML标记等,最受欢迎的莫过于它的双向数据绑定。

requireJS描述:

requireJS是来解决传统的页面加载script标记操作,通过其初始化配置实现按需、并行、延时的载入js库,声明不同js文件之间的依赖关系,它是遵循前端AMD规范(异步模块加载)。js代码可以以模块化的方式进行组织(模块化编程)。模块化的意义就是通过代码逻辑表明模块之间的依赖关系和执行顺序,按照模块逻辑来分解代码,起到配合mvc框架架构项目的作用。

整合:

使用requireJS模块化定义模块质检的依赖关系,打包不需要文件挨个对照,很方便。将script脚本从模版页面中抽离出来,通过js当前模块加载需要依赖的js模块。按需加载。路由更加方便。

实践—?目录结构

这里文件目录可以根据项目需求自由调整

angular.js + require.js构建模块化单页面应用的方法步骤

实践—?index.html

和正常的html写法一样,这里要注意引入js时只要引用main和require.js,由require.js去动态加载所需要的js

<div class="main">
 <div class="header">
  <div class="right-bar">
   <span class="welcome">当前用户:<b>...</b> <button class="btn btn-info btn-xs"><i class="fa fa-sign-out"></i> 注销</button></span>
  </div>
 </div>
 <div class="mainContent has-shadow">
  <div ng-view></div>
 </div>
</div>
<script data-main="js/main" src="js/libs/require.js"></script>//只要引用main和require.js

实践—?入口文件main.js

实例化require.js并配置各种js的路径以及依赖关系,初始化整个项目

/**
 * 入口文件
 */
require.config({
 baseUrl: "js/",
 paths: {
  "jquery": "libs/jquery203",
  "angular" : "libs/angular.min",
  "angular-route" : "libs/angular-route.min",
  "angular-sanitize" : "libs/angular-sanitize.min",


  "app" : "controllers/app",
  "loadingInterceptor" : "controllers/loadingInterceptor",
  "run_stateCtrl" : "controllers/run_stateCtrl",

  "route" : "routes/appRoute"
 },
 shim: {
  'angular': {
   exports: 'angular'
  },
  'angular-route':{
   deps: ["angular"],
   exports: 'angular-route'
  },
  'angular-sanitize':{
   deps: ["angular"],
   exports: 'angular-sanitize'
  }
 }
});
require(['jquery','angular','angular-route','angular-sanitize','app','loadingInterceptor','route','run_stateCtrl'],function ($,angular){

  $(function () {

   angular.bootstrap(document,["myApp"]);//初始化整app

  })

});

实践—?建立angular.module 即app.js

建立angular.module,所有的操作都是在angular.module的基础上进行的

/**
 * 建立angular.module
 */
define(['angular'], function (angular) {
 var app = angular.module('myApp', ['ngRoute','ngSanitize','ajaxLoading']);//引入需要以来的模块
 return app;
});

实践—?建立路由

不同的模块被加载进主视图,并绑定控制器

/**
 * 路由
 */
define(['app'], function(app){
 return app.config(['$routeProvider',function($routeProvider) {
   $routeProvider
    .when('/', {
    templateUrl: 'js/views/run_state.html',
    controller: 'run_stateCtrl'
    })
    .when('/xq', {
    templateUrl: 'js/views/xq.html',
    controller: 'xqCtrl'
    })
    .otherwise({ redirectTo: '/' });
 }])
});

实践—?模块控制器

被路由绑定的模块控制器,控制着当前模块的业务流程

define(['app'], function(app){  
 return app.controller('run_stateCtrl', ['$scope','$rootScope','$http', function ($scope,$rootScope,$http) {

   $rootScope.headTitle = $rootScope.title = "hello,angular!";
   $rootScope.appName = $rootScope.span = "angular侧导航";
   $scope.getMore = function(){
    angular.element('.state').text('正在运行')
   };
   $http.get('./json/215145.json').
    success(function(data) {
    $scope.branchs = data.branchs;    
    });
  }])
});

总结

整体的模块搭建完之后,具体的业务流程,根据angularjs的API来具体实现功能。

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

Javascript 相关文章推荐
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
jquery 选取方法都有哪些
May 18 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 #Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 #Javascript
Vue之Watcher源码解析(2)
Jul 19 #Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 #Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 #Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 #Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 #Javascript
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
vue实现微信分享功能
2018/11/28 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
中学生学雷锋演讲稿
2014/04/26 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Python并发编程实例教程之线程的玩法
2021/06/20 Python
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android