首页 > 代码库 > angularjs和requirejs整合
angularjs和requirejs整合
目录
[TOC]
1. 概述
1.1 为何整合？
由于angularjs的各种依赖必须按照js的脚本按照循序进行加载（app开发ty300.com），这令开发者非常头疼
脚本多次导入多次执行的冲突，以及性能效率的影响
1.2 脚本加载框架（AMD/CMD）
requirejs 支持AMD和CMD
seajs 支持AMD,京东目前使用 笔者了解不甚浅，笔者采用requirejs进行测试
1.3 angularjs新特性
angularjs-1.5加入了许多新特性，我最感兴趣的是以下两个：
组件Components 官方表明在angular1中使用组件很容易的切换到angular2（基础教程qkxue.net），但目前我收到消息，angular出了一个编译器说，angular1可以直接编译到angular2
组件路由component-router
1.4 angularjs plugins
顺便介绍一些angular常用的一些插件
ngFileupload基于angular的文件上传 demo 例子
ui-router 路由
angular ui 其他ui插件可以使用这些
angular material 响应式框架
其他扩展modules包括导出csv，拖拉，滚动条
整合代码
目录路径
-lib/jquery/jquery-1.8.0.min.js
-lib/angular/angular.min.js
-lib/angular/angular-route.min.js
-lib/requireJS/require.js
-scripts/inject.js
-scripts/test.js
-scripts/app.js
-main.js
-index.html
-pages/app.html
-pages/home.html
-pages/index.html
(requirejs入口)main.js
/**
* require 主入口，相关配置依赖从这里配置
*/
require.config({
baseUrl: "/",
//每次新加载js，为了避免缓存
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
‘jquery‘: ‘lib/jquery/jquery-1.8.0.min‘,
‘angular‘: ‘lib/angular/angular.min‘,
‘angular-route‘: ‘lib/angular/angular-route.min‘,
‘app‘: ‘scripts/app‘,
//入口注入脚本
‘inject‘ : ‘scripts/inject‘
},
shim: {
‘angular‘: [‘jquery‘],
‘angular-route‘: [‘angular‘]
}
});
require(["inject"], function() {});
页面（index.html）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-main="main" src="http://www.mamicode.com/lib/requireJS/require.js"></script>
<title>angularJs & requireJs</title>
</head>
<body>
<!--程序入口-->
<app/>
</body>
</html>
注入脚本（inject.js）
!(function () {
‘use strict‘;
//当然了这个scripts的数据完全可以从服务器上动态获取回来加载
var scripts = [‘scripts/test‘];
//依赖脚本加载
require(scripts, function () {
//渲染
angular.bootstrap(document, [‘app‘]);
});
}());
主模块脚本（scripts/app.js）
这里是对主模块的基本定义，最后必须返回模块的对象，用于进行依赖然后进行下一步的处理
define("app",["angular",‘angular-route‘], function(a, r) {
var app = angular.module(‘app‘, [‘ngRoute‘])
.controller("IndexCtrl",["$scope", function($scope) {
$scope.name = "王五";
}])
.component(‘app‘, {
templateUrl: "pages/app.html"
})
.config(["$routeProvider",
function($routeProvider) {
$routeProvider.
when("/home", {
templateUrl: "pages/home.html",
resolve : {
$routeChangeSuccess : function($rootScope) {
$rootScope.appName = ‘这里是appName‘;
}
}
}).
when("/index", {
templateUrl: "pages/index.html",
controller: "IndexCtrl"
})]);
return app;
});
app组件模板（pages/app.html）
<h2>头部</h2>
内容:
<java></java>
<div ng-view></div>
<h2>底部</h2>
组件脚本（scripts/test.js）
//这里必须依赖app脚本
define(["app"], function (app) {
//定义java组件
app.component(‘java‘, {
template: "我是java程序员",
});
});
view路由home.html
这里是home.html
结果
访问路由
http://localhost:8080/app.html#/home
结果
html展示： html dom结果： dom
angularjs和requirejs整合