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

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

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

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

  1. define([ 'angular' ], function(angular) {
  2. var componentCtrls = angular.module('HelloCtrls', []);
  3. componentCtrls.controller('helloCtrl', [ '$scope', function($scope) {
  4. $scope.greet = "hello world";
  5. } ]);
  6. return componentCtrls;
  7. });

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

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

四、文件组织结构

使用requirejs来管理angularJS依赖示例的更多相关文章

  1. AngularJS开发指南15:AngularJS的创建服务,将服务注入到控制器,管理服务依赖详解

    创建服务 虽然AngularJS提供了很多有用的服务,但是如果你要创建一个很棒的应用,你可能还是要写自己的服务.你可以通过在模块中注册一个服务工厂函数,或者通过Module#factory api或者 ...

  2. 47.使用 RequireJS 加载 AngularJS

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 目前的版本没有遵循 Javascript 约定的 AMD 模块化规范, 因此使用 Requ ...

  3. flutter如何使用配置文件pubspec.yaml(位于项目根目录)来管理第三方依赖包

    官方文档 在软件开发中,很多时候有一些公共的库或SDK可能会被很多项目用到,因此,将这些代码单独抽到一个独立模块,然后哪个项目需要使用时再直接集成这个模块,便可大大提高开发效率.很多编程语言或开发工具 ...

  4. AngularJS依赖注入

    <html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</tit ...

  5. AngularJS 依赖注入

        依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该 ...

  6. 4.Maven概念模型,maven的生命周期,Maven坐标,依赖管理(依赖范围,依赖声明),仓库管理,私服概念

     1 maven概念模型 2 maven的生命周期,项目构建过程 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg== ...

  7. 关于angularjs依赖注入的整理

    初学angularjs阶段,刚刚看到菜鸟教程的angularjs依赖注入.现在整理一下: 1.含义:一个或更多的依赖(可以理解为模块关系依赖)或服务(分为内建服务[例如$http,$tiomeout等 ...

  8. Android使用gradle依赖管理、依赖冲突终极解决方案(转)

    Android使用gradle依赖管理.依赖冲突终极解决方案在Android开发中,相信遇到关于版本依赖的问题的同学有不少.虽然Android Studio一般都会自动帮我们去重,但是有时候去重失败了 ...

  9. (五)Angularjs - 依赖注入

    如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angu ...

随机推荐

  1. ClickOnce清单签名取消后依然读取证书的问题

    在 http://www.cnblogs.com/heroius/p/8270004.html 和 http://www.cnblogs.com/heroius/p/8278796.html中,通过编 ...

  2. SpringBoot更改HttpMessageConverters使用FastJson出现乱码问题

    1.出现问题的现象!如下截图,使用SpringBoot 进行开发,接口返回的内容出现中文乱码? 接口内容想要返回的内容: 页面返回内容: 惊喜不?意外不? 为什么出现这个情况?不例外的话,很多同事都是 ...

  3. Cxf 自动生成客户端服务端代码

    第一步: 下载apache-cxf安装包.并安装. 第二步: 配置cxf的环境变量. CXF_HOME = "CXF安装路径". 例如:F:\apache-cxf-2.1.2 在P ...

  4. ELK日志收集平台部署

    需求背景 由于公司的后台服务有三台,每当后台服务运行异常,需要看日志排查错误的时候,都必须开启3个ssh窗口进行查看,研发们觉得很不方便,于是便有了统一日志收集与查看的需求. 这里,我用ELK集群,通 ...

  5. 实验楼 -- (Linux)

    1. 允许用户SSH登陆 # 打开ssh配置文件, 一般在/etc/ssh/sshd_config sudo vim /etc/ssh/sshd_config # 在文件最后添加: # 其中shiya ...

  6. Matlab绘图基础——其他三维图形(绘制填充的五角星)

    其他三维图形 %绘制魔方阵的三维条形图 subplot(2,2,1); bar3(magic(4));   %以三维杆图形式绘制曲线y=2sin(x) subplot(2,2,2); y=2*sin( ...

  7. poj 3696 The Luckiest Number

    The Luckiest Number 题目大意:给你一个int范围内的正整数n,求这样的最小的x,使得:连续的x个8可以被n整除. 注释:如果无解输出0.poj多组数据,第i组数据前面加上Case ...

  8. java开发常用技术

    基础部分 1. 线程和进程的区别 线程三个基本状态:就绪.执行.阻塞 线程五个基本操作:创建.就绪.运行.阻塞.终止 进程四种形式:主从式.会话式.消息或邮箱机制.共享存储区方式 进程是具有一定功能的 ...

  9. 使用ADO.NET查询和操作数据

    使用ADO.NET查询和操作数据 StringBuilder类: 用来定义可变字符串StringBuilder sb = new StringBuilder("");//追加字符串 ...

  10. present(模态)实现出push的效果

    在present加上这个转场动画,取消掉原来的转场动画  CATransition *animation = [CATransitionanimation];     animation.durati ...