angularJS

最新推荐文章于 2021-11-15 17:35:04 发布

原创最新推荐文章于 2021-11-15 17:35:04 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #JS #ViewUI

js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍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，希望这篇文章能够让大家有个基础的理解。