首先需要在父级模版中引入 AngularJS 和 Angular Material.

<link rel="stylesheet" href="{{ asset('angular-material.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">

<script src="{{ asset('angular.js') }}"></script>
<script src="{{ asset('angular-aria.js') }}"></script>
<script src="{{ asset('angular-animate.js') }}"></script>
<script src="{{ asset('angular-material.js') }}"></script>

在js文件中,写入:

angular.module('myApp',['ngMaterial'])
    .config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
    .controller('myController',myController);

myController.$inject = ['$scope'];

function myController( $scope ) {

}

最后,在twig模版中写scope变量时,需要写成:

{[{ scopeVariable }]}

参考内容:

• http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces