利用require.js与有角的搭建矿泉应用的方法实例

前言

AngularJS诞生于2009年，由米斯科赫韦里等人创建，后为谷歌所收购。是一款优秀的前端射流研究…框架，已经被用于谷歌的多款产品当中AngularJS。有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

本文是接上篇有角度的实战部分有角度的比较适合矿泉项目，这里不借助任何种子和构建工具，直接从零搭建，基本的有角的项目结构大致包含如下几个部分：

1)app.js入口

2)index.html框架页

3)lib(供应商)第三方类库

4)组件业务组件

5)样式/图像静态资源部分

1、常规实现

创建文件夹demo1，按照上述结构分别创建app.js，index.html文件，创建lib、组件、样式和形象文件夹，最终如下图所示：

在此基础上，我们增加三个业务组件家，关于，联系，并初始化基本代码如下：

核心代码文件

index.html

！DOCTYPE html html lang=' en ' ng-app=' app ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title demo 1/title script src=' http 3360https://cdn。bootcss。com/angular。js/1。6 .0/角度。js '/脚本脚本src=' http/app . js '/脚本脚本src=' ./组件/家庭/住宅。控制器。js '/script script src=' ./组件/关于/关于。控制器。js '/script script src=' ./组件/触点/触点。控制器。js/script/head body div class=' nav ' ul lia ui-sref=' home ' home/a/Li lia ui-sref=' about/a/Li lia ui-sref=' contact ' contact/a/Li/ul/div class=' container ' div ui-view/div/body/html app。射流研究…

angular.module('app '，['ui.router']).config(['$stateProvider '，' $ urlsrupervider '，function ($stateProvider，$ urlsrupervider){//默认指向$ URLrouterProvider。其他('/home ')；$stateProvider.state('home '，{ url: '/home '，templateUrl: ' ./components/home/home.tpl.html '、controller: 'HomeController '、controllerAs: 'vm' }).状态(“关于”，{ url:“关于”，templateUrl: ' ./组件/关于/关于。第三方物流。html '、控制器： '关于控制器'、控制器： 'vm' }).状态(' contact '，{ url: '/contact '，templateUrl: ' ./组件/触点/触点。第三方物流。html '，控制器： '联系控制器'，控制器： 'vm' }) })控制器中文件格式一直，第三方物流为视角文件以家模块为例：

home.controller.js

angular.module(应用程序).控制器(‘HomeController’，HomeController)；家庭控制器$ inject=[' $ scope ']；函数Homecontroller($ scope){控制台。日志(' Homecontroller创建成功！');}home.tpl.html

氘主页/h2对命名做如下规定，所有文件夹都用小写，多词用点号隔开，所有文件都小写，多词用点号分割，控制器以控制器。射流研究…结尾，类似的有。service.js,tpl.html、directive.js、filter.js等。

最终运行效果如下：

上面的代码可以正常运行，但是我们发现了一个问题。目前很少有js文件或者模块，所以介绍的时候不会有大问题。但是，当我们的应用程序变大，有几十个甚至上百个文件时，如何处理呢？有人说我们当然用建筑工具。一个个介绍有多慢？构建工具当然可以批量引入js文件，但是我们也需要考虑按需加载的问题。比如我们打开home的时候，不需要加载关于和联系，但是按照我们传统的模式，所有的脚本都是加载的，这首先增加了http请求的数量，加载解析的脚本太多，也影响了浏览器的渲染，用户体验不友好。基于此，我们有几种方法来实现它。1.基于requirejs，这也是本章的一部分；2.使用webpack分块打包实现按需加载，后期添加相应的文章；3.使用oclazyload(自己谷歌)。本文使用requires js按需加载业务模块，在此之前，我们先介绍requires js。

2.介绍要求

RequireJS是一个JavaScript模块加载器。它非常适合在浏览器中使用，但也可以在其他脚本环境中使用，如Rhino和Node。使用RequireJS加载模块化脚本会提高代码的加载速度和质量，这实现了AMD规范，当然也类似于CMD规范的实现框架seajs。

在Requirejs中，简单来说，文件就是一个模块，也就是单个文件模块，所以加载一个模块实际上就是加载一个文件。

假设读者已经知道requirejs的基本用法。

上一节我提到了控制器的注册方式，提到了动态注册。当然，除了控制器，还有服务、指令等。即可以实现动态注册，这也是我们实现按需加载的基础。现在，我们将修改我们的项目并添加requirejs配置文件main.js

require . config({ path s : { angular : ' https://cdn . bootss.com/angular . js/1 . 6 . 0/angular '，ui _ router : ' https://cdn . bootss.com/angular-ui-router/1 . 0 . 3/angular-ui-router '，app: '。/app' }，shim : { angular : { export s : ' angular ' } } })；需要(['angular '，')。/app '，' ui_router']，函数(angular，app){ angular.element(document)。ready(function(){ angular . bootstrap(document，[app . name])；})})app.js修改如下：

定义(['angular '，' ui_router']，函数(angular){ var app=angular . module(' app '，['ui.router'])。config(['$controllerProvider '，' $ provider '，function ($controllerProvider，$ provider){ app . register={ controller : $ controller provider . register，//动态注册controller factory : $ provide.factory//dynamically注册服务}}])。config (['$ stateprovider '，' $ urlrouterprovider '，function ($ stateprovider，$ urlouterprovider){//默认为$ urloutprovider .否则('/home ')；$stateProvider.state('home '，{ url: '/home '，templateUrl: '。/components/home/home.tpl.html '，controller: 'HomeController '，controllerAs: ' vm '，resolve : { deps 3360 Loadctrl([)。/components/home/home . controller '])})。状态(' about '，{ url: '/about '，templateUrl: '。/components/about/about . TPL . html '，controller : ' about controller '，controllerAs: 'vm '，resolve : { deps : Loadctrl([)。/components/about/about . controller '])})。状态(' contact '，{ url: '/contact '，templateUrl: '。/components/contact/contact . TPL . html '，controller : ' contact controller '，controllerAs: 'vm '，resolve : { deps : Loadctrl([)。/components/contact/contact . controller '])})}))；返回app函数loadCtrl(path_arr) { return ['$q '，' $rootScope '，函数($q，$ rootScope){ var defered=$ q . deferre()；需要(path_arr，function () {$rootScope。$ apply(function(){ deffered . resolve()；})49 });延期返回。承诺；}] };})修改控制器注册方法如下：

定义(['app']，函数(app){ app。注册。控制器(' HomeController '，Homecontroller)；家庭控制器$ inject=[' $ scope ']；函数Homecontroller($ scope){控制台。日志(' Homecontroller创建成功！');}})最后修改修改index.html中脚本引入方式，以及去掉ng-app指令启动方式有角度的应用启动已在main.js中通过domready后使用脚本启动。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title demo 1/title script src=' http 3360https://cdn。bootscs。com/require。js/2。3 .3/需要。js ' data-main=' ./main/script/head body div class=' nav ' ul lia ui-sref=' home ' home/a/Li lia ui-sref=' about/a/Li lia ui-sref=' contact ' contact/a/Li/ul/div class=' container ' div ui-view/div/body/html最终运行效果如下，可以看到只有在点击了对应的菜单时，才加载了对应的控制器：

由于代码简单，注释很少，有疑问可直接提交。

总结

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