Require.js、Angular.js整合

Require.js

详见:

初识Require.js

解密Require.js

Angular.js

详见:

初识Angular.js之爱恨情仇

整合Require.js、Angular.js

配置

在Requirejs中配置angular.js。

require-main.js

// 配置
requirejs.config({
...
  paths: {
    ‘jquery‘: ‘libs/jquery-2.1.3/jquery.min‘,
    ‘angular‘: ‘libs/angular-1.3.15/angular.min‘
  },
  shim: {
    ‘angular‘: {
      deps: [‘jquery‘],
      exports: ‘angular‘
    }
  },
  ...
});

创建

创建Angularjs应用模块。

angular-app.js

// 创建
define([‘angular‘], function(angular) {
  return angular.module(‘angularApp‘, []);
});

加载、启动

通过Requirejs加载、启动Angularjs

require-bootstrap.js

GlobalConfig.requireScripts.unshift(
  ‘angular‘,
  ‘angularApp‘
);
// 加载
requirejs(GlobalConfig.requireScripts, function (angular) {
  // 启动
  $(document).ready(function(){
    angular.bootstrap(document, [‘angularApp‘]);
  });

});

页面引用

<script src="/libs/require/require.js"></script>
<script src="/require-main.js"></script>
<script src="/require-bootstrap.js"></script>

文件中引用Angular.js

通过Requirejs依赖注入,引入angularjs模块

define([
  ‘angularApp‘ // 引入angularjs
], function(
  angularApp
) {

  angularApp.factory(‘loginService‘, function() {
    var loginService = {};

    loginService.login = function (data) {
      window.location.href = ‘/welcome‘;
    };

    return loginService;
  });
});

通过Requirejs动态加载js文件

详见简单、强大的swig.js

时间: 06-13

Require.js、Angular.js整合的相关文章

关于Breeze.js+Angular.js+KendoUI+BootStrap+TypeScript+EF4.5的使用心得记录之一

第一章:数据交互 提醒:博客开篇之作.望指导.不喜随便喷. 什么也不说,先上图. 就kendoui官网有详细的API说明,不做过多累赘,以下图中用到的控件为例: 一.DropDownList,Grid 页面简洁得体,是我个人比较偏爱的.主要来讲讲DropDownList和GridOnLineEdit结合Angular和BreezeJs的应用. 1.Breeze.js ?功能:负责处理前端和后端程序的通讯. 用法:到官网下载Breeze包.在页面引入上图中JS. 添加Breeze.WebApi2.

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

初识angular.js之爱恨情仇

angular.js Angular.JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好. 简单概括:MV*模型的js框架 angular.js之爱恨情仇 爱恋之际 MV*模式 职责清晰.层次分明,例如页面样式变化仅改变View代码,其它层次结构代码无需改动. 数据绑定 数据视图绑定(单.双向数据绑定),无需反锁的改变DOM的值或修

Angular.js 的初步认识

MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控制器(controller),操作模型数据. <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.

关于 angular js 的坑

angular js 很好很强大,但是注意,angular js并不适合操作DOM,虽然在某个版本更新过之后,angular 内部自建了 jqLite 来方便操作DOM,意图取代jquery的位置,真是居心叵测. 其实 angular 最好的地方还是给我们提供了一个新的思维方式,如果你是个新手,想看看传说中的 MVC 是个啥,在 ember, backbong, angular...等等众多框架中犹豫不决,那么推荐先看看angular 当然坑是很多,由于马上 2.* 的版本要出现,所以自然 1.

Angular JS 基础应用--第一篇

  前  言          Android应用开发中,有一些功能虽然能够使用原生JS来实现,但是会比较的复杂,因此一些相应的框架应运而生了.框架相对于原生JS而言,从主观上来说,最大的改变就是代码大幅度的减少了.在使用上,也比较方便易懂.因此,框架一经诞生就广受欢迎. 在本章,就将详细介绍其中一种框架的使用----Angular JS. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. angularJS表达式   1.angularJS使用双大括号{

Angular.js入门(1)

1.Angular优点     1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令:    2. 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能:    3. 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性.    4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,我们的项目从上线到目前,UI变

js框架——angular.js(5)

1. 3种过滤方式 1 <html> 2 <head> 3 <meta charset='utf-8'> 4 <script src="js/angular.js"></script> 5 <script src="js/app.js"></script> 6 <link rel="stylesheet" href="css/bootstrap.c

angular js中的directive

angular js中的自定义指令 自定义指令return如下指令定义对象: restrict:restrict约束自定义指令的使用形式,取值有A(属性),E(元素),C(类),M(注释) template:该属性指定angular js指令被替换为html模板 scope:scope:true 表示创建一个作用域,该作用域继承于父作用域(即ng-controller控制的作用域), scope:{} 创建一个完全孤立的作用域,不会继承父作用域的任何数据 scope:{"@"} 创建一