div#home(data-ng-controller='HomeController') div.row div.col-3 span.icon.icon-scale :markdown ## Code that scales Radian is the perfect set up for projects that need to scale fast. The AMD structure allows single developers to large teams to quickly and efficiently write and deploy great apps. div.col-3 span.icon.icon-setup :markdown ## Rapid set up Radian comes with everything out the box, that means there's all the minification and concatination tasks as well as a local server and even a [PhantomJS](http://phantomjs.org) web crawler to deal with SEO woes. div.col-3 span.icon.icon-lightweight :markdown ## Light weight Radian is a way of doing things, so there's nothing new to install and no additional dependancies to [AngularJS](http://angularjs.org) and [RequireJS](http://requirejs.org). div.row div.col-3 span.icon.icon-tests :markdown ## 100% code coverage Testing is at the heart of Radian, so out the box it comes complete with all the unit tests you could want, [here's the proof](https://travis-ci.org/ahmednuaman/radian). div.col-3 span.icon.icon-yeoman :markdown ## Generate with Yeoman Radian is better with [Yeoman](http://yeoman.io), use it to set up your project and use the subgenerators to quickly create your app's code, with tests included. div.col-3 span.icon.icon-customise :markdown ## Your app, your way Radian is highly customisable; from the offset you can start with the barebones app or reverse engineer the example code. div.row :markdown ## Quick start The purpose of Radian is to help your team and you start building your app with minimal set up. There are two ways to create a Radian project: using [Yeoman](http://yeoman.io) or by cloning the [Radian project](https://github.com/ahmednuaman/radian) on GitHub. div.row :markdown ### Dependencies There are a few dependencies to install before we can get started: - [GruntJS](http://gruntjs.com) - [Bower](http://bower.io) Install these by running: npm install -g grunt-cli bower If you want to use Yeoman to generate your app, you'll need to install it and the Radian generator: npm install -g yo generator-radian If you want to write your app in [CoffeeScript](http://coffeescript.org/), you'll need to install that as well; just follow the instructions on the website. div.row :markdown ### Radian using Yeoman Once you have Yeoman and the Radian generator installed, you can set up your Radian project simply by running: yo radian Radian gives you the option of how you want to code your app. By default it will use CoffeeScript, SASS and Jade; however as you run the set up via Yeoman it will give you the options of which CSS preprocessors you want to use, if any, from the following list: - [SASS](http://sass-lang.com/) - [SCSS](http://sass-lang.com/) - [Less](http://lesscss.org/) - [Stylus](http://learnboost.github.io/stylus/) You can also choose not to use any preprocessors and instead just use vanilla JS, CSS and HTML. All the fun! You can then make use of the built in subgenerators to create your project files, you have the choice of two types of generators, you use them by running: yo radian:TYPE 'NAME' - **TYPE**: is the generator you're wanting to use and... - **NAME**: is the file/class/module name; this will be automatically slugified/camelized/classified for you, so it's better to write something like 'foo bar', rather than 'fooBar'. ### Generating CoffeeScript files This generator will create a **TYPE**, say controller, in `assets/coffee/TYPE` and create a test spec in `test/unit/TYPE`; where **TYPE** is one of the following: - controller - service - factory - filter - directive - collection - vo Eg running: yo radian:controller 'foo bar' Creates `assets/coffee/controller/foo-bar-controller.coffee` containing: define [ 'controller/radian-controller' ], (RC) -> class extends RC @register 'FooBarController', [ '$scope' ] init: () -> And `test/unit/controller/foo-bar-controller-spec.coffee` containing: define [ 'config' 'angular' 'controller/foo-bar-controller' ], (cfg, A) -> describe 'Foo Bar controller', () -> $scope = null createController = null beforeEach module cfg.ngApp beforeEach inject ($injector) -> $controller = $injector.get '$controller' $rootScope = $injector.get '$rootScope' $scope = $rootScope.$new() createController = () -> $controller 'fooBarController', $scope: $scope it 'should load', () -> controller = createController() Note that you can also use the generator to create vanilla JavaScript files. It's all down to the config options you choose when you create your project using Yeoman. ### Generating partials This generator creates a partial and an accompanying style partial (note that the types of partial will depend on your Yeoman set up options, e.g. if you chose to use Jade and SASS, then a Jade partial with a SASS style partial would be created), e.g. running: yo radian:partial 'my new view' Creates `assets/css/partial/_my-new-view.sass` and `assets/partial/my-new-view-partial.jade`, and finally updates `assets/css/_partials.sass` to include the newly created SASS file. ### Radian without using Yeoman All you need to have installed is [git](http://git-scm.org) and the dependencies listed above. To start using Radian simply download the code from [github.com](https://github.com/ahmednuaman/radian) and set it up: npm install grunt install grunt div.row :markdown ### And then... Running `grunt` will generate all the JS, CSS and HTML, and it'll also start the local server, so point your browser to [http://localhost:8000](http://localhost:8000) and you're laughing. div.row :markdown ### Testing To test your new application, you need to make sure some test dependencies are installed globally so they are available on your $PATH: npm install -g protractor karma webdriver-manager update This will install Protractor, Angular's end-to-end testing framework, Karma, a Javascript test runner, and the latest [Selenium](http://docs.seleniumhq.org/) standalone server and Chromedriver. You will then be able to execute all tests – unit, integration and end-to-end – by running: grunt test