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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
DOM 高级编程
May 06 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Python面向对象封装操作案例详解
2019/12/31 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
运动会邀请函范文
2014/02/06 职场文书
学生安全承诺书
2014/05/22 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
爱晚亭导游词
2015/02/09 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Python加密与解密模块hashlib与hmac
2022/06/05 Python