Angular-seed源码解释

最新推荐文章于 2024-03-09 15:35:06 发布

ybdesire

最新推荐文章于 2024-03-09 15:35:06 发布

阅读量2.2k

点赞数

分类专栏： HTML AngularJS Javascript 源码分析文章标签：源码 html5 html javascript angular

本文链接：https://blog.csdn.net/ybdesire/article/details/50596867

版权

源码分析同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

Javascript

10 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

angular-seed中的常见代码解释。

1. index.html

angular-seed中的index.html，用第三方库html5-boilerplate，对多浏览器兼容方面做了很全面的考虑（CSS reset，IE不同版本，移动端，browsehappy），值得借鉴。

1.1 meta http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE8专用的meta标记。用于指定IE8用哪种模式（IE6/IE7）去渲染浏览器[3]。IE=edge说明什么版本的IE就用什么版本的模式。

1.2 width=device-width

<meta name="viewport" content="width=device-width, initial-scale=1">

为移动设备考虑的，使布局和移动设备相等（自动拉伸一些内容）。做响应式设计，一定要添加这行[4]。

1.3 第三方库：html5-boilerplate

Boilerplate是一个前端开发模块（包括了一堆css和js以及第三方lib）。他是从web稳定性、兼容性方面来提高web性能的。

HTML5集成，使低版本浏览器能兼容HTML5（浏览器兼容）；
CSS3集成，集成了很多大牛们口口相传的CSS技巧；
包括了Normalize.css，做CSS reset用的（浏览器兼容）；
集成了Modernizr，用于检测浏览器功能支持情况（浏览器兼容）；
Google, Microsoft, NASA都在用boilerplate（使用广泛）；
大量针对服务器的默认配置，无需修改即可配置一个安全、标准的 web 服务器；

1.4 第三方库：Modernizr

老版本的浏览器目前不会被完全取代，所以我们很难在web中使用CSS3 或 HTML5 功能。 Modernizr 是一个JS库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 只做浏览器feature检测，并不能添加老版本浏览器不支持的功能。
biolerplate包括了modernizr，所以我们才能看到index.html中有如下的浏览器判断与class选择。

<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->