https://github.com/forthright48/angular-github-repo-display
Display Github Repo files on a site using AngularJS.
https://github.com/forthright48/angular-github-repo-display
Last synced: 6 months ago
JSON representation
Display Github Repo files on a site using AngularJS.
- Host: GitHub
- URL: https://github.com/forthright48/angular-github-repo-display
- Owner: forthright48
- Created: 2015-12-30T13:51:20.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-04T13:34:12.000Z (almost 10 years ago)
- Last Synced: 2025-03-01T02:56:52.842Z (10 months ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Github Repo Display (AGRD)
Display files from a Github Repo on a site using AngularJS.
### Currently can display markdown files only
# Features
- Display markdown files pulled from github repo.
- Supports latex render using MathJax.
- Support relative links in markdown file.
# How to Use it
## Installation
First, download "angular-github-repo-display" and add it to your app.
**Warning**: AGRD depends on MathJax. Bower downloads around 50+ MB just for that :| So be a little bit patient.
bower install angular-github-repo-display
Then add the module to your app.
angular.module( "your-app", ["angular-github-repo-display"] );
## Render Latex
We want to render latex so we have to add MathJax and configure it.
Add these scripts at the end of your html file.
```
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
```
After that, wrap your latex with $ signs. To use them literally, delimit them as /$.
## Fixing Route
Decide, on which route you want to display the github repo. Suppose, you decided, it will be on the following route:
yourdomain.com/#/may/be/here
AGRD displays files from repo using the routes parameters. So it's important that we configure the route. Just add this:
angular.module("your-app").configure ( function( $routeProvider){
$routeProvider.when ( "/may/be/here/:filePath*", {
templateUrl: "SpecialTemplate.html"
});
});
So, just add ":filePath*" at the end of your desired route. `filePath` acts an parameter which AGRD uses to pull in files. And what about `specialTemplate`? That's coming next.
## SpecialTemplate
Add this directive in your SpecialTemplate view:
So what is happening? This directive is responsible for pulling files from github using API. But how is it going to know which repo to pull? Notice the "git-link" attribute there? That's what points to the git repo we want to pull.
For example, suppose we want to pull one of my other repo, then we put `git-link="forthright48/cpps101"`.