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 相关文章推荐
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
javascript每日必学之继承
2016/02/23 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python简单分割文件的方法
2015/07/30 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python ftp上传文件
2016/02/13 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python字典排序的方法
2019/10/12 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
高一化学教学反思
2014/02/05 职场文书
优秀求职信
2014/05/29 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
被告代理词范文
2015/05/25 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技