有关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. 笔记:Spring Cloud Feign 其他配置

    请求压缩 Spring Cloud Feign 支持对请求与响应进行GZIP压缩,以减少通信过程中的性能损耗,我们只需要通过下面二个参数设置,就能开启请求与响应的压缩功能,yml配置格式如下: fei ...

  2. Java Arrays 源码 笔记

    Arrays.java是Java中用来操作数组的类.使用这个工具类可以减少平常很多的工作量.了解其实现,可以避免一些错误的用法. 它提供的操作包括: 排序 sort 查找 binarySearch() ...

  3. poj 2503 查字典

    Description You have just moved from Waterloo to a big city. The people here speak an incomprehensib ...

  4. redis配置文件详解及实现主从同步切换

    原理:redis复制是怎么进行工作 如果设置了一个slave,不管是在第一次链接还是重新链接master的时候,slave会发送一个同步命令 然后master开始后台保存,收集所有对修改数据的命令.当 ...

  5. Be Better , Be Better

    Be Better! 这不是一道题,只是我的flag.初三寒假,一个本应该对着计算机翻天覆雨的假期,我在鬼班撸高中课...其实感触是从初中课得来的.有些事,以前我说是我不懂,现在我不说不是我不懂.Ju ...

  6. drbd(四):drbd多节点(drbd9)

    1.drbd多节点简介 在drbd9以前,drbd一直只能配置两个节点,要么是primary/secondary,要么是primary/primary.虽然在这些版本上也能配置第三个节点实现三路节点的 ...

  7. 听翁恺老师mooc笔记(2)-第一个程序--&运算符

    使用devC++写hello world 第一步:文件-新建-源代码.然后输入"输出hello world"程序: 注意:写程序时关闭中文输入法,否则语句输入的分号可能会被识别为错 ...

  8. 学号:201621123032 《Java程序设计》第9周学习总结(

    1:本周学习总结 1.1:以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容 2:书面作业 2.1: List中指定元素的删除(题集题目) 2.1.1:实验总结.并回答:列举至少2种在List ...

  9. 《Language Implementation Patterns》之 构建语法树

    如果要解释执行或转换一段语言,那么就无法在识别语法规则的同时达到目标,只有那些简单的,比如将wiki markup转换成html的功能,可以通过一遍解析来完成,这种应用叫做 syntax-direct ...

  10. 201621123031 《Java程序设计》第13周学习总结

    作业13-网络 1.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被 ...