Update AngularJS template HTML after running Google Closure Compiler on app code

Question

My application assigns variables to the $scope in a controller, like $scope.myVariable = 123; After I run Closure Compiler, that code gets turned into $scope.a = 123; and $scope.b = 123; and so on...

My html templates have things like <p>{{ myVariable }}</p> I need to update the templates to <p>{{ a }}</p> to match the new name of the renamed property myVariable.

I know that I can use the CC /** @expose */ annotation, or I can do something like $scope['myVariable'] = 123 so that CC does not rename that specific property. However, I would like to keep renaming the variable properties.

I have 2 options that I see:

1. Write a script that uses the _props_map.out from the CC, and write a script that sear-replaces the strings in my HTML.

2. Write my templates in javascript, so that CC will also process my templates, and then run the template function which spits out html of a template.

What would be the best way to keep renaming my variables and update the template html?

Answer 1

I believe the best way is not to rename the variables. I'm not sure what exactly you are trying to achieve but generally speaking, changing variables in templates does not make sense.

You can have <p>{{ a }}</p> in your template from the very start; {{ a }} won't print anything out until a is defined and has some value.

Another option is to create $scope.variables object that will contain your new variables such as

{ a: 123, b: 123 }

and you can use them in your template with <p>{{ variables.a }}</p>.

Would any of these options work for you?