angularjs与requirejs整合

来源：互联网发布：淘宝铁观音编辑：程序博客网时间：2024/06/05 23:47

目录
概述
- 1 为何整合
- 2 脚本加载框架AMDCMD
- 3 angularjs新特性
- 4 angularjs plugins
整合代码
- 目录路径
- requirejs入口mainjs
- 页面indexhtml
- 注入脚本injectjs
- 主模块脚本scriptsappjs
- app组件模板pagesapphtml
- 组件脚本scriptstestjs
- view路由homehtml
结果
- 访问路由
- 结果

1. 概述

1.1 为何整合？

由于angularjs的各种依赖必须按照js的脚本按照循序进行加载，这令开发者非常头疼
脚本多次导入多次执行的冲突，以及性能效率的影响

1.2 脚本加载框架（AMD/CMD）

requirejs 支持AMD和CMD
seajs 支持AMD,京东目前使用
笔者了解不甚浅，笔者采用requirejs进行测试

1.3 angularjs新特性

angularjs-1.5加入了许多新特性，我最感兴趣的是以下两个：

组件Components
官方表明在angular1中使用组件很容易的切换到angular2，但目前我收到消息，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="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

0 0