您的位置：首页 > Web前端 > AngularJS

AngularJS for beginners

2016-04-12 18:14 656 查看

Resume

This is an AngularJS tutorial for beginners. In this passage, we will try to learn the conception of AngularJS and try to build something fundamental.

Preparations

To use AngularJS, we must import the JavaScript repository which is written by Google.

We may use the CDN provided by Google.

Below is the example.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My GitHub</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="resources/index/index.css" />
</head>
<body>
</body>
</html>

Basic Directives

First of all, we will introduce some basic directives which are ng-app, ng-model and ng-bind.

ng-app: This directive tells the browser that this tag and all its sub-tags should apply the AngularJS.

ng-model: This directive binds the value of the input field to a variable.

ng-bind: This directive binds the innerHTML to a variable that are bound by ng-model.

Example

<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>

If you copy to a HTML file and run it in the browser, you will see once you typed some words in the input box, then the words you typed in the input box will be completely showed below the input box.

Example 2

<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
name : {{name}}
</div>
</body>

Codes above illustrates that we can use {{ }} to show the value of a variable in AngularJS.

Expressions

As we did in the example above, {{ }} can refer to the value of a variable. But we can also do something different, such as:

<body>
<div ng-app="">
<p>{{1 + 10 + 100}}</p>
</div>
</body>

It shows 111

The codes above shows that in {{ }}, we can calculate formulas: Like we can calculate in JavaScript. AngularJS just apply the result in {{ }} to the the tag.

As we can calculate string in JavaScript, we can also calculate string in {{ }}.

<body>
<div ng-app="">
<p>{{"Hello, " + "World!"}}</p>
</div>
</body>

It shows Hello, World!

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航