angularjs - Use Angular Material in only a portion of a page

Solution:

You can create separate Angular module for you required template file and Inject angular material there. Link angular-material CSS in that template file only. This way It won't affect other pages.

Solution:

The only way i think you can do this is by using an iframe because the css will always combine, and will follow the rule of cascade so the one that is below will override the others.

Solution:

You can use angular-ui-router states with seperate angular modules. So you can inject angular-material one of the state of your routes then use it.

     module.exports =
      angular.module('parentModule', [
        'angularMoment',
        require("./childFolder"),

      ])
   .config(function ($stateProvider) {
    $stateProvider
    .state('parent', {
      url:"parent/",
      views:{
        '': {
          templateUrl: 'main/layout.html',
          controller: 'MainController'
        }
      }
    })
 .controller('MainController', require('./mainController'));
Copy code

    module.exports =
      angular.module('childModule', [
        'ngMateiral', 'ngMessages'
      ])
.config(function ($stateProvider) {
      $stateProvider
        .state('parent.child', {
          url: "parent/:id",
          views: {
            '': {
              templateUrl: 'main/layout.html',
              controller: 'MainController'
            },
            'content@main': {
              templateUrl: 'main/child/layout.html'
              controller: 'ChildController'
            }
          }
        });
    })
     .controller('ChildController', require('./childController'));
Copy code