Page 424 - AngularJS权威教程
P. 424
404 第 31 章 构建 Angular Chrome 应用
{
"manifest_version": 2,
"name": "Presently",
"description": "A currently clone",
"version": "0.1",
"permissions": ["http://api.wunderground.com/api/"],
"background": {
"scripts": ["js/vendor/angular.min.js"]
},
"content_security_policy": "script-src 'self'; object-src 'self'",
"chrome_url_overrides": {
"newtab": "tab.html"
}
}
manifest.json中的键相对而言比较简单，并且它允许设置名称、manifest版本和应用版本，等
等。为了让Chrome将应用作为newtab应用启动，在这里设置这个应用覆盖所有新标签页。
31.5 tab.html
这个应用程序的主HTML文件就是tab.html文件。当我们在Chrome打开一个新标签页时就会
加载这个文件。
我们将在这个tab.html文件内建立这个基本的Angular应用：
<!doctype html>
<html data-ng-app="myApp" data-ng-csp="">
<head>
<meta charset="UTF-8">
<title>Presently</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
</div>
<script src="./js/vendor/angular.min.js"></script>
<script src="./js/vendor/angular-route.min.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
这是Angular应用程序非常基本的结构，看起来几乎与任何Angular应用相同，除了
data-ng-csp=""之外。
这个ngCsp会启用内容安全策略（Content Security Policy，CSP）来支持我们的应用。由于
Chrome应用会阻止浏览器使用eval或者function(string)生成的函数，而Angular要使用
function(string)生成的函数来加速，ngCsp可以让Angular能够计算所有表达式的值。
然而，这个兼容模式出于考虑性能的成本，在执行操作时比较慢，但是在这个过程中它不会
抛出任何安全隐患。
CSP还禁止使用JavaScript引入内联样式表规则，因此你需要手动引入angular-csp.css。
