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