angular-material config

[thaiat]

"hammerjs": {
            "exports": "global:Hammer"
        },
        "angular-animate": {
            "depends": [
                "hammerjs:Hammer"
            ]
        },
        "angular-material": {
            "depends": [
                "angular",
                "angular-animate",
                "angular-aria",
                "angular-ui-router"
            ]
        }

        "angular-animate": {
            "depends": [
                "hammerjs:Hammer"
            ]
        },
        "angular-material": {
            "depends": [
                "angular",
                "angular-animate",
                "angular-aria",
                "angular-ui-router"
            ]
        }

[ackushiw]

Hi Thaiat,

I've just started trying out your generator, and it looks great. I wanted to add angular-material via bower and I followed the steps you laid out in the readme for adding a third party bower package.

Do I need to manually inject it into the main.js or will gulp to that for me? I've been using grunt for my past development, but have wanted to try gulp for a little while, this seems like the perfect opportunity. Thanks!

[thaiat]

hi @ackushiw, you can take a look at that article : http://blog.aminjam.com/building-mobile-apps-with-famous-and-angular-material/
it uses the generator to include material design

In addition to the browserify configuration in package.json, you have also to modify to gulp constants to include the material css and theme as in here : https://github.com/aminjam/famous-md-demo/blob/master/gulp_tasks/common/constants.js#L58

now to use angular-material in a sub module, you have to require it

require('angular-material');

(same name you gave in the browserify configuration of package.json)
and add the module as a dependency of you sub module

Let me know if it worked

[ackushiw]

Got it working!, Thanks for sharing the article, between this enhancement issue and the article I got everything linked up.

Awesome work, I definitely like what you've got going here!

[thaiat]

thks, spread the word!!!

[thaiat]

seems like only the simple following configuration is now necessary:

"browser" : {
  "angular-sanitize": "./bower_components/angular-sanitize/angular-sanitize.js",
    "angular-material": "./bower_components/angular-material/angular-material.js",
    "angular-aria": "./bower_components/angular-aria/angular-aria.js",
},

"angular-material": {
      "depends": [
        "angular",
        "angular-aria",
        "angular-animate"
      ]
    }

don't forget also to add the necessary layout="column" + flex from the body to the ui-view top element.

[ackushiw]

Seams like there is a conflict between angular-material and ionic. Mainly with touch events on mobile browsers, but also when emulating mobile devices.

here is a link: angular/material#1826

[thaiat]

the trick, if you want to use both material and ionic is to only reference the css of ionic