• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

reflexdemon/slush-angular-gulp: First step towards integration of all the goodie ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

reflexdemon/slush-angular-gulp

开源软件地址(OpenSource Url):

https://github.com/reflexdemon/slush-angular-gulp

开源编程语言(OpenSource Language):

JavaScript 97.3%

开源软件介绍(OpenSource Introduction):

#slush-angular-gulp

Greenkeeper badge

##Badges

GitHub version

npm version

Dependency Status devDependency Status

Build Status

Coverage Status


A slush generator for AngularJS using the Google Angular App Structure Recommendations

Slush Angular Gulp

Introduction

All, would like to tell you slush-angular-gulp is build with inspiration from the below projects.

  1. slush-angular
  2. angular-styleguide
  3. Yomen generator-angular

Moreover, this is just a first step towards integration of all the goodies of the above mentioned projects and expect more on future releases.

Installation

Install slush-angular-gulp globally:

npm install -g slush-angular-gulp

You'll also need to have bower, slush and gulp installed globally for a smooth installation

npm install -g bower gulp slush

Bower dependency

Here is the list of dependencies that are pre selected.

  1. Angular 1.4
  2. Bootstrap

CSS Preprocessor

LESS, Stylus, and Sass to use as the CSS Preprocessor for your project.

Note All _*.styl, _*.less, or _*.scss files will be considered "partials" and must be imported in another stylesheet file (without a leading "_") to be compiled.

Project structure

You will also have the option to generate a simple Todo list app in your project as well, to be used as a live example of how to structure your app.

The project structure with the Todo list example included will look like this:

my-angular-app/
├── README.md
├── bower.json
├── gulpfile.js                             # See "Gulpfile" below
├── karma.conf.js
├── package.json
└── src
    └── app
        ├── app.js                          # Main app module and configuration
        ├── app.styl/less/scss              # Main app stylesheet
        ├── assets                          # A folder meant for images and such...
        │   └── slush-angular-gulp.png
        ├── components
        │   ├── heat
        │   │   ├── aheat.js
        │   │   ├── heat-controller.js
        │   │   ├── heat-route.js
        │   │   ├── service
        │   │   │   └── heat_service.js
        │   │   └── view
        │   │       └── heat.html
        │   └── todo
        │       ├── todo-controller.js          # The todo controller
        │       ├── todo-controller.spec.js     # Karma test for the todo controller
        │       ├── todo-route.js               # Todo module route configuration
        │       ├── todo.html                   # The todo list template
        │       ├── todo.js                     # The todo module
        │       └── todo.styl/less/scss         # Todo module specific styles
        ├── index.html                      # The index.html / app layout template
        └── styles
            └── _base.styl/less/scss        # A stylesheet partial with base styles

Link to Gulpfile

Generators

Available generators:

App

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).

Create a new folder for your project:

mkdir my-angular-app

Run the generator from within the new folder:

cd my-angular-app

slush angular-gulp

or

cd my-angular-app

slush angular-gulp:app

You will now be prompted to give your new AngularJS app a name, which will be dasherized and used in its bower.json and package.json respectively. The chosen name will be camelized and used as the main angular module as well, inside src/app/app.js.

Controller

Generates a controller in src/app/components/<module>.

Syntax:

slush angular-gulp:controller <ctrl-Name>

Example:

slush angular-gulp:controller login
[06:33:12] Starting 'angular-gulp:controller'...
? What is the name of your controller? login
? What is your AngularJS module name? user
? Do you want to include unit testing? Yes
[06:33:41] [conflict] Creating login-controller.js
[06:33:41] [conflict] Creating login-controller.spec.js
[06:33:41] Finished 'angular-gulp:controller' after 29 s
[slush] Scaffolding done

Produces src/app/user/login-controller.js:

(function() {
    'use strict';

    angular
        .module('myAngularApp.user')
        .controller('LoginCtrl', LoginCtrl);
    //////////////////////

    /**
     * @ngdoc function
     * @name myAngularApp.user.controller:LoginCtrl
     * @description
     * # LoginCtrl
     * Controller of the myAngularApp.user
     * @ngInject
     */
    function LoginCtrl() {
        this.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
    }

})();

