Yeoman generator for AngularJS - created by Arcus Solutions.
To install generator-arcus-angular from npm, run:
$ npm install -g generator-arcus-angularMake a new directory
$ mkdir my-angular-project && cd $_Initiate the generator
$ yo arcus-angular [app-name]To build the project, use Grunt:
$ gruntTo setup a local preview:
$ grunt serveThis generator uses grunt-ng-constant for setting up environment-specific constants in your AngularJS project. Edit the environments.json file to add new available environments to the project:
{
"production": {
"constants": {
"DEBUG_MODE": false
}
},
...
}Environments can be selected during build time as well as preview time. Environment defaults to "production":
$ grunt --ENV="development"- angular (aka angular:app)
- arcus-angular:controller
- arcus-angular:directive
- arcus-angular:filter
- arcus-angular:data-service
- arcus-angular:model
- arcus-angular:repository
- arcus-angular:utility
Sets up a new AngularJS app, generating all the boilerplate you need to get started. The app generator also optionally installs Bootstrap and additional AngularJS modules, such as angular-resource (installed by default).
$ yo arcus-angularGenerates a controller in app/scripts/controllers.
$ yo arcus-angular:controller userAbove example produces app/scripts/controllers/UserCtrl.js.
angular.module('myApp').controller('UserCtrl', ['$scope',
function ($scope) {
});Generates a controller in app/scripts/directives.
$ yo arcus-angular:directive inputAbove example produces app/scripts/directives/InputDirective.js and app/views/directives/input/root.html.
angular.module('myApp').directive('input', ['$scope',
function ($scope) {
return {
restrict: 'AE',
replace: true,
templateUrl: '/views/directives/input/root.html',
link: function(scope, element, attrs) {
}
};
});<div></div>Generates a filter in app/scripts/filters.
$ yo arcus-angular:filter userAbove example produces app/scripts/filters/UserFilter.js.
angular.module('myApp').filter('UserFilter', [
function () {
});While data services aren't native to AngularJS, they are a much more common structure in application development. The purpose of data services is to manage requests for information and populate models appropriately before returning the results to the caller for use. Data services are an important layer in application abstraction that allows one to properly manage requests for information and compartmentalize population into local structures.
Data services in AngularJS are built using factories and leverage the $q provider for handling promises.
Generates a data service in app/scripts/data-services.
$ yo arcus-angular:data-service googleAbove example produces app/scripts/data-services/GoogleDataService.js.
angular.module('myApp').factory('GoogleDataService', ['$q', '$http',
function ($q, $http) {
return {
getCollection: function() {
var deferred = $q.defer();
$http({
method: 'GET',
url: '#'
}).then(function() {
deferred.resolve();
}, function() {
deferred.reject();
});
return deferred.promise;
}
};
});AngularJS leverages the contents of the $scope for the model to be associated with the views, but we prefer to create
more formal guidelines for the structures of our data sets. Our models provide rigid constaints on the data available for
use within our application and help with standardizing usage with the views.
Like data services, Models are built using factories and leverage a custom utility ModelGenerator for populating
content via a constructor.
Generates a model in app/scripts/models.
$ yo arcus-angular:model userAbove example produces app/scripts/models/UserModel.js.
angular.module('arcusApp').factory('UserModel', ['ModelGenerator',
function (ModelGenerator) {
var UserModel = function(data) {
if (angular.isDefined(data)) {
ModelGenerator.generateFromData('UserModel', this, data);
}
};
UserModel.prototype = {
id: 0,
getId: function() {
return this.id;
}
};
return UserModel;
}]);Repositories are outlets for making requests to specific destinations. Applications today often leverage multiple APIs or data sets, and each API often has some differences in the way requests are made. Through the use of repositories, we are able to specify formats for requests to different services making it easy for our data services to ask for information. The best part is, if these services ever change we only need update the repositories to accomodate the changes.
Like data services and models, Repositories are built using factories and leverage the $http provider to make
requests.
Generates a repository in app/scripts/repositories.
$ yo arcus-angular:repository twitterAbove example produces app/scripts/repositories/TwitterRepository.js.
angular.module('arcusApp').factory('TwitterRepository', ['$q', '$http',
function ($q, $http) {
return {
};
}]);Not everything falls into the category of model, repository, or data service. Sometimes we just want some front-end tools or abstract classes that help keep our code clean and more efficient. Utilities don't have a special format, but are simply where things go when they don't belong anywhere else.
Generates a utility in app/scripts/utilities.
$ yo arcus-angular:utility alertAbove example produces app/scripts/utilities/AlertUtility.js.
angular.module('arcusApp').factory('AlertUtility', [
function () {
return {
};
}]);