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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
javascript new fun的执行过程
Aug 05 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JavaScript实现微信号随机切换代码
Mar 09 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
oracle资料库函式库
2006/10/09 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
django缓存配置的几种方法详解
2018/07/16 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python梯度下降算法的实现
2020/02/24 Python
Django中的session用法详解
2020/03/09 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
房地产活动策划方案
2014/05/14 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
电影地道战观后感
2015/06/04 职场文书
离婚起诉书范文2016
2015/11/26 职场文书