and Produce src/app/user/login-controller.spec.js

'use strict';
/**
 * Simple test class for LoginCtrl on myAngularApp.user
 */
describe('Controller: LoginCtrl', function () {

  // load the controller's module
  beforeEach(module('myAngularApp.user'));

  var LoginCtrl;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    LoginCtrl = $controller('LoginCtrl', {
      // place here mocked dependencies
    });
  }));

  it('should attach a list of awesomeThings to the scope', function () {
    expect(LoginCtrl.awesomeThings.length).toBe(3);
  });
});

Module

Generates a module in src/app/components/<module>.

Syntax:

slush angular-gulp:module <module-Name>

Example:

slush angular-gulp:module user
[21:55:01] Starting 'angular-gulp:module'...
? What is the name of your module? user
? Which configuration files would you like to be seperate? config, routes
[21:55:36] [conflict] Creating user-module.js
[21:55:36] [conflict] Creating user-config.js
[21:55:36] [conflict] Creating user-routes.js
[21:55:36] Finished 'angular-gulp:module' after 36 s
[slush] Scaffolding done

Produces src/app/components/user/user-module.js:

/**
 * Creates and initilizes the module user
 */

(function() {
        'use strict';

        angular.module('myAngular.user', [], moduleConfiguration);

        /* @ngInject */
        function moduleConfiguration() {
            //TODO Have any module specific configurator here
        });
}

})();

or if configs were separated out Produces src/app/components/user/user-module.js:

/**
 * Creates and initilizes the module user
 */

(function() {
        'use strict';

        angular.module('myAngular.user', []);
}

})();

src/app/components/user/user-config.js:

/**
 * Configuration for the module user
 */

(function() {
    'use strict';


    angular
        .module('myAngular.user')
        .config(config);

    /* @ngInject */
    function config(){
        // Configurations
    }

})();

src/app/components/user/user-routes.js:

/**
 * Sets routes for the module user
 */

(function() {
    'use strict';


    angular
        .module('myAngular.user')
        .run(appRun);

    /* @ngInject */
    function appRun(){
        // Routing
    }

})();

Directive

Generates a directive in src/app/components/<module>.

Syntax:

slush angular-gulp:directive <directive-Name>

Example:

slush angular-gulp:directive awesome-thing
[06:37:03] Starting 'angular-gulp:directive'...
? What is the name of your directive? awesome-thing
? What is your AngularJS module name? user
[06:37:07] [conflict] Creating awesome-thing-directive.js
[06:37:07] Finished 'angular-gulp:directive' after 4.57 s
[slush] Scaffolding done

Produces src/app/component/user/awesome-thing-directive.js:

/**
 * @desc Please provide useful information regarding the directive with a proper example
 * @example <div awesome-thing></div>
 */
(function() {
    angular
        .module('myAngularApp.user')
        .directive('awesomeThing', awesomeThing );

    function awesomeThing () {
        /* implementation details */
    }

})();

Filter

Generates a filter in src/app/components/<module>.

Syntax:

slush angular-gulp:filter <filter-Name>

Example:

slush angular-gulp:filter checkmark
[06:39:02] Starting 'angular-gulp:filter'...
? What is the name of your filter? checkmark
? What is your AngularJS module name? user
? Do you want to include unit testing? Yes
[06:39:11] [conflict] Creating checkmark-filter.js
[06:39:11] [conflict] Creating checkmark-filter.spec.js
[06:39:11] Finished 'angular-gulp:filter' after 9.3 s
[slush] Scaffolding done

Produces src/app/component/user/checkmark-filter.js:

(function() {
    'use strict';

    angular
        .module('myAngularApp.user').filter('checkmark', checkmarkFilter);
    ////////////////////

    function checkmark() {
        return function (input) {
            return input ? '\u2713' : '\u2718';
    };
}
})();

and

