AngularJs简介

AngularJs 简介

AngularJs是一个JavaScript框架,它是一个JavaScript编写的库

AngularJs是以一个JavaScript文件形式发布的

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJs通过ng-directives扩展了HTML

ng-app指令定义一个AngularJs应用程序

ng-model指令是吧元素值(比如输入域的值)绑定到应用程序.

ng-bind指令是吧应用程序数据绑定到html视图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 
<div ng-app="">  //ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 
                                                                                            //的"所有者"。
     <p>名字 : <input type="text" ng-model="name"></p>//ng-model 指令把输入域的
                                                                              //值绑定到应用程序变量 name。 
     <h1>Hello {{name}}</h1>  //ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
</div>
 
</body>
</html>

AngularJs表达式

AngularJs将在表达式书写的位置输出数据

AngularJs表达式可以包含文字,运算符和变量

<div ng-app="">
     <p>计算值： {{ 5 *5 }}</p>
</div>
//计算值:25

ng-init指令初始化应用程序数据

<div ng-app="" ng-init="firstName='John'">
     <p>姓名：<input type="text" ng-model="firstName"></p>
     <p>你输入的为： {{ firstName }}</p>  //{{firstName}}表达式是一个AngularJs数据绑定表达式
 
</div>

数据绑定

AngularJs中的数据绑定,同步了AngularJs表达式与AngularJs数据.

{{firstName}}是通过ng-model="firstName"进行同步

<div ng-app="" ng-init="quantity=1;price=5">
数量： <input type="number"    ng-model="quantity">
价格： <input type="number" ng-model="price">
 
<p><b>总价：</b> {{ quantity * price }}</p>
 
</div>

AngularJs 指令绑定数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
<p>第三个值为 <span ng-bind="points[2]"></span></p>
 
</div>
//第三个值为19

AngularJs 指令绑定对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
<p>姓为 <span ng-bind="person.lastName"></span></p>
 
</div>
//姓为Doe

ng-model指令可以将输入域的值与AngularJS创建的变量绑定

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";   
});
</script>

scope(作用域)是应用在html(视图)和JavaScript(控制器)之间的纽带

scope可应用在视图和控制器

AngularJS创建控制器时,可以将$scope对象当作一个参数传递

猜你喜欢