使用requirejs来管理angularJS依赖示例

最新推荐文章于 2024-11-10 15:10:09 发布
最新推荐文章于 2024-11-10 15:10:09 发布
阅读量68 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/huangshikun/p/7149890.html
版权

有关requirejs是什么在这里不做解释，只用纯代码实战让你感受requirejs依赖管理的强大。

一、首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用。

[javascript] view plain copy print?
  1. //配置依赖  
  2. require.config({  
  3.     paths: {  
  4.       "angular":"angular"  
  5.     },  
  6.     shim:{  
  7.         "angular": {  
  8.             "deps":[],  
  9.             "exports": "angular"  
  10.         }  
  11.     }  
  12.   });  
  13.   
  14. //定义模块  
  15. define([  
  16.     'angular',  
  17.     'controller'  
  18.     ], function (angular) {      
  19.     
  20.     angular.module('HelloModel', ['HelloCtrls']);  
  21.   
  22.     return {  
  23.         angularModules: [ 'HelloModel' ]  
  24.     };      
  25.       
  26. });  



二、定义angular中的控制器模块controller.js

[javascript] view plain copy print?
  1. define([ 'angular' ], function(angular) {  
  2.   
  3.     var componentCtrls = angular.module('HelloCtrls', []);  
  4.   
  5.      componentCtrls.controller('helloCtrl', [ '$scope', function($scope) {  
  6.         $scope.greet = "hello world";  
  7.       } ]);  
  8.   
  9.     return componentCtrls;  
  10. });  



三、新建一个index.html文件测试

 

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html ng-app="HelloModel">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6.   
  7. <script src="js/require.js" data-main="js/main" defer async="true" ></script>  
  8. </head>  
  9. <body ng-controller="helloCtrl">  
  10.   
  11. {{greet}}  
  12.   
  13. </body>  
  14. </html>  



四、文件组织结构

    

转载于:https://www.cnblogs.com/huangshikun/p/7149890.html

weixin_30314631
关注
AngularJS - 按需加载 - require
seaalan的博客
11-02 444
index.html <html> <head> <style> .active { color: red; font-weight: bold; } </style> </head> <body> <a ui-sref="...
Seed-AngularJS-RequireJS:使用 RequireJS 的 AngularJS 应用程序的起点
06-05
总的来说，这个项目提供了一种使用AngularJS和RequireJS的最佳实践，帮助开发者创建高效、模块化的JavaScript应用程序。通过学习和使用这个模板，开发者可以掌握如何有效地整合这两个工具，提升Web应用的开发效率和...
如何将angularJs项目与requireJs集成
weixin_30912051的博客
10-12 64
关于angularjs、requirejs的基础知识请自行学习 一、简单事例的项目目录如下： -index.html -scripts文件夹 --controller文件夹 --- mianController.js --- controller1.js ---controller2.js --directives文件夹 ...
angularjs与requirejs整合实用技巧
槿之
03-26 980
Angularjs与Requirejs整合实用技巧 一、简介 关于angularjs的特点这里不啰嗦，本文只介绍三点生产中实用技巧：angularjs与requirejs集成、指令实现类freemarker功能、过滤器使用。 二、实用技巧展示 1、使用angularjs的过程中，很多只是将其当做引入系统中的一个js插件工具，而不是作为前台开发的主体框架，其和requirejs整合可以使前段
AngularJS与RequireJS集成
wjxbj的博客
09-07 196
        RequireJS允许你定义和管理JS文件之间的依赖关系，把这些工作变成了一个简单的构建过程。利用这些异步加载管理工具，可以保证在代码执行之前所有依赖的东西就已经被加载好了——专注于开发实际的应用功能从来没有如此简单过。         AngularJS能够很好地与RequireJS（http://www.requirejs.org/）配合使用，这使得我们可以同时拥有两种组...
AngularJS + RequireJS 项目种子教程
gitblog_00281的博客
09-01 381
AngularJS + RequireJS 项目种子教程 angular-requirejs-seed项目地址:https://gitcode.com/gh_mirrors/an/angular-requirejs-seed 项目介绍 angular-requirejs-seed 是一个结合了 AngularJS 和 RequireJS 的 HTML5 项目示例，可以轻松用作项目模板。该项目利用...
新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目
weixin_30618985的博客
12-28 371
环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始： 执行命令行工具 mkdir Demo && cd Demo npm init name: demo version:0.0.1 description:This is a demo. entry ...
RequireJS简单教程
寒冰屋的专栏
03-08 574
本教程简要介绍了如何通过组件和依赖项注入将RequireJS用于实现Web应用程序。该示例应用程序很简单，具有一个表单，七个输入字段以及两个用于提交和重置表单的按钮。提交表单时，将完成字段验证，并且将显示错误状态或显示成功状态。状态显示被提取为可重用组件。本教程说明如何将所有这些拼凑在一起。 下载源426.4 KB 介绍 最近，我开始了另一个项目。它是一个基于Web的应用程序，需要一个J...
angualrjs+AMD规范示例（主要使用requirejs）-实现按需加载 附源码
deyun1993的博客
11-13 185
1、背景说明 最近一段时间，一直在研究angularjs及AMD、common规范等。但怎么把angularjs有效的与AMD模块组织结合在一起使用，还是值得深思。 本人研究一段时间，为了巩固下研究成果，特意写了一个demo，仅供参考。 2、使用技术点说明 kendo：主要使用kendo开源一些组件（由于本人对kendo研究比较多） ...
AngularJS Quizzler 开源项目安装与使用教程
gitblog_01055的博客
09-05 338
AngularJS Quizzler 开源项目安装与使用教程 angularjs-QuizzlerThe AngularJS Challenge: Create an online Quiz builder & testing application.项目地址:https://gitcode.com/gh_mirrors/an/angularjs-Quizzler 1. 项目目录结构及介绍 An...
angular-requirejs:如何使用 RequireJS 加载 AngularJS 应用程序
06-01
下面我们将详细探讨如何在项目中使用 RequireJS 来加载 AngularJS 应用程序。 ### 一、AngularJS 与 RequireJS 的结合 AngularJS 默认使用 CommonJS 风格的模块定义，但不内置模块加载机制。RequireJS 提供了异步...
requireJS + angularJs的项目构架
03-13
在实际应用中，可能会用到`bower`这样的包管理工具来管理前端依赖，以及`gulp`这样的构建工具自动化处理任务，如压缩、合并代码，优化图片，编译Sass或Less等。然而，根据描述，这个实例中并未包含这些工具，可能是...
RequireJS 与 AngularJS 集成（完整版） - CSDN博客1
08-04
总的来说，这篇文章提供了 RequireJS 和 AngularJS 集成的完整示例，通过 RequireJS 实现了模块化加载和管理，通过 AngularJS 实现了动态路由和丰富的客户端应用功能。这种集成方式使得项目结构清晰，代码易于管理和...
Echarts 折线图
weixin_44443380的博客
11-08 248
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 599
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 393
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
cx18333的博客
11-05 531
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
第三十七章 Vue之编程式导航及跳转传参
最新发布
Calvin的博客
11-10 1302
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
时间管理应用（可复制源码）
无限大的博客
11-08 385
创建一个简单的时间管理应用程序，结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript。
利用RequireJS优化AngularJS应用的示例存储库
RequireJS通常与构建工具（如Grunt、Gulp或Webpack）一起使用，可以在开发过程中利用它们提供的任务来自动化代码压缩、依赖管理等构建流程。 12. 存储库管理： 对于使用版本控制系统（如Git）管理的项目，存储库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值