-
0.2.3
-
0.2.2
- Replace module name input with list of available modules
- With any of the sub-generators, the prompt which used to ask the user which module the file should be generated under, all available modules are listed for user to pick from
- eg
yo angularjs-cordova:angular-filter foowill now produce the following prompt:
[?] Which module does this filter belongs to? (Use arrow keys) > core test1 test2 test3 - eg
-
0.2.1
- Updated README
- Development folder is now
app/in the root folder. The source files are copied towww/with grunt tasks - Remove option to use the cordova template app
angular-testsub-generator prompts to generate test template for unit (targeting controller, service, directive or filter) or end-to-end test- Add grunt tasks to perform build tasks which copies only required source to
www/for build - Add grunt tasks
grunt serveserves the development app on port 9000grunt buildperforms build related tasks and moves required source towww/grunt karmaruns karma testsprotractor protractor-desktop-config.jsruns protractor e2e tests- Requires webdriver to be started, app running
- Requires app to be running on
http://127.0.0.1:9000/
- Pre-configured protractor config and working e2e example of default app
-
0.1.4
- Upgrade to cordova 3.5
- Better dependency declarations.
- More tests
- Refined documentation/ README
-
0.0.2
- Fixes travis file to include bower required for passing tests
-
0.0.1
- Minimal Viable Product which works as expected
npm install -g generator-angularjs-cordova
A yeoman generator which combines the best features and practices for cordova based mobile app development extended from the already available yeoman generators such as angular generator angular-cordova. The project scaffolds an AngularJs application as described and implemented with MEAN stack. This generator is ideal for projects where a tool is required to generate and scaffold a project based on angular and cordova. If you like pre-defined templates such as ionic, there are dedicated generators which do the job.
-
Cordova - for packaging your HTML, CSS and Javascript into deployable mobile apps. This generator currently has not been tested for its compatibility with phonegap. It might be added in the future.
-
AngularJS - One of the most popular Javascript MVC/MV** frameworks that is available out there
-
AngularUI - Includes Twitter bootstrap 3 and allows for developing responsive pages. It ships with various pre-defined templates.
- Uses the Vertical Module approach for initializing and extending the angularjs application. The project structure suggested by the Angular team with the angular-seed works well but can get quite difficult to maintain and extend as the project grows. The vertical approach when used along the generator removes the hassle involved in manually including and injecting new services, defining routes and binding the views. It also allows for developers to work on individual modules which can then be combined seamlessly into the project.
Before you begin make sure you have the yo scaffolding tool installed(As it is part of the Yeoman tool set you might have installed it before). To globally install yo you will need to use npm:
Note: Your user might not have the permissions to install package globally, so use a super user or sudo.
$ npm install -g yo
Once ready, you should be able to use this with
npm install -g generator-angularjs-cordova
Create and navigate into a new directory and run the yo command to initialize a new project
mkdir testapp && cd testapp
yo angularjs-cordova
This presents you with a series of options to initialize and customize your application
Once this is done, run
grunt serve
to run the app on your browser
Use
grunt build
which performs various build related tasks and copies it on to the www/ folder where you can use the cordova commands to build/ deploy the app to emulator/ devices
- concatenating all vendor files into a single file and all user code into a single file. This makes the distribution source cleaner.
- Note: All user generated files are automatically injected into the index.html file, so the user doesn't have to manually include them
- You can further customize the build tasks by suitably editing the Gruntfile
###Tests (New)
To run the e2e protractor tests which come shipped with the sample app, run
webdriver-manager update
webdriver-manager start ###this should start the webdriver
grunt serve ###this will serve your app on http://127.0.0.1:9000/
protractor protractor-desktop-config.js ###this will run the protractor tests
Once setup, you can use any of the following sub-generators for extending your AngularJs application
- angularjs-cordova
- angularjs-cordova:angular-config
- angularjs-cordova:angular-controller
- angularjs-cordova:angular-directive
- angularjs-cordova:angular-filter
- angularjs-cordova:angular-module
- angularjs-cordova:angular-route
- angularjs-cordova:angular-service
- angularjs-cordova:angular-test
- angularjs-cordova:angular-view
The generators does not provide sub-generators for the cordova side of the application. This is with the intention that the onus of using cordova commands should be on the developer as this can make for remembering the command list an overhead.
All the available cordova commands can be listed by typing the following in the command line:
cordova help
As per cordova v3.5.0-0.2.4, these are the available options
Synopsis
cordova command [options]
Global Commands
create <PATH> [ID [NAME [CONFIG]]] ....... creates a Cordova project in the specified PATH, with
ID reverse-domain-style package name - used in <widget id>
NAME is a human readable field
CONFIG is a json string whose key/values will be included
in [PATH]/.cordova/config.json
[--copy-from|src=<PATH>] ... use custom www assets instead of the stock Cordova hello-world.
[--link-to=<PATH>] ......... symlink to custom www assets without creating a copy.
help ..................................... shows this syntax summary
info ..................................... print out useful information helpful for submitting bug
reports and getting help. Creates an info.txt file at the
base of your project
Project-Level Commands
platform(s) [{add|remove|rm} <PLATFORM>] .. add or remove a specified PLATFORM, OR
[{list|ls}] ................... list all installed and available platforms
[{update|up} <PLATFORM>] ...... update the version of Cordova used for a specific
PLATFORM; use after updating the CLI.
[check] ....................... list platforms which can be updated by `platform update`
plugin add <SPEC1> [<SPEC2> ...] .......... SPEC can be a plugin ID, a local path, or a git URL.
[--searchpath <directory>] ..... When looking up plugins by ID, look in this directory and
each of its subdirectories for the plugin before hitting the registry.
Multiple search paths can be used by either specifying the flag multiple
times, or by separating paths with a delimiter (: on 'nix, ; on Windows).
plugin(s) rm <plugin_id1> [<plugin_id2>] .. remove a plugin with the given IDs.
[{ls|list}] ..................... list all currently installed plugins
[search <keyword1 keyword2...>] . search the plugin registry for plugins matching the keywords
prepare [PLATFORM..] ...................... copies files for specified platforms, or all platforms,
so that the project is ready to build in each SDK
compile [PLATFORM..] ...................... builds the app for specified platforms, or all platforms
build [PLATFORM...] ....................... shortcut for prepare, then compile
run [--debug|--release]
[--device|--emulator|--target=FOO]
[PLATFORM] ............................ deploys app on specified platform devices / emulators
emulate [PLATFORM...] ..................... alias for "run --emulator"
serve [PORT] .............................. runs a local web server for www/ assets. Port defaults to 8000.
Access projects at: http://HOST_IP:PORT/PLATFORM/www
Command-line Flags/Options
-v, --version ............................. prints out this utility's version
-d, --verbose ............................. debug mode produces verbose log output for all activity,
including output of sub-commands cordova invokes
The application generator will help you create a fresh copy of a AngularJs application in your working Cordova folder(app/).
$ yo angularjs-cordova
The generator will ask you a few questions about your new application and will generate it for you.
Now, the application generator does a great job scaffolding a whole application, but daily work requires us to repeat a lot of structured code. For this purpose we provided you with some sub-generators to help you speed up your development.
Another redundant task is creating a new AngularJS module structure. For this purpose you can use the Angular module sub-generator. It will create the proper folder structure for you and the module initialization file. Creating a new AngularJS module is simple:
$ yo angularjs-cordova:angular-module <module-name>
The sub-generator will ask for more information about your folder structure, and will create the empty new AngularJS module. Now, to fill that new module with your business logic, we provided you with several AngularJS entities sub-generators.
To construct your module you will often need to create a new route. The AngularJS route sub-generator will help you create a view, controller and a proper route in your module routes.js file. If it can't find the module routes file the sub-generator will create one for you. Creating a new AngularJS route will involve executing this command:
$ yo angularjs-cordova:angular-route <route-name>
The sub-generator will ask for more information about your controller, view and routing URL, and will generate the appropriate files for you.
The AngularJS Controller sub-generator will create a new AngularJS controller in the specified module's controllers folder. To create a new AngularJS controller run yo again by using this command:
$ yo angularjs-cordova:angular-controller <controller-name>
The sub-generator will ask you for the module name under which you would like to create your new controller, and will create a new AngularJS controller file in that module controllers folder and a test file in the tests folder.
Don't forget! This time you pass the controller name as an argument.
Once you have your controller file ready, you may want to add a view that makes use of this controller. The AngularJS view sub-generator will create a new AngularJS view in thr specified module's views folder, and will allow you to add a route definition for it. To create a new AngularJS view you will need to execute this command:
$ yo angularjs-cordova:angular-view <view-name>
The sub-generator will ask you for the module name under which you would like to create your new view, and some additional routing information. It will then create a new view file in that module's views folder and add a routing state to the module routes.js file. If it can't find the module routes file it will create one for you.
The AngularJS service sub-generator will create a new AngularJS service in the specified module's services folder. To create a new AngularJS service you will need to execute this command:
$ yo angularjs-cordova:angular-service <service-name>
The sub-generator will ask you for the module name and the type of service you would like to create. This will then create the chosen type of service under the selected module.
The AngularJS directive sub-generator will create a new AngularJS directive in the specified module's directives folder. Creating a new AngularJS directive should already look familiar:
$ yo angularjs-cordova:angular-directive <directive-name>
The sub-generator will ask you for the module name under which you would like to create your new directive, and will create a new AngularJS directive file in that module's directives folder.
The AngularJS filter sub-generator will create a new AngularJS filter in a specified module's filters folder. To create a new AngularJS filter you need to call yo again:
$ yo angularjs-cordova:angular-filter <filter-name>
The sub-generator will ask you for the module name under which you would like to create your new filter, and will create a new AngularJS filter file in that module filters folder.
The AngularJS config sub-generator will create a new AngularJS config section in a specified module's config folder. To create a new AngularJS config file just call yo:
$ yo angularjs-cordova:angular-config <config-name>
The sub-generator will ask you for the module name under which you would like to create your new config, and will create a new AngularJS config file in that module's config folder.
The test generator generates unit and e2e test templates for you.
$ yo angularjs-cordova:angular-test <name>
This will prompt the user with the option to either create a unit test template or an e2e test template for the chosen module and file type.
MIT