`
tangkuo
  • 浏览: 100344 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

angularjs与requirejs整合

 
阅读更多
摘要
angularjs与requirejs整合,AMD/CMD
目录

[TOC]
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



--文件上传demo
<body ng-app="fileUpload" ng-controller="MyCtrl">
  <form name="myForm">
    <fieldset>
      <legend>Upload on form submit</legend>
      Username:
      <input type="text" name="userName" ng-model="username" size="31" required>
      <i ng-show="myForm.userName.$error.required">*required</i>
      <br>Photo:
      <input type="file" ngf-select ng-model="picFile" name="file"   
             accept="image/*" ngf-max-size="2MB" required
             ngf-model-invalid="errorFile">
      <i ng-show="myForm.file.$error.required">*required</i><br>
      <i ng-show="myForm.file.$error.maxSize">File too large
          {{errorFile.size / 1000000|number:1}}MB: max 2M</i>
      <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
      <br>
      <button ng-disabled="!myForm.$valid"
              ng-click="uploadPic(picFile)">Submit</button>
      <span class="progress" ng-show="picFile.progress >= 0">
        <div style="width:{{picFile.progress}}%"
            ng-bind="picFile.progress + '%'"></div>
      </span>
      <span ng-show="picFile.result">Upload Successful</span>
      <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </fieldset>
    <br>
  </form>
</body>



//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadPic = function(file) {
    file.upload = Upload.upload({
      url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
      data: {username: $scope.username, file: file},
    });

    file.upload.then(function (response) {
      $timeout(function () {
        file.result = response.data;
      });
    }, function (response) {
      if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
    }, function (evt) {
      // Math.min is to fix IE which reports 200% sometimes
      file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
    });
    }
}]);



--

分享到:
评论

相关推荐

    angularjs_requirejs demo

    这个"angularjs_requirejs demo"是将AngularJS与RequireJS结合使用的一个示例项目,旨在帮助开发者更好地理解和实践这两种技术的集成。 **AngularJS** 是一个强大的前端MVC(Model-View-Controller)框架,由Google...

    AngularJS与RequireJS集成

    **AngularJS与RequireJS集成** AngularJS 和 RequireJS 是两种非常重要的前端开发工具。AngularJS 是一个强大的 MVC(Model-View-Controller)框架,用于构建动态单页应用程序(SPA),而 RequireJS 是一个 ...

    angular-requirejs:Angularjs + Requirejs

    **AngularJS + RequireJS 整合详解** 在前端开发中,AngularJS 和 RequireJS 是两个非常重要的库。AngularJS 是一款强大的 MVVM(Model-View-ViewModel)框架,用于构建可维护、可测试的单页面应用程序。而 ...

    Angularjs-Requirejs-Seed:AngularJS+RequireJS 应用的种子项目

    在"Angularjs-Requirejs-Seed"项目中,这两者被整合以创建一个高效的SPA应用。项目结构可能包括以下几个部分: - **main.js**: RequireJS的入口点,配置模块路径,启动应用。 - **app.js**: AngularJS应用的核心...

    angularjs-requirejs-seed:angularjs 和 requirejs 的种子应用程序

    在"angularjs-requirejs-seed"这个项目中,开发者创建了一个种子应用程序,用于演示如何整合AngularJS和RequireJS。通过这个项目,初学者可以了解到这两个库的结合使用方法,为自己的项目提供一个良好的起点。项目的...

    rjs:弹簧 + angularjs + requirejs + r.js

    结合这四个技术,我们可以创建一个高效的Java后端与AngularJS前端的Web应用。Spring提供稳定且功能丰富的服务器端服务,AngularJS处理动态的前端交互,RequireJS负责前端的模块化和异步加载,而r.js则用于构建和优化...

    Seed-AngularJS-RequireJS:使用 RequireJS 的 AngularJS 应用程序的起点

    标题中的“Seed-AngularJS-RequireJS”指的是一个项目模板,它为开发人员提供了一个起点,用于构建使用AngularJS和RequireJS的Web应用程序。这个模板可以帮助开发者快速地搭建一个结构良好的、模块化的应用框架。 ...

    SeedProject:AngularJS + RequireJS + 路由

    通过这个种子项目,开发者可以学习到如何在实际项目中整合AngularJS、RequireJS以及路由,理解它们之间的交互,以及如何组织和管理大型前端项目的结构。这为快速开发高效、可维护的前端应用提供了良好的起点。

    AngularJSWithRequireJS:AngularJS、RequireJS、Karma 示例

    在这个"AngularJSWithRequireJS"示例中,开发者可能面临如何将AngularJS与RequireJS结合使用的挑战。AngularJS本身已经具有模块化的概念,但RequireJS提供了一种不同的模块化机制。将两者整合可以带来以下好处: 1....

    AngularJS-RequireJS:此存储库包含带有 RequireJS 的基本 AngularJS 应用程序

    **AngularJS 和 RequireJS 结合使用** AngularJS 是一个由 Google 开发的强大的前端 ...通过这个例子,开发者可以学习到如何在实际项目中整合 AngularJS 和 RequireJS,创建出结构清晰、性能优化的前端应用。

    小心!AngularJS结合RequireJS做文件合并压缩的那些坑

    然而,在项目中整合AngularJS和RequireJS进行文件合并压缩时,可能会遇到一些挑战。以下将详细介绍这些挑战及其解决办法。 1. **保持paths一致性**: 在使用RequireJS时,`main.js`通常定义了模块的基本配置,包括...

    requirejs整合angularjs

    在本文中,我们将深入探讨如何将RequireJS与AngularJS整合,以便在Web应用程序中实现高效、模块化的开发。RequireJS是一种流行的JavaScript模块加载器和打包工具,它使得代码组织更加有序,而AngularJS则是一个强大...

    spring-mvc-showcase-case1-client

    《Spring MVC 框架与 AngularJS 及 RequireJS 整合案例分析》 在现代Web开发中,Spring MVC作为Java后端的主要框架之一,AngularJS作为前端的MVC框架,RequireJS则作为模块化加载工具,三者结合能够构建出高效、可...

    angular按需加载js

    AngularJS本身不直接支持按需加载,但通过与RequireJS结合,可以实现模块化的异步加载。RequireJS是一个流行的AMD(Asynchronous Module Definition)加载器,它允许我们定义和异步加载JavaScript模块,从而提高页面...

    AngularJs 动态加载模块和依赖

    - 使用第三方库:如RequireJs等,可以在浏览器端实现模块化的加载逻辑,但RequireJs与AngularJs的模块化体系不同,实现时需要特别注意两者的整合方式。 3. 文件结构和依赖配置: 一个典型的AngularJs项目文件结构...

    angularjs_pingan-master

    AngularJS_PingAn-Master 是一个基于AngularJS框架构建的前端项目,其主要目的是演示如何将RequireJS模块化加载器与AngularJS进行有效集成,以实现更高效、可维护的前端代码结构。这个项目仅包含前端JavaScript代码...

    angular.js + require.js构建模块化单页面应用的方法步骤

    整合AngularJS和RequireJS的步骤如下: 1. **目录结构**:设置合理的项目目录,例如将库文件、模块文件、控制器等分开存放,便于管理和维护。 2. **HTML入口**:在HTML文件中,只需要引入`require.js`和主配置文件...

    angular-requirejs-express-seed:angular-requirejs-express-seed

    总的来说,`angular-requirejs-express-seed` 是一个实用的开发框架,它整合了前端和后端的热门技术,为开发者提供了一套高效的开发流程,降低了项目初始化阶段的工作量,有助于快速构建高质量的Web应用。

    chatty-play-angular:使用基于演员的后端的 onepage -app

    "Chatty Play Angular" 是一个基于 Scala 的全栈 Web 应用程序模板,它整合了 Play Framework、AngularJS 和 RequireJS。这个项目旨在提供一个单页应用(SPA)的示例,利用 Play Framework 的强大功能作为后端服务器...

Global site tag (gtag.js) - Google Analytics