abl-booking-calendar
Advanced tools
This is the ABL core application skeleton/scaffold for developing client side Angular.js web applications.
This is the ABL core application skeleton/scaffold for developing client side Angular.js web applications.
| Library | |
|---|---|
| angular | 1.5.8 |
| angular-animate | 1.5.8 |
| angular-aria | 1.5.8 |
| angular-messages | 1.5.8 |
| angular-mocks | 1.5.8 |
| angular-material | 1.1.1 |
| angular-ui-router | 0.3.1 |
| jquery | 3.1.1 |
| socket.io | 1.5.0 |
| angular-socket-io | 0.7.0 |
| feathers-client | 1.6.1 |
| ng-feathers | 1.6.1 |
| ng-device-detector | 3.0.1 |
| moment | 2.15.1 |
.env file)npm install -g gulp requirejs karma karma-chrome-launcher jasmine-core
npm install
npm run dev
npm run dist
npm run test
Unit testing with Karma, Jasmine, and generated code coverage reports with Istanbul.
Reference Guide -- airpair.com/angularjs/posts/unit-testing-angularjs-applications
Define environment variables used to configure the build of the client-side Angular application.
MODULE_NAME=abl
FEATHERS_URL=http://localhost:3030
DEBUG=true
MD_INK=false
| Variable | Type | Default | Description |
|---|---|---|---|
| MODULE_NAME | String | abl | Main application module name. |
| FEATHERS_URL | String | http://localhost:3030 | Feathers.js API server URL. |
| DEBUG | Boolean | true | Enable/disable application-wide debugging message output. |
| MD_INK | Boolean | false | Enable/disable application-wide md-ink effect. |
The contents of this file can be accessed in HTML / Javascript. For example:
src/index.html
<html ng-app="<!-- @echo MODULE_NAME -->">
src/components/config/config.constant.js
var config = {
MODULE_NAME: '/* @echo MODULE_NAME */',
FEATHERS: '/* @echo FEATHERS_URL */',
DEBUG: '/* @echo DEBUG */',
MD_INK: '/* @echo MD_INK */'
};
src/components/main/main.config.js
function main ($locationProvider, $compileProvider, $logProvider, $mdInkRippleProvider, config) {
$compileProvider.debugInfoEnabled(config.DEBUG);
$logProvider.debugEnabled(config.DEBUG);
if(config.MD_INK === 'false') {
$mdInkRippleProvider.disableInkRipple();
}
$locationProvider
.html5Mode(true)
.hashPrefix('!');
}
src/components/main/feathers.config.js
function feathers ($feathersProvider, config) {
$feathersProvider.setEndpoint(config.FEATHERS);
// You can optionally provide additional opts for socket.io-client
$feathersProvider.useSocket(true);
}
ALWAYS use Angular's built-in $logProvider and $log.debug() for logging to console for debugging purposes. This way we can enable/disable logging application-wide for development and production simply by changing the DEBUG boolean variable in the .env file.
function MainController ($scope, $log, config) {
// Only printed to console if debug mode is enabled.
$log.debug('Debug mode enabled.');
}
ESLint will throw a warning for 'no-console' if you forget this principal and use console.log().
To avoid triggering the $apply already in progress error (for me I find I hit most often when integrating third party plugins that trigger a lot of DOM events), you can use a 'safeApply' method that checks the current phase before executing your function. This is patched into the $scope object of topmost controller (NavController), and Angular propagates it throughout the rest of the application:
$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
Usage within child controllers throughout the Angular application:
$scope.safeApply();
Components are small, reusable parts of the application.
All component files DO NOT need angular module definitions, it happens for you.
So you don't ever have to write this:
angular.module('myApp').directive('myAwesomeDirective', myAwesomeDirective);
angular.module('myApp').controller('MyAwesomeController', MyAwesomeController);
Instead, the type is defined in the filename i.e. dashboard.directive.js, dashboard.controller.js
Too much wasted time creating files alone, and always the same code repeating. We declare the type in the filename instead.
dashboard.directive.js
function dashboard () {
return {
restrict: 'E',
templateUrl: 'dashboard/dashboard.html',
controller: 'DashboardController',
controllerAs: 'vm',
bindToController: true,
scope: {}
}
}
dashboard.controller.js
function DashboardController () {
var vm = this;
}
users.factory.js
function users ($q, $http) {
var getUser = function (userId) {
return $http.get('/users/' + userId);
}
return {
getUser: getUser
}
}
Moving towards an offline-available, cached version of the application for improved customer experience and load times.
App shell architecture -- Google's engineering blog post Slack's incremental boot architecture blog post
FAQs
This is the ABL core application skeleton/scaffold for developing client side Angular.js web applications.
The npm package abl-booking-calendar receives a total of 4 weekly downloads. As such, abl-booking-calendar popularity was classified as not popular.
We found that abl-booking-calendar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.