AngularJS历史就不多介绍了,其本质来说,AngularJS并不是新发明,只是一种改进罢了。它的基础还是javascript,工程师们用js写了很多函数,从而形成了一个框架,一个新的开发模式。所以只要理解JS,html,css这些基本技术的小伙伴们,anjularjs很好上手。
以下所有代码,都以Asp.net为展现平台,和大家一起了解下AngularJS如何使用,
所谓,纸上得来终觉浅,绝知此事要躬行。直接代码来说话。
以下所有代码工程文件:http://download.csdn.net/detail/yysyangyangyangshan/9691429
先使用一个angularJS的js文件(工程中包含有,可下载整个工程文件),
第一个angularJS程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <Meta charset="utf-8"> <script src="/Scripts/angular.min.js"></script> </head> <body> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html>
效果如下
这里有几个特别的属性,
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
AngularJS 指令
ng-为前缀的,一般是指令。
比如,看一下如何初始化值,
<!--anjularjs初始化--> <div ng-app="" ng-init="firstName='yys'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div>效果:
ng-init,是一个指令,初始化了一个值。
上面我们注意到是ng-开头的,这种是普通html属性,
angularJS还支持html5的扩展,它使用data-ng开头的,比如
<!--Html5扩展--> <div data-ng-app="" data-ng-init="firstName='yys'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div>
效果
AngularJS 表达式
表达式格式为:{{ expression }}。
如下代码
<!--表达式--> <div ng-app=""> <p>我的第一个表达式: {{ 1 + 1 - 3 + 5}}</p> </div>效果
AngularJS 应用
<!--应用--> <div ng-app="myFirstApp" ng-controller="myFirstCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myFirstApp',[]); app.controller('myFirstCtrl',function ($scope) { $scope.firstName = "Sam"; $scope.lastName = "Yang"; }); </script>
效果
ng-app指令定义了应用,ng-controller 定义了控制器。模块(Module) 定义了 AngularJS 应用。控制器(Controller) 用于控制 AngularJS 应用。