Google's Angular Material

Installation

First, install Yeoman and generator-angular-material using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-angular-material

Then generate your new project:

yo angular-material appName

Run server

gulp serve

• all JavaScript is generated anonymous besides for the angular.module declaration.

Run dist server

gulp serve:dist

• compresses js / css / images
• all JavaScript is generated anonymous

Run test server

gulp serve:spec

Run tests

gulp spec

Create dist package

gulp dist:package

• compresses js / css / images
• all JavaScript is generated anonymous

Gulp tasks might require sudo depending on your permissions

For the below commands, if they create a new external dependency (new file), you will need to restart the server for changes to reflect properly.

Generate components:

yo angular-material:component

Each time you inject a component, you must specify {{componentName}} where you would like it to be injected in your partial. This generator is spefically designed for the 'public/partials' directory only.

• you can inject into multiple partials at the same time
• you can inject multiple components at the same time

Example:

• public/partials/about-partial.html

<div class="text-center md-padding">About Page</div>
<div class="some-container">
    {{autocomplete}}
    {{card}}
    {{card}}
    {{card}}
    {{fab-speed-dial}}
</div>

• public/partials/home-partial.html

<div class="text-center md-padding">Home Page</div>
<div class="some-container">
    {{dialog}}
    {{select}}
    {{card}}
    {{card}}
    {{menu}}
</div>

Some components will generate a partial-name-component-controller.js in a "public/js/controllers/components" directory.

Component list - must use exact name during injection

• autocomplete
• card
• checkbox
• chips
• content
• dialog
• fab-speed-dial
• fab-toolbar
• menu
• menu-bar
• nav-bar
• select
• sidenav
• slider
• tabs

Refer to https://material.angularjs.org/latest/ for how to use these components.

Generate a route:

yo angular-material:route routeName

This will create public/js/controllers/routename-controller.js and public/partials/routename-partial.html files.

Result:

• public/js/config/app.js

var appName = angular.module('appName', ['ngMaterial', 'ngAnimate', 'ngMessages', 'ngAria', 'ui.router']);

(function(app) {
    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/');

        $stateProvider.state('routename', {
            url: '/routename',
            templateUrl: 'partials/routename-partial.html',
            controller: 'routenameController'
        })

        .state('home', {
            url: '/',
            templateUrl: 'partials/home-partial.html',
            controller: 'HomeController'
        })

        .state('about', {
            url: '/about',
            templateUrl: 'partials/about-partial.html',
            controller: 'AboutController'
        });
    }]);
})(appName);

• public/js/controllers/routename-controller.js

(function(app) {
    app.controller('routenameController', ['$scope', function($scope) {
    
    }]);
})(appName);

• public/partials/routename-partial.html

<div ng-controller="routenameController">
    routename view
</div>

Generate a controller:

yo angular-material:controller controllerName

Adds extension -controller.js to filename and Controller to controllerName

Result: public/js/controllers/controllerName-controller.js

(function(app) {
    app.controller('controllerNameController', ['$scope', function($scope) {

    }]);
})(appName);

Generate a directive:

yo angular-material:directive directiveName

Adds extension -directive.js to filename and Directive to directiveName

Result: public/js/directives/directiveName-directive.js

(function(app) {
    app.directive('directiveNameDirective', ['', function() {
        return {
            link: function($scope, elem, attrs, controller) {

            }
        };
    }]);
})(appName);

Generate a verbose directive:

yo angular-material:verbose-directive verboseDirectiveName

Adds extension -directive.js to filename and Directive to directiveName

Result: public/js/directives/verboseDirectiveName-directive.js

(function(app) {
    app.directive('verboseDirectiveNameDirective', ['', function() {
        return {
            scope: {},
            controller: function($scope, $element, $attrs, $transclude) {},
            // require: 'ngModel',
            // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
            // template: '',
            // templateUrl: '',
            // replace: true,
            // transclude: true,
            link: function($scope, elem, attrs, controller) {}
        };
    }]);
})(appName);

Generate a factory:

yo angular-material:factory factoryName

Adds extension -factory.js to filename and Factory to factoryName

Result: public/js/factories/factoryName-factory.js

(function(app) {
    app.factory('factoryNameFactory', ['', function() {
        return {};
    }]);
})(appName);

Generate a service:

yo angular-material:service serviceName 

Adds extension -service.js to filename and Service to serviceName

Result: public/js/services/serviceName-service.js

(function(app) {
    app.service('serviceNameService', ['', function() {

    }]);
})(appName);

Generate a filter:

yo angular-material:filter filterName

Adds extension -filter.js to filename and Filter to filterName

Result: public/js/filters/filterName-filter.js

(function(app) {
    app.filter('filterNameFilter', function() {
        return function(input) {
            return 'filterNameFilter filter:' + input;
        };
    });
})(appName);

All JavaScript/CSS dependencies will be automatically injected into your dev/dist "index.html" in proper order when running the browsersync server.

All bower components come first. Use bower when installing any new modules and you won't have any issues. Just be sure to inject them in your app module!

Besides for editing the main "index.html" file in the "dev" directory, most edits should be contained within the "public", "scss", and "spec" directories.

@TODO

• update to count for Windows directories
• make tmp directory to trigger server restarts

License

MIT © Google