Angular in Jekyll/Github pages blog - blog post routing - javascript

I'm trying to incorporate Angular into my Jekyll/Github Pages blog. So far I've been able to set up the basic pages ("About", "Projects", and a list of posts), but the links for each post route to a non-angular page. I know I haven't set up the routes and partial quite right but am having trouble debugging. Any suggestions? Here's my code:
app.js:
'use strict';
var app = angular.module('myBlog', [
'ngRoute',
'ngResource',
'blogService',
'postService'
]);
app.config(function($routeProvider) {
$routeProvider
.when('/index', {
templateUrl: 'blog_overview.html',
controller: 'IndexCtrl'})
.when('/posts', {
templateUrl: 'blog_posts.html',
controller: 'BlogPostCtrl'})
.when('/posts/:link/', {
templateUrl: 'blog_post.html',
controller: 'BlogPostCtrl'})
.otherwise({redirectTo: '/index'});
})
.run();
controllers.js:
app.controller('BlogPostCtrl', ['$scope', '$resource', '$routeParams', 'Posts',
function($scope, $resource, $routeParams, Posts){
// $scope.templateUrl = ???
Posts.getPosts(function(data){
$scope.posts = data;
})
}])
directives.js:
'use strict';
angular.module('myBlog.directives', [])
.directive('markdown', function($http){
var converter = new Showdown.converter();
return{
restrict: 'A',
scope: { link:'#' },
link: function(scope, element, attrs){
attrs.$observe('link', function(link){
$http.get('/posts/' + link).success(function(response){
var htmlText = converter.makeHtml(response);
element.html(htmlText);
});
});
}
};
});
sample from blog_post.json
[
{
"title": "first post",
"slug": "2014-06-25-first-post",
"file": "app/js/posts/2014-06-25-first-post.md",
"tags": [
{"title" : "career"}
]
}]
blog_posts.html partial:
<div ng-controller="BlogPostCtrl">Posts</div>
<div ng-repeat="post in posts">
<h2>{{post.title}}</h2>
<div markdown link=""></div>
</div>
blog_post.html partial:
<div ng-controller="BlogPostCtrl">Posts</div>
<div ng-repeat="post in posts">
<p>{{post.file}}</p>
<div markdown link=""></div>
</div>

It looks like you're trying to reinvent the wheel. Delegating markdown parsing to client side is counterproductive.
Jekyll tries to remove all the unnecessary work on server side to allow sites to be light and performance oriented.
I understand that your work can be a proof of concept but I really don't get why you're trying to do it this way, because I guess that serving static pages is far more efficient than generating them client side.

Related

Routing issue with angular directives

