文档章节

在angularjs路由中单个页面独立添加js文件及在angularjs中使用jquery插件

p
 pf12345
发布于 2014/04/03 23:38
字数 757
阅读 18111
收藏 7

###一、在angularjs使用route时,若想在一个单独路由页面使用一个单独js文件,可以使用以下方法:

1、scriptjs:

(function (name, context, definition) {
    if (typeof module != 'undefined' && module.exports) module.exports = definition()
    else if (typeof define == 'function' && define.amd) define(definition)
    else context[name] = definition()
})('$script', this, function() {
    var doc = document
        , head = doc.getElementsByTagName('head')[0]
        , validBase = /^https?:\/\//
        , list = {}, ids = {}, delay = {}, scriptpath
        , scripts = {}, s = 'string', f = false
        , push = 'push', domContentLoaded = 'DOMContentLoaded', readyState = 'readyState'
        , addEventListener = 'addEventListener', onreadystatechange = 'onreadystatechange'

    function every(ar, fn) {
        for (var i = 0, j = ar.length; i < j; ++i) if (!fn(ar[i])) return f
        return 1
    }
    function each(ar, fn) {
        every(ar, function(el) {
            return !fn(el)
        })
    }

    if (!doc[readyState] && doc[addEventListener]) {
        doc[addEventListener](domContentLoaded, function fn() {
            doc.removeEventListener(domContentLoaded, fn, f)
            doc[readyState] = 'complete'
        }, f)
        doc[readyState] = 'loading'
    }

    function $script(paths, idOrDone, optDone) {
        paths = paths[push] ? paths : [paths]
        var idOrDoneIsDone = idOrDone && idOrDone.call
            , done = idOrDoneIsDone ? idOrDone : optDone
            , id = idOrDoneIsDone ? paths.join('') : idOrDone
            , queue = paths.length
        function loopFn(item) {
            return item.call ? item() : list[item]
        }
        function callback() {
            if (!--queue) {
                list[id] = 1
                done && done()
                for (var dset in delay) {
                    every(dset.split('|'), loopFn) && !each(delay[dset], loopFn) && (delay[dset] = [])
                }
            }
        }
        setTimeout(function () {
            each(paths, function (path) {
                if (path === null) return callback()
                if (scripts[path]) {
                    id && (ids[id] = 1)
                    return scripts[path] == 2 && callback()
                }
                scripts[path] = 1
                id && (ids[id] = 1)
                create(!validBase.test(path) && scriptpath ? scriptpath + path + '.js' : path, callback)
            })
        }, 0)
        return $script
    }

    function create(path, fn) {
        var el = doc.createElement('script')
            , loaded = f
        el.onload = el.onerror = el[onreadystatechange] = function () {
            if ((el[readyState] && !(/^c|loade/.test(el[readyState]))) || loaded) return;
            el.onload = el[onreadystatechange] = null
            loaded = 1
            scripts[path] = 2
            fn()
        }
        el.async = 1
        el.src = path
        head.insertBefore(el, head.lastChild)
    }

    $script.get = create

    $script.order = function (scripts, id, done) {
        (function callback(s) {
            s = scripts.shift()
            if (!scripts.length) $script(s, id, done)
            else $script(s, callback)
        }())
    }

    $script.path = function (p) {
        scriptpath = p
    }
    $script.ready = function (deps, ready, req) {
        deps = deps[push] ? deps : [deps]
        var missing = [];
        !each(deps, function (dep) {
            list[dep] || missing[push](dep);
        }) && every(deps, function (dep) {return list[dep]}) ?
            ready() : !function (key) {
            delay[key] = delay[key] || []
            delay[key][push](ready)
            req && req(missing)
        }(deps.join('|'))
        return $script
    }

    $script.done = function (idOrDone) {
        $script([null], idOrDone)
    }

    return $script
});

并将scriptjs.js加入主页header中。

2、在每个路由中添加额外js文件:

var app = angular.module('app', [
    'ngRoute',
    'ngAnimate'
    'ngSanitize',
    'ngDragDrop'
])
.config(function ($routeProvider, $compileProvider ,$controllerProvider) {
    app.registerCtrl = $controllerProvider.register;
    app.resolveScriptDeps = function(dependencies){
        return function($q,$rootScope){
            var deferred = $q.defer();
            $script(dependencies, function() {
                // all dependencies have now been loaded by $script.js so resolve the promise
                $rootScope.$apply(function()
                {
                    deferred.resolve();
                });
            });

            return deferred.promise;
        }
    };
    $routeProvider
        .when('/login', {
            controller: 'LoginCtrl',
            templateUrl: 'content/views/login.html',
            publicAccess: true
        })
        .when('/article/edit/:id', {
            controller: 'EditArticleCtrl',
            templateUrl: 'content/views/editArticle.html',
            resolve: {
                deps: app.resolveScriptDeps([
                    'js/jquery.zclip.min.js',
                    'yourjs2.js'
                ])
            }

        })

此后,当你打开editArticle.html时,将会自动在header后面添加jquery.zclip.min.js、yourjs2.js文件。

###二、在angularjs中使用jquery插件时,最好使用directive而不是直接在controller中使用,如使用 uploadify进行文件上传,可兼容IE8及以上版本:

<pre><code> html: &lt;input name="file" class="btn" type="file" id="head_upload" value="上传头像" upload-Img/> angularjs app.js: 通过路由,额外添加js文件: var app = angular.module('app', [ 'ngRoute', 'ngAnimate' 'ngSanitize', 'ngDragDrop' ]) .config(function ($routeProvider, $compileProvider ,$controllerProvider) { app.registerCtrl = $controllerProvider.register; app.resolveScriptDeps = function(dependencies){ return function($q,$rootScope){ var deferred = $q.defer(); $script(dependencies, function() { $rootScope.$apply(function() { deferred.resolve(); }); }); return deferred.promise; } }; $routeProvider.when('/editInfo', { resolve: { deps: inoteApp.resolveScriptDeps([ 'js/swfobject.js', 'js/jquery.uploadify.v2.1.4.min.js' ]) }, controller: 'EditInfoCtrl', templateUrl: 'content/views/EditInfo.html' }) }) 为路由添加controller: app.controller('inoteCtrl', function ($scope){ /** * 上传图片成功后函数 * 即下面directive中调用的scope.uploadImg(obj) */ $scope.uploadImg = function(data) { $scope.imageSrc = data.value; $('.c_left').attr('src',$scope.imageSrc); } }) 通过指令,进行添加图片上传功能添加: app.directive('uploadImg', function () { return { restrict: 'A', link: function(scope, element, attrs) { var timerImgUpload = setTimeout(function() { $(element).uploadify( { 'uploader': 'js/uploadify.swf', 'script': 'yoursite/Upload/Image',//接收处理页面 'folder': '', 'queueID': 'fileQueue', 'auto': true, 'multi': false, 'buttonText': 'img-File', 'fileExt': '*.jpg;*.png;*.gif;', 'hideButton': true, 'onSelect': function (e, queueId, fileObj) { $('#index-exploreLoading').show(); }, 'fileDesc': '请选择jpg文件', 'onComplete': function(event, queueId, fileObj, response, data) { $('#index-exploreLoading').hide(); var obj = JSON.parse(response); scope.uploadImg(obj); }, 'onError': function(event, queueId, fileObj, errorObj) { alert(errorObj.type); alert(errorObj.info); } }); clearTimeout(timerImgUpload); },10); } }; }); </code></pre>

© 著作权归作者所有

p
粉丝 17
博文 12
码字总数 10328
作品 0
成都
私信 提问
关于AngularJs与JQuery的区别

关于AngularJs和JQuery之间的区别嘛,这篇文章说的很清楚了,我就不多说了:英文原版 中文版 这里谈谈我的一些看法: JQuery是一个工具库,它并不是框架。 当然你会说JQuery UI、Bootstrap等...

Raphael_goh
2014/12/14
9
1
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.4K
19
angular.js,backbone.js,ember.js区别

1 backbone. 对于初学者来说,我非常建议首先学习backbone 而不是jQuery. 因为jQuery提供的功能是操作DOM和Ajax数据传输. 而Backbone的功能和目的仅仅是提供一个javascript的MVC 实际针对Web...

造化玉碟
2014/04/05
1K
2
学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库: jQuery.js, bootstrap.js, angular.js 这意味着我又得学习了解这些库都是干什么的了. 略知...

刘军兴
2015/12/04
235
0
AngularJS 提交表单的方式

在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。 今天,我们会看一下过去使用PHP方式提交的表...

oschina
2014/06/21
60.8K
18

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部