angular的GitHub Repository Directive Example学习

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>GitHub Repository Directive Example</title> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head>
<body>
<h2>Demo</h2>
<div>
<a href="https://github.com/jquery/jquery" github-repo>
jQuery - New Wave JavaScript
</a>
<a href="https://github.com/angular/angular.js" github-repo>
AngularJS
</a>
</div>
<div appVersion>1.0.1</div>
<script>
//使用严格模式;
'use strict'; var myApp = angular.module('myApp', []); /* Directives */ myApp.directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}]); //依赖http服务 , $document在这里面没有用到;
myApp.directive('githubRepo', ['$http', '$document', function($http, $document) {
return {
restrict: 'A',
//没有对dom进行绑定link,所以任何时候修改DOM都行;
link: function(scope, elm, attrs) {
var address = attrs.href.slice(attrs.href.indexOf('github.com/') + 11); /*
没结果的返回的东西;
JSON_CALLBACK({
"meta": {
"X-RateLimit-Limit": "60",
"X-RateLimit-Remaining": "59",
"X-RateLimit-Reset": "1418877113",
"X-GitHub-Media-Type": "github.v3",
"status": 404
},
"data": {
"message": "Not Found",
"documentation_url": "https://developer.github.com/v3"
}
});
有结果的返回(太长了,自己试一试):
https://api.github.com/repos/jquery/jquery?callback=JSON_CALLBACK
*/
$http.jsonp('https://api.github.com/repos/' + address + '?callback=JSON_CALLBACK').success(function(data, status)
{
var repoInfo = data.data;
var formattedRepoName = repoInfo.full_name.replace('/', '_');
var container = angular.element('<div/>'); var repoContent;
if (repoInfo.description && repoInfo.homepage) {
repoContent = '<p>' + repoInfo.description + '</p><p class="homepage"><strong><a href="' + repoInfo.homepage + '">' + repoInfo.homepage + '</a></strong></p>';
} else if (repoInfo.description) {
repoContent = '<p>' + repoInfo.description + '</p>';
} else if (repoInfo.homepage) {
repoContent = '<p class="homepage"><strong><a href="' + repoInfo.homepage + '">' + repoInfo.homepage + '</a></strong></p>';
} else {
repoContent = '<p class="none">No description or homepage.</p>';
} container.addClass('reposidget');
container.html('<div class="reposidget-header"><h2><a href="https://github.com/' + repoInfo.owner.login + '">' + repoInfo.owner.login + '</a>&nbsp;/&nbsp;<strong><a href="' + repoInfo.html_url + '">' + repoInfo.name + '</a></strong></h2></div><div class="reposidget-content">' + repoContent + '</div><div class="reposidget-footer"><span class="social"><span class="star">' + repoInfo.watchers_count + '</span><span class="fork">' + repoInfo.forks_count + '</span></span><a href="' + repoInfo.html_url + '/zipball/' + repoInfo.master_branch + '">Download as zip</a></div>'); //把新建的DOM节点添加到elm后面;
elm.after(container);
elm.css('display', 'none');
});
}
};
}]);
</script>
<style type="text/css">
a.reposidget {
color: #4183c4;
text-decoration: none;
display: block;
clear: both;
margin: 10px 0;
} div.reposidget {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
max-width: 400px;
color: #666;
display: block;
clear: both;
margin: 20px 0;
} .reposidget a {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
color: #4183c4;
text-decoration: none;
} .reposidget-header {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
height: 36px;
line-height: 36px;
background: #fafafa;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#eaeaea));
background: -webkit-linear-gradient(top, #fafafa, #eaeaea);
background: -moz-linear-gradient(top, #fafafa, #eaeaea);
background: -ms-linear-gradient(top, #fafafa, #eaeaea);
background: -o-linear-gradient(top, #fafafa, #eaeaea);
background: linear-gradient(top, #fafafa, #eaeaea);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea')";
border: 1px solid #eaeaea;
border-radius: 3px 3px 0 0;
padding: 0 10px 0 0;
overflow: hidden;
text-overflow: ellipsis;
} .reposidget-header h2 {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 0 0 0 32px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAMAAADAi10DAAAABlBMVEWioqL///8ciDJAAAAAAnRSTlP/AOW3MEoAAAAxSURBVBjTY2BkQAMYAnAJJAAXQgjjExrKGokBjIwYGqE0XrOwhD1cNcI0nEIwBggAALWWANXTTzTsAAAAAElFTkSuQmCC') 7px 7px no-repeat;
} .reposidget-header h2 strong {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
font-weight: bold;
} .reposidget-content {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
padding: 10px 10px 8px 10px;
background: #fafafa;
border: 1px solid #ddd;
box-shadow: inset 0 1px 1px #fff;
} .reposidget-content p {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
margin: 0;
font-size: 13px;
line-height: 21px;
} .reposidget-content p.homepage {
text-overflow: ellipsis;
overflow: hidden;
} .reposidget-content p.none {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
font-style: italic;
color: #999;
} .reposidget-content strong {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
line-height: 1.25 !important;
} .reposidget-content a:hover {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
text-decoration: underline;
} .reposidget-footer {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
height: 46px;
background: #fcfcfc;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 3px 3px;
padding: 0 10px;
} .reposidget-footer .social {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
display: inline-block;
height: 26px;
margin: 10px 0 0 0;
} .reposidget-footer .social span {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
vertical-align: top;
margin: 0;
float: none;
border: 1px solid #ddd;
height: 24px;
line-height: 24px;
display: inline-block;
color: #666;
font-size: 12px;
font-weight: bold;
padding: 0 5px 0 24px;
} .reposidget-footer .star {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
border-radius: 3px 0 0 3px;
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAwUlEQVQoz42SMQ6EIBREuROX0BOY2GzcmmaLTTBxvYM9jVyEC0jJTZTYsQ4R4hKIW7xk/DMT5SNxzpEUa23X9/0IoHMZkhtqrd9VVY0A+ra4rusTcM5HSqkHOsx/imEIlmXxbwqlAGbwrlkihBjS4B3okH3fH0op/m8JWXTiFo0xr7quiwV4yIQtx8Nu29bN81z8bHjIZLd63WYKvOJ1MMaKRXjFYtM0PiSlHI7nFkBjBq9YnKbpg/D1Nzt1e3ox+wXh13nYaOboUAAAAABJRU5ErkJggg==') 6px 6px no-repeat;
} .reposidget-footer .fork {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
border-left: none !important;
border-radius: 0 3px 3px 0;
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAA8UlEQVQoz4WRTQqDMBSEXXbRu0gJdCH0AO66KP6cQ4pUJLcSFDyBC0VQ/EHPYt88NKhUu5gwTPJlwos2TZOWJIknhJAQPLIjaX3f323blnVds+CRnQHCcRxZFAULnrILNuM4fi/N8AxgSdNUbZD3kbVte903U2YwMI6j7rquhMjzc6jFQFue56y5WTDQdd0dAUT+tryX2j6rZk89iaoUQF4BwzAYSzN5/S/g+z7fHgSBVFNaA0v9WqZpyrIsnxugaZqfAA5XVfXa/AOWKIrUWMMwlKc/TTc8LMvazBvZIUCHeN5ZlrHgkR0C87y9/byP9AVjF5fB2Yv1MAAAAABJRU5ErkJggg==') 7px 5px no-repeat;
} .reposidget-footer a {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
float: right;
margin: 6px 0 0 0;
display: inline-block;
padding: 8px 15px;
line-height: 1.25;
font-size: 12px;
font-weight: bold;
color: #666;
text-shadow: rgba(255, 255, 255, 0.898438) 0px 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#e5e5e5));
background: -webkit-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -ms-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -o-linear-gradient(top, #f5f5f5, #e5e5e5);
background: linear-gradient(top, #f5f5f5, #e5e5e5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5')";
border-radius: 3px;
border: 1px solid #ddd;
border-bottom-color: #bbb;
box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 3px;
-webkit-user-select: none;
} .reposidget-footer a:hover {
color: #337797;
text-shadow: rgba(255, 255, 255, 0.898438) 0px 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f7fa), to(#d8eaf2));
background: -webkit-linear-gradient(top, #f0f7fa, #d8eaf2);
background: -moz-linear-gradient(top, #f0f7fa, #d8eaf2);
background: -ms-linear-gradient(top, #f0f7fa, #d8eaf2);
background: -o-linear-gradient(top, #f0f7fa, #d8eaf2);
background: linear-gradient(top, #f0f7fa, #d8eaf2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f7fa', endColorstr='#d8eaf2')";
border: 1px solid #cbe3ee;
border-bottom-color: #97c7dd;
} .reposidget-footer a:active {
color: #fff;
text-shadow: rgba(0, 0, 0, 0.296875) 0px -1px 0px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#0770a0), to(#0ca6dd));
background: -webkit-linear-gradient(top, #0770a0, #0ca6dd);
background: -moz-linear-gradient(top, #0770a0, #0ca6dd);
background: -ms-linear-gradient(top, #0770a0, #0ca6dd);
background: -o-linear-gradient(top, #0770a0, #0ca6dd);
background: linear-gradient(top, #0770a0, #0ca6dd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0770a0', endColorstr='#0ca6dd')";
border: 1px solid #2a65a0;
border-bottom-color: #0770a0;
}
</style>
</body>
</html>

angular的GitHub Repository Directive Example学习的更多相关文章

  1. 强烈推荐 GitHub 上值得前端学习的开源实战项目

    强烈推荐 GitHub 上值得前端学习的开源实战项目. Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2 ...

  2. 一个简单的例子学会github repository的webhook

    github的webhook是个有用的功能,允许开发人员指定一个服务器的url.当开发者对github仓库施加操作,比如提交代码,创建issue时,github网站会自动向该url指定的服务器推送事件 ...

  3. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  4. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  5. angular自定义指令-directive

    Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...

  6. 给你的 GitHub Repository 加上 sponsor 按钮

    「本文微信公众号 AndroidTraveler 首发」 背景 其实之前 GitHub 就已经说过要给开源的开发者提供赞助支持. 当你进入 GitHub 主页时,你会在右边发现一个 Tips. 点击进 ...

  7. github上热门深度学习项目

    github上热门深度学习项目 项目名 Stars 描述 TensorFlow 29622 使用数据流图进行可扩展机器学习的计算. Caffe 11799 Caffe:深度学习的快速开放框架. [Ne ...

  8. -_-#【Angular】自定义指令directive

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  9. 个人github链接及git学习心得总结

    个人github链接 https://www.github.com/liangjianming/test git学习心得总结​ git是一个快速,开源,分布式的版本控制系统. GitHub是一个基于w ...

随机推荐

  1. 探索 OpenStack 之(9):深入块存储服务Cinder (功能篇)

    继研究了Neutron之后,继续Nova的外围研究之旅.本站是研究块存储服务Cinder. 0.验证环境 环境包括: 1.一个controller节点,运行nova-api, nova-schedul ...

  2. OpenStack在线迁移

    OpenStack迁移需要将虚拟机创建运行在共享存储上才可以进行迁移. 一.配置共享存储 1.环境 OpenStack三个节点icehouse-gre模式部署一文部署了的OpenStack环境. IP ...

  3. OpenStack overview 笔记

    Example architecture example architecture 至少需要两个节点启动一个虚拟机或者实例.可选的服务,例如Block storage和Object storage需要 ...

  4. poj-3739. Special Squares(二维前缀和)

    题目链接: I. Special Squares There are some points and lines parellel to x-axis or y-axis on the plane. ...

  5. swfobject.js视频播放插件

    在网页中经常会用到视频播放的功能,下面介绍一下swfobject.js的视频播放应用:html代码结构: <div id="video_content"></di ...

  6. TopCoder SRM 633 Div.2 500 Jumping

    题意:给一个点(x,y),给一些步长delta1,delta2...deltaN,问从(0,0)严格按照步长走完N步后能否正好到达(x,y)点. 解法:其实就是判断这些线段和(0,0)-(x,y)这条 ...

  7. mysql创建表

    说明:此文件包含了blog数据库中建立所有的表的Mysql语句. 在sql语句中注意“约束的概念": 1.实体完整性约束(主键--唯一且非空) primary key() 违约处理:No a ...

  8. Linux 常用基本命令

    这两天有俩哥们问了我linux的事,问我在工作中需不需要用到,需不需要学会 一个是工作1年不到的,我跟他说,建议你学学,在以后肯定是要用到的,虽然用到的机会不多,但是会总比不会好 另一个是工作6年的, ...

  9. Colorable Fantasy UI

    Colorable Fantasy UI URL:https://www.assetstore.unity3d.com/#/content/7563 环境要求 Requires Unity 4.0.1 ...

  10. 《深入.NET平台和C#编程》--题型释疑

    本题考查抽象类和抽象方法的概念.定义抽象类或抽象方法使用的是abstract关键字,抽象类中可以包含抽象方法和非抽象方法,但抽象方法必须定义在抽象类中,抽象方法定义时只需要定义方法头,不可以定义方法体 ...