Screenshot of the new interface

AngularJS, Routing, CSS and Title tags

How to manage HTML partials?

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title ng-bind="header"></title>
<script src="./js/ext/angular.js"></script>
<script src="./js/ext/angular-route.js"></script>
<script src="./js/app.js"></script>
</head>
<body ng-view>
</body>
</html>
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'templates/login/login.html',
controller: 'loginCtrl'
}).
when('/register', {
templateUrl: 'templates/login/register.html',
controller: 'registerCtrl'
}).
when('/user/home', {
templateUrl: 'templates/user/home.html',
controller: 'homeCtrl'
}).
otherwise({
redirectTo: '/login'
});
}]);

How to manage the page title properly navigating trough partials.

myApp.controller('someCtrl', function ($rootScope) {

$rootScope.header = "This is the Section title";

How to manage CSS loads.

myApp.factory('Styles', function () {

var loadedStyles = [];

var addLink = function(styleHref,styleHash) {
var link = document.getElementById(styleHash);

if(typeof link !== "undefined" && link != null) {
link.disabled = false;
} else {
var newLink = document.createElement('link');
newLink.rel = "stylesheet";
newLink.type = "text/css";
newLink.id = styleHash;
newLink.href = styleHref;
document.getElementsByTagName('head')[0].appendChild(newLink);
}
};

var removeLink = function(styleHash) {
var link = document.getElementById(styleHash);
if(typeof link !== "undefined" && link != null) {
link.disabled = true;
}
};

return {
loadStyles: function(styles) {
styles.forEach(function(styleHref) {
var styleHash = styleHref.toString().hashCode();
var isLoaded = false;

loadedStyles.forEach(function (h) {
if (h == styleHash) {
isLoaded = true;
}
});

if (!isLoaded) {
loadedStyles.push(styleHash);
addLink(styleHref,styleHash);
}
});
},
unloadStyles: function(styles) {
styles.forEach(function(styleHref) {
var styleHash = styleHref.toString().hashCode();
loadedStyles.forEach(function (h, index) {
if (h == styleHash) {
loadedStyles.splice(index, 1);
removeLink(styleHash);
}
});
});
}
}
});
myApp.controller('someCtrl', function (Styles) {    Styles.loadStyles(['/css/ext/file1.css','/css/ext/file2.css']);
myApp.controller('someCtrl', function (Styles) {     Styles.unloadStyles(['/css/ext/file1.css']);

Bonus: using javascript in partials

myApp.directive('script', function() {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attr) {
if (attr.type === 'text/javascript-lazy') {
var code = elem.text();
var f = new Function(code);
f();
}
}
};
});
<script type="text/javascript-lazy">
alert('Hello medium!');
</script>

--

--

--

Serial entrepreneur, consults on build and continuous integration, petrolhead. Aut viam inveniam aut faciam

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Hermans

Sam Hermans

Serial entrepreneur, consults on build and continuous integration, petrolhead. Aut viam inveniam aut faciam

More from Medium

Let’s Make 2048 (Part 2)

Understanding the Angular Material Color Palette

JavaScript Arrays

A Walkthrough for fetching API