`

angularJS

    博客分类：
  • js
AngularJS 
阅读更多

一。AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

例如：

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

 这是通过网址自动加载的，也可以去下载文件，然后用上面的方式加载进去。

下载地址：https://github.com/angular/angular.js/releases

说明：AngularJS只有一个主页面，其他的页面都是通过加载在主页面里面的，通俗点说就是只有一个页面，多个页面的效果是通过局部进行加载的。

 

二。AngularJS表达式：是以 {{ 表达式 }}  双大括号的形式进行书写的。

 

三。AngularJS 指令：

ng-app 指令初始化一个 AngularJS 应用程序。

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

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令绑定 HTML 元素到应用程序数据

ng-repeat 指令会重复一个 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 ng-app>                     //ng-app:定义AngularJS跟元素
<div ng-init="names=[            //ng-init:用来赋予names值
{name:'apple',price:'3'},
{name:'orange',price:'2.5'},
{name:'banana',price:'3.5'}]">
<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">   //ng-repeat:指令对于数组中的每个项会克隆一次HTML元素
  {{ x.name + ' : ' + x.price }}</li>
</ul>
<h2 ng-init='quantity=0;price=0'>价格计算器</h2>
数量: <input type="number" ng-model="quantity">  //ng-model:绑定 HTML 元素 到应用程序数据
价格: <input type="number" ng-model="price">
<p><b>总价:</b> {{quantity * price}}</p>
</div>
</body>
</html>

 

四。Angular模型：ng-model指令。

双向绑定。     例如：

<!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="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "大神";
});
</script>
<p>修改输入框的值，标题的名字也会相应修改。</p>
</body>
</html>

 上面就是Angular最基本的知识。如果只是想了解AngularJS，希望这篇文章能够让大家有个基础的理解。

分享到：
| Tyk API gateway
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics