###一、在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: <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>