构建模块化单页应用程序的方法步骤

序

本文主要介绍使用angular . js request . js构建模块化单页应用程序的方法，可以分享给大家参考学习。给有需要的人看一下详细介绍。

AngularJS描述：

Angularjs是WEB应用中完整的端到端解决方案，可以用来构建WEB应用。通过由开发人员呈现更高级别的抽象来简化应用程序开发。最适合的就是用它来构建一个CRUD应用，提供了一个非常方便、统一、高效的解决方案。其数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入、HTML标签等。最流行的是它的双向数据绑定。

需求描述：

Requirejs是解决传统的页面加载脚本标签操作，通过其初始化配置实现js库的按需、并行、延迟加载，并声明不同js文件之间的依赖关系。它遵循前端AMD规范(异步模块加载)。Js代码可以用模块化的方式组织(模块化编程)。模块化的含义是通过代码逻辑展现模块之间的依赖关系和执行顺序，并根据模块逻辑对代码进行分解，从而起到与mvc框架项目协同的作用。

集成：

使用requireJS模块化定义模块质检的依赖关系，不需要逐个交叉引用文件，打包方便。从模板页面提取脚本脚本，通过当前的js模块加载需要依赖的js模块。按需加载。路由更方便。

练习-目录结构

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

Practice-index.html

就像普通的html编写一样，这里需要注意的是，在引入js的时候，只需要参考main和require.js，require.js会动态加载所需的js。

div class=' main ' div class=' header ' div class=' right-bar ' span class=' welcome '当前用户：button class=' btnbtn-info BTN-xs ' I class=' fa fa fa-sign-out '/I注销/button/span/div/div class=' main content has-shadow ' div ng-view/div/div/div脚本数据-main=' js/main ' src=' http : js/libs/require.js '/script//只需参考main和require . js的做法即可

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

/* * *条目文件*/require . config({ base URL : ' js/'，path : { ' jquery ' 3360 ' libs/jquery 203 '，' angular' 3360' libs/angular.min '，' angular-route ' : ' libs/angular-route . min '，' angular-sanitize ' : ' libs/angular-sanitize . min '，' app ' : ' controller/app '，' loadingiterceptor ' : ' controlsrequire(['jquery '，' angular '，' angular-route '，' angular-sanitize '，' app '，' loadingInterceptor '，' route '，' run_stateCtrl']，function ($，angular){ $(function(){ angular . bootstrap(document，[' myApp '])；//初始化整个app })})；实践-建立角度模块，即应用程序

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

/* * * create angular . module */define([' angular ']，function(angular){ varapp=angular . module(' myapp '，['ngroute '，' ngsanitize '，' ajaxloading '])；//根据需要引入模块返回app});练习建立路线

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

/* * * routing */define (['app']，function(app){ return PP . config([' $ route provider '，function($ route provider){ $ route provider . when('/'，{ templateurl : ' js/view/run _ state . html '，controller: ' run _ stateCtrl ' })。when('/xq '，{ Templateurl : ' js/view/xq . html '，controller: 'xqCtrl' })。否则({ redirectto : '/' })；}])});练习-模块控制器

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

定义(['app']，函数(app){ return app . controller(' run _ state ctrl '，['$scope '，' $rootScope '，' $http '，函数($scope，$rootScope，$ http){ $ rootScope . head title=$ rootScope . title=' hello，angular！'；$ root scope . app name=$ root scope . span=“角度侧面导航”；$ scope . getmore=function(){ angular . element('。状态')。文本(' running ')}；$http.get('。/json/215145.json ')。success(function(data){ $ scope . branch s=data . branch s；});}])});摘要

整个模块搭建完成后，根据angularjs的API实现具体的业务流程。

好了，这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。谢谢你的支持。