码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS: An Overview

时间:2015-04-22 23:29:18      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

AngularJS: An Overview

By Paras Babbar on Apr 21, 2015

Introduction

Angular JS is a very powerful JavaScript library or we can say open-source web application framework maintained by Google. It is used in Single Page Application (SPA) projects. It extends the HTML DOM with additional attributes (in other words directives) and binds data to HTML with expressions, hence making it more responsive to user actions.

It is licensed under the Apache version 2.0 license.

Prerequisites

One should have a basic understanding of JavaScript and any text editor (I‘ll be using Visual Studio 2015). Since we are developing web-based applications using Angular JS, knowledge of HTML, CSS and AJAX will be an advantage.

Let‘s consider the following example:

 
  1. <!-- Angular JS Example -->  
  2.   
  3. <div ng-app="">  
  4.     <p>  
  5.         <b>Name:</b> <input type="text" ng-model="name" />  
  6.     </p>  
  7.     <h2 ng-bind="name">  
  8.   
  9.     </h2>  
  10. </div>  

Angular JS extends HTML with ng-directives.

  • The ng-app directive defines an Angular JS application.
  • The ng-model directive binds the value of HTML controls (input, select and text area) to application data.
  • The ng-bind directive binds application data to the HTML view.

Complete Code

 
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Angular JS 1</title>  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>      
  6. </head>  
  7. <body>  
  8.     <!-- Angular JS Example -->  
  9.     <div ng-app="">  
  10.         <p>  
  11.             <b>Name:</b> <input type="text" ng-model="name" />  
  12.         </p>  
  13.         <h2 ng-bind="name">  
  14.         </h2>  
  15.     </div>  
  16. </body>  
  17. </html>  

 Example Explained

Angular JS starts automatically when the webpage has loaded.

  • The ng-app directive tells Angular JS that the <div> element is the “owner” of an Angular JS application.
  • The ng-model directive binds the value of the input field to the application variable name.
  • The ng-bind directive binds the innerHTML of the <h2> element to the application variable name.

Output

技术分享

Note: You can use data-ng-, instead of ng-, if you want to make your page HTML 5 valid.

You‘ll get more to be familiar with Angular JS in a future article. Keep visiting

src: http://www.c-sharpcorner.com/UploadFile/cb92fb/angularjs-an-overview/

 

AngularJS: An Overview

标签:

原文地址:http://www.cnblogs.com/glenblogs/p/4448903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!