I'm trying to setup one of my first angular projects and am having trouble getting to grips with the routing.
On page load I see the initial template that has been set by the preferencesDirective, which is great.
When I click the "Change Template" button I want it to change to another template but nothing happens. If I set the template url's in the $routeProvider to something invalid then I see a 404 error in the debugger which tells me something must be working but nothing happens when the template url is valid.. How do I get it to change correctly?
Thanks.
<div id="PreferencesApp" class="" ng-app="clientPreferencesModule">
<preferences-directive factory-settings="clientPreferences"></preferences-directive>
Change Template
</div>
<script>
var app = angular.module("clientPreferencesModule", ["ngResource", "ngRoute"]);
//var app = angular.module("clientPreferencesModule", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
$routeProvider.when("/Preferences/:id", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
$routeProvider.when("/Preferences", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
$routeProvider.when("/Details", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/DetailsTemplate.html' });
});
app.controller('clientPreferencesController', clientPreferencesController);
clientPreferencesController.$inject = ["$scope", "$resource", "$rootScope", "$http", "$route", "$location"];
function clientPreferencesController($scope, $resource, $rootScope, $http, $route, $location) {
this.model = #Html.Raw(JsonConvert.SerializeObject(Model));
$scope.location = $location.path();
}
app.directive('preferencesDirective', preferencesDirective);
function preferencesDirective() {
return {
restrict: 'EA',
scope:
{
factorySettings: '='
},
controller: 'clientPreferencesController',
controllerAs: 'pc',
bindToController: true,
templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html'
}
}
</script>
For routing to work you've to create different views along with its associated controller & then have directive inside that view. And also you'll need ng-view directive in index.html in which all the routes view going to be loaded. And also preferencesDirective should only contain the reusable unique functionality, & the complete app view, so that you can have it different views with different data sets alongside different view components.
So, your template can be:
<div id="PreferencesApp" class="" ng-app="clientPreferencesModule">
Change Template
<div ng-view></div>
</div>
Now for different routes you can have each different controllers or if you want to handle it in one controller the have only one, but different from directive's controller, so it can be,
app.config(function ($routeProvider) {
$routeProvider.when("/", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
$routeProvider.when("/Preferences/:id", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
$routeProvider.when("/Preferences", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
$routeProvider.when("/Details", { controller: "viewController", templateUrl: '/AngularTemplates/ClientPreferences/DetailsTemplate.html' });
});
Have preferencesDirective in all these templates. (This will now potentially change the directive's template but you can have changing dom of each view in views's templates & keep directive's template constant)
Now in viewController by making use of $routeParams you can check the current route & send different data to preferencesDirective's controller.
Now if you must want to change directives template conditionally then make use of ng-include inside directive's template.
function preferencesDirective() {
return {
restrict: 'EA',
scope:
{
factorySettings: '=',
templateSrc: '='
},
controller: 'clientPreferencesController',
controllerAs: 'pc',
bindToController: true,
templateUrl: '<ng-include src="pc.template()"></ng-include>'
}
}
function clientPreferencesController($scope, $resource, $rootScope, $http, $route, $location) {
this.model = #Html.Raw(JsonConvert.SerializeObject(Model));
$scope.location = $location.path();
$scope.template = function(){
if($scope.templateSrc) {
return '/AngularTemplates/ClientPreferences/'+ $scope.templateSrc + '.html';
}
}
}
Here share that templateSrc from viewController based on current route.

Issue in Angular route

I have an AngularJS application. I recently added couple of routes but they don't work. The rest is working fine.
I included them in my index.html
<script src="privacy_policy/privacy_policy.js"></script>
<script src="contacts/contacts.js"></script>
I added them in my app.js file:
angular.module('myApp', [
...
'myApp.privacy_policy',
'myApp.contacts',
...
]).
The route system:
$routeProvider.when('/privacy_policy', {
templateurl: 'privacy_policy/privacy_policy.html',
data: {
needauth: false
}
});
$routeProvider.when('/contacts', {
templateurl: 'contacts/contacts.html',
data: {
needauth: false
}
});
I added a simple controller:
'use strict';
angular.module(
'myApp.privacy_policy', ['ngRoute']
).
config(['$routeProvider', function($routeProvider) {
}]).
controller('PrivacyPolicyCtrl', ["$scope", "$http", "store", "URL", function($scope, $http, store, URL) {
}]);
And some simple html:
<div ng-controller="PrivacyPolicyCtrl" class='row below-header'>
PRIVACY POLICY
</div>
Finally I created a simple link to that view:
<li><a href='/privacy_policy'>Privacy policy</a></li>
I created the SAME things for contacts but if I click on those link ng-view is completely empty.
All the others route are working fine and I can't see any difference. I get no error on the console.
In the route system in app.js If I put a different template, for example:
$routeProvider.when('/privacy_policy', {
templateurl: 'faq/faq.html',
data: {
needauth: false
}
});
The faq page is diplayed correctly. What am I missing?
Ok I finally find you what the problem is.
I only needed to change this:
templateurl: 'contacts/contacts.html',
with this:
templateUrl: 'contacts/contacts.html',

Angular route with $routeProvider

I'm trying to understand the routing before I start building my app but it doesn't seem to work.
I have a basic app for tests in which I created 3 html files matching 3 different views and I wish to change the displayed view depending on the routes.
But I always see the index view.
Here are the files :
app.js :
'use strict';
angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap', 'BalrogApp.controllers'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '../index.html'
})
.when('/requests', {
templateUrl: '../views/requestsList.html'
})
.when('/projects', {
templateUrl: '../views/projectsList.html'
})
.otherwise({
redirectTo: '/lol'
});
}]);
requestsController.js :
'use strict';
var requestsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);
requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) {
this.studentName = "Request";
this.studentMark = 75;
});
projectsController.js :
'use strict';
var projectsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);
projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) {
this.studentName = "Project";
this.studentMark = 75;
});
The html files are almost the same except for some words and for the controller associated to each of them.
Here are the few lines that change between html wiews :
index.html :
index view
<div class="row-fluid" ng-controller="requestsController as rc">
<div class="span2">{{rc.studentName}} </div>
</div>
requestsList.html :
Request view
<div class="row-fluid" ng-controller="requestsController as r">
<div class="span2">{{r.studentName}} </div>
</div>
projectsList.html
Project view
<div class="row-fluid" ng-controller="projectsController as p">
<div class="span2">{{p.studentName}} </div>
</div>
Byt no matter what the route is, if I added '/projects' or '/requests' to the url, I stay on the index view.
Any idea what I am doing wrong ?
Make sure you have ng-view attribute or element set in your index.html. If it is absent the router won't work.
Another good practice would be to set your view controller on the router, like so:
$routeProvider
.when('<route_name>', {
templateUrl: '../<tempate>.html',
controller: '<controller_name>',
controllerAs: 'myController'
})
1. On your base file (usually index.html), make sure you have an ng-view directive that will be used to load all the partial views
2. Are all your html templates in the same location as the base file? If yes, the instead of having the templateUrl as "../index.html" you could try setting it to "/index.html" instead. The first checks for the html file outside of the directory where the base file is located, while the second checks for it in the same directory

