最新的Web开发教程
 

Angular Material教程



角材质是角JS开发的UI组件库。 角料成分有助于构建有吸引力的,一致的,功能性的网页,并同时秉承现代网络设计原则像浏览器的便携性,设备独立性,以及优雅降级的Web应用程序。 它有助于创造更快,美丽的,反应迅速的网站。 它是由谷歌材料设计的启发。


听众

本教程是为想学习角料以及如何使用它来创建更快,漂亮,响应网站的基础知识谁的专业人士。 本教程介绍角材料的所有基本概念。


先决条件

与之前继续学习本教程,你应该有角JS,HTML,CSS,JavaScript中,文档对象模型(DOM)有基本的了解,任何文本编辑器。 此外,它会帮助,如果你知道基于Web的应用程序是如何工作的。


执行角度材质在线

对于大多数在本教程中所举的例子,你会发现一个尝试,它的选择。 使用此选项可当场执行你的角料程序,享受你的学习。

使用可在下面的示例代码框右上角的尝试,它试图选项下面的例子-

<html lang="en" >
   <head>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script type="text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   <body ng-app="firstApplication" ng-cloak>
      <md-toolbar class="md-warn">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p>
         <p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>