- ui-grud
- angular-material
- bootstrap 3.2.0
- AngularJS-OAuth2
- angular-tree-control
- assets oas
- pdf-make
- ngstorage
- kjur-jsrsasign
- angular-websocket
- angular-input-masks
- angular-moment
- angular-translate
- sweetalert2
Agregamos repo Epel
sudo yum install epel-release
Instalamos npm
sudo yum install npm
Comprobar instalación version de nodejs superior a 6.9
node --version
Si se requiere configurar proxy en npm
sudo npm config set proxy http://127.0.0.1:8080/
sudo npm config set https-proxy http://127.0.0.1:8080/
y finalmente, instalamos con npm
sudo npm install -g grunt-cli bower yo generator-karma generator-oas
Para construir una aplicación con generator-oas es necesario crear el directorio, (la aplicación tomará el nombre de la carpeta donde se aloje) para crear el proyecto mi_proyecto ejecutar
mkdir mi_proyecto && cd $_
y luego
yo oas
Aparecerá en la consola lo siguiente
╔══════════════════════════════════════════════════════════╗
║ ║
║ ██████╗ █████╗ ███████╗ ║
║ ██╔═══██╗ ██╔══██╗ ██╔════╝ ║
║ ██║ ██║ ███████║ ███████╗ ║
║ ██║ ██║ ██╔══██║ ╚════██║ ║
║ ╚██████╔╝ ██║ ██║ ███████║ ║
║ ╚═════╝ ╚═╝ ╚═╝ ╚══════╝ ║
║ Welcome to generator-oas ║
║ ║
╚══════════════════════════════════════════════════════════╝
? Would you like to use Gulp (experimental) instead of Grunt? (y/N)
Welcome to the generator system
? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? Yes
Se recomienda dejar los componentes de angular predefinidos (Enter) Si en un momento llega a quedarse a la espera de algo, solo espera un (Enter)
Finalmente para correr el proyecto en localhost:9000
grunt serve
Para construir carpeta dist con el proyecto minificado y listo para ser llevado a un entorno de pruebas o producción ejecute
grunt build
Cuando clonamos un proyecto que ha sido creado con generator-oas, las carpetas node_modules y bower_components no estarán disponibles en el proyecto puesto que hacen parte del gitignore, para nuevamente tener estos directorios ejecute
npm install
bower install
Install yo
, grunt-cli
, bower
, generator-oas
and generator-karma
:
npm install -g grunt-cli bower yo generator-karma generator-oas
Available generators:
- oas (aka oas:app)
- oas:controller
- oas:directive
- oas:filter
- oas:route
- oas:service
- oas:provider
- oas:factory
- oas:value
- oas:constant
- oas:decorator
- oas:view
Sets up a new oasJS app, generating all the boilerplate you need to get started. The app generator also optionally installs Bootstrap and additional oasJS modules, such as oas-resource (installed by default).
Example:
yo oas
Generates a controller and view, and configures a route in app/scripts/app.js
connecting them.
Example:
yo oas:route myroute
Produces app/scripts/controllers/myroute.js
:
oas.module('myMod').controller('MyrouteCtrl', function ($scope) {
// ...
});
Produces app/views/myroute.html
:
<div class="panel panel-default">
<div class="panel-heading">
nombre de la vista
</div>
<div class="panel-body">
<p>
Ahora puede empezar a construir la vista de nombre de la vista.
</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
Explicitly provide route URI
Example:
yo oas:route myRoute --uri=my/route
Produces controller and view as above and adds a route to app/scripts/app.js
with URI my/route
Generates a controller in app/scripts/controllers
.
Example:
yo oas:controller user
Produces app/scripts/controllers/user.js
:
oas.module('myMod').controller('UserCtrl', function ($scope) {
// ...
});
Generates a directive in app/scripts/directives
.
Example:
yo oas:directive myDirective
Produces app/scripts/directives/myDirective.js
:
oas.module('myMod').directive('myDirective', function () {
return {
template: '<div></div>',
restrict: 'E',
link: function postLink(scope, element, attrs) {
element.text('this is the myDirective directive');
}
};
});
Generates a filter in app/scripts/filters
.
Example:
yo oas:filter myFilter
Produces app/scripts/filters/myFilter.js
:
oas.module('myMod').filter('myFilter', function () {
return function (input) {
return 'myFilter filter:' + input;
};
});
Generates an HTML view file in app/views
.
Example:
yo oas:view user
Produces app/views/user.html
:
<p>This is the user view</p>
Generates an oasJS service.
Example:
yo oas:service myService
Produces app/scripts/services/myService.js
:
oas.module('myMod').service('myService', function () {
// ...
});
You can also do yo oas:factory
, yo oas:provider
, yo oas:value
, and yo oas:constant
for other types of services.
Generates an oasJS service decorator.
Example:
yo oas:decorator serviceName
Produces app/scripts/decorators/serviceNameDecorator.js
:
oas.module('myMod').config(function ($provide) {
$provide.decorator('serviceName', function ($delegate) {
// ...
return $delegate;
});
});
In general, these options can be applied to any generator, though they only affect generators that produce scripts.
For generators that output scripts, the --coffee
option will output CoffeeScript instead of JavaScript, and --typescript
will output TypeScript instead of JavaScript.
For example:
yo oas:controller user --coffee
Produces app/scripts/controller/user.coffee
:
oas.module('myMod')
.controller 'UserCtrl', ($scope) ->
For example:
yo oas:controller user --typescript
Produces app/scripts/controller/user.ts
:
/// <reference path="../app.ts" />
'use strict';
module demoApp {
export interface IUserScope extends ng.IScope {
awesomeThings: any[];
}
export class UserCtrl {
constructor (private $scope:IUserScope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'oasJS',
'Karma'
];
}
}
}
oas.module('demoApp')
.controller('UserCtrl', demoApp.UserCtrl);
tl;dr: You don't need to write annotated code as the build step will handle it for you.
By default, generators produce unannotated code. Without annotations, oasJS's DI system will break when minified. Typically, these annotations that make minification safe are added automatically at build-time, after application files are concatenated, but before they are minified. The annotations are important because minified code will rename variables, making it impossible for oasJS to infer module names based solely on function parameters.
The recommended build process uses ng-annotate
, a tool that automatically adds these annotations. However, if you'd rather not use it, you have to add these annotations manually yourself. Why would you do that though? If you find a bug
in the annotated code, please file an issue at ng-annotate.
By default, new scripts are added to the index.html file. However, this may not always be suitable. Some use cases:
- Manually added to the file
- Auto-added by a 3rd party plugin
- Using this generator as a subgenerator
To skip adding them to the index, pass in the skip-add argument:
yo oas:service serviceName --skip-add
The following packages are always installed by the app generator:
- oas
- oas-mocks
The following additional modules are available as components on bower, and installable via bower install
:
- angular-animate
- angular-aria
- angular-cookies
- angular-messages
- angular-resource
- angular-sanitize
All of these can be updated with bower update
as new versions of AngularJS are released.
json3
and es5-shim
have been removed as Angular 1.3 has dropped IE8 support and that is the last version that needed these shims. If you still require these, you can include them with: bower install --save json3 es5-shim
. wiredep
should add them to your index.html file but if not you can manually add them.
Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.
You can change the app
directory by adding an appPath
property to bower.json
. For instance, if you wanted to easily integrate with Express.js, you could add the following:
{
"name": "yo-test",
"version": "0.0.0",
...
"appPath": "public"
}
This will cause Yeoman-generated client-side files to be placed in public
.
Note that you can also achieve the same results by adding an --appPath
option when starting generator:
yo angular [app-name] --appPath=public
Running grunt test
will run the unit tests with karma.
See the contributing docs
When submitting an issue, please follow the guidelines. Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.
When submitting a PR, make sure that the commit messages match the AngularJS conventions.
When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
When submitting a new feature, add tests that cover the feature.
Recent changes can be viewed on Github on the Releases Page
Love Yeoman work and community? Help us keep it alive by donating funds to cover project expenses!
[Become a sponsor]