Produces src/app/component/user/checkmark-filter.spec.js:

'use strict';

describe('filter', function() {

  beforeEach(module('myAngularApp.user'));

  describe('checkmark', function() {

    it('should convert boolean values to unicode checkmark or cross',
        inject(function(checkmarkFilter) {
      expect(checkmarkFilter(true)).toBe('\u2713');
      expect(checkmarkFilter(false)).toBe('\u2718');
    }));
  });
});

Route

Generates a route in src/app/components/<module>.

Syntax:

slush angular-gulp:route <route-Name>

Example:

slush angular-gulp:route user
[06:41:04] Starting 'angular-gulp:route'...
? What is the name of your route? user
? What is your AngularJS module name? user
[06:41:07] [conflict] Creating user-route.js
[06:41:07] Finished 'angular-gulp:route' after 2.96 s
[slush] Scaffolding done

Produces src/app/component/user/user-route.js:

(function() {
    'use strict';

    angular
        .module('myAngularApp.user')
        .config( userRoute);


    /* @ngInject */
    function userRoute($routeProvider) {
        $routeProvider
            .when('/user', { //Default
                controller: 'UserCtrl',
                templateUrl: 'user/user.html'
            });

    }

})();

Service

Generates a service in src/app/components/<module>.

Syntax:

slush angular-gulp:service <service-Name>

Example:

slush angular-gulp:service session
[06:43:42] Starting 'angular-gulp:service'...
? What is the name of your service? session
? What is your AngularJS module name? user
[06:43:48] [conflict] Creating session-service.js
[06:43:48] Finished 'angular-gulp:service' after 5.58 s
[slush] Scaffolding done

Produces src/app/user/session-service.js:

(function() {
    'use strict';

    angular
        .module('myAngularApp.user')
        .service('sessionService',  sessionService);


    /* @ngInject */
    function sessionService() {
        var someValue = '';
        var service = {
            save: save,
            someValue: someValue,
            validate: validate
        };
        return service;

        ////////////

        function save() {
            /* */
        }

        function validate() {
            /* */
        }
    }

})();

Factory

Generates a factory in src/app/components/<module>.

Syntax:

slush angular-gulp:factory <factory-Name>

Example:

slush angular-gulp:factory session
[06:46:32] Starting 'angular-gulp:factory'...
? What is the name of your factory? session
? What is your AngularJS module name? user
[06:46:38] [conflict] Creating session-factory.js
[06:46:38] Finished 'angular-gulp:factory' after 6.07 s
[slush] Scaffolding done

Produces src/app/home/session-factory.js:

(function() {
    'use strict';

    angular
        .module('myAngularApp.user')
        .factory('sessionFactory',  sessionFactory);


    /* @ngInject */
    function sessionFactory() {
        var someValue = '';
        var factory = {
            save: save,
            someValue: someValue,
            validate: validate
        };
        return factory;

        ////////////

        function save() {
            /* */
        };

        function validate() {
            /* */
        };
    }

})();

Provider

Generates a provider in src/app/components/<module>.

Syntax:

slush angular-gulp:provider <provider-Name>

Example:

slush angular-gulp:provider game
[14:16:32] Starting 'angular-gulp:provider'...
? What is the name of your provider? game
? What is your AngularJS module name? user
[14:16:47] [conflict] Creating game-provider.js
[14:16:48] Finished 'angular-gulp:provider' after 16 s
[slush] Scaffolding done

Produces src/app/home/game-provider.js:

(function() {
    'use strict';

angular
  .module('myAngular.user')
        .provider('game',  gameProvider);

    /* @ngInject */
    function gameProvider() {
        var someValue = '';
        var provider = {
            save: save,
            someValue: someValue,
            validate: validate
        };
        return provider;

        ////////////

        function save() {
            /* */
        }

        function validate() {
            /* */
        }
    }
})();

Constant

Generates a constant in src/app/components/<module>.

Syntax:

slush angular-gulp:constant <constant-Name>

Example:

slush angular-gulp:constant apiKey
 
                       
                    
                    

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap