search

cesine / todomvc-for-chrome-extensions

Chrome Extension Tested - MV* Todo apps for Backbone.js, JavaScriptMVC, Ember.js, Dojo, Spine.js, YUILibrary, Knockout.js and more
http://addyosmani.github.com/todomvc
Other
11 stars 1 forks source link

Test Angular.js in Chrome Extension #4

Closed cesine closed 12 years ago

cesine commented 12 years ago

Status: works

Added an external css file and now the {{variableNames}} are not visible

[ng-cloak] {
    display: none
}

Added a directive in the html tag to turn off eval

<html lang="en" ng-app="todomvc" ng-csp="">
cesine commented 12 years ago

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". index.html:8 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". index.html:66 Error: Code generation from strings disallowed for this context at Function () at Kb (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:74:389) at j (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:63:84) at Kc (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:64:284) at Mc (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:69:417) at chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:75:102 at d (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:51:415) at H (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:47:375) at Y (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:39:390) at v (chrome-extension://hplgepgcigmfknamgmledbdbfpalimjp/architecture-examples/angularjs/js/libs/angular/angular.min.js:38:295) angular.min.js:60

cesine commented 12 years ago

Angular uses in-line style, does it need it?

angular.element(document).find("head").append('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{display:none;}ng\\:form{display:block;}</style>');
cesine commented 12 years ago

Angular has eval, does it need it?

Line 1883 in angular.min:

e = Function("s", "k", g);
cesine commented 12 years ago

the answer is actually that you can use eval for 30% faster loads, or you can turn it off using a ng-csp directive https://github.com/angular/angular.js/wiki/Using-AngularJS-in-a-Chrome-Extension-environment

so, angular can work out of the box in a chrome extension.