Unable to understand the flow of angularjs?

I am new with anglarjs and I am working on ng-view example which is available here, actually the problem is that when I run application in firefox it show me only text in index.page, not shown any result related to angularjs.
index.html
<div ng-controller="MainCtrl as main">
Choose:
Moby |
Moby: ch1 |
Gatsby |
Gatsby: ch4 |
Scarlet Letter<br/>
</div>
<pre>$location.path() = {{main.$location.path()}}</pre>
<pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{main.$route.current.params}}</pre>
<pre>$routeParams = {{main.$routeParams}}</pre>
app.js
The controller is define here.
var myApp = angular.module('ngviewExample',['ngRoute'])
.config(['$routeProvider','$locationProvider',
function ($routeProvider,$locationProvider){
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookCtrl',
controllerAs: 'book'
});
$locationProvider.html5Mode({
enabled : true,
requireBase : false
});
}])
.controller('MainCtrl', ['$route', '$routeParams', '$location',
function($route, $routeParams, $location) {
this.$route = $route;
this.$location = $location;
this.$routeParams = $routeParams;
}])
.controller('BookCtrl', ['$routeParams', function($routeParams) {
this.name = "BookCtrl";
this.params = $routeParams;
}]);
All the angularjs files are loading fine but it's not showing any error in Firebug console. But when I debug this code I don't know why it go inside the following code on accessing the url http://localhost:8383/TestingDirective/index.html
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookCtrl',
controllerAs: 'book'
});
Also shown in the snap-shot.
Can anyone please tell me what I am missing here, only text of index.html page show on the page and nothing else.
Any help would be appreciated.

AngularJS routing is not working: no events on link clicks, no $routeParams

Somehow my app stopped working during development and I really cannot get what's wrong with it.
I've removed everything, the only code remaining is:
function handlerControl($scope, $routeParams, $location){
$scope.route = $routeParams;
}
var app = angular.module('Hello', []).config(
function($routeProvider){
$routeProvider.when('/:a/:b', {controller: handlerControl});
}
);
and html is
<body ng-app="Hello">
<div ng-controller="handlerControl">
{{route}}
</div>
</body>
omitting head part with including everything.
When I go to
http://helloday/#/a/b/
I'm getting an empty hash while expecting to get {a: 'a', b: 'b'}
What I'm doing wrong?
Bit modified(to make it work) jsFiddle: http://jsfiddle.net/wWDj2/http://jsfiddle.net/wWDj2/
Routing requires you use ngView, and that you specify either a template or a templateUrl:
App code.
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/foo/:id', {
controller: 'FooCtrl',
template: '<h1>Foo {{id}}</h1>'
})
.when('/bar/:test', {
controller: 'BarCtrl',
templateUrl: 'bartemplate.html'
})
.otherwise({
controller: 'DefaultCtrl',
template: '<h1>This is the default</h1>'
});
});
app.controller('FooCtrl', function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
app.controller('BarCtrl', function($scope, $routeParams) {
$scope.test = $routeParams.test;
});
app.controller('DefaultCtrl', function($scope){});
Your main page's markup:
<div ng-app="myApp">
Foo 123
Bar Blah
Default route
<hr/>
<div ng-view>
<!-- your processed view will show up here -->
</div>
</div>

Categories