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整合

猜你喜欢