【AngularJS学习笔记】00 序

AngularJS通过新的特性和表达式来扩张HTML,有同样种植十分形象之叫法,定义其为声明式语言

也克服HTML在构建利用达到的不足而规划!

就是她的靶子。

它们的官网上无失去,应该是让堵了,这是goegle的社将的。所以寻找了只应用AngularJS的网站,然后另外存为下的。

以同一段简单的代码开头

<div ng-app="myApp" ng-controller="myCtrl" ng-init="num1=3;num2=4">
3

省 <input type="text" ng-model="provinceName"><br>
市 <input type="text" ng-model="cityName"><br>
区 <input type="text" ng-model="areaName"><br>
<br>
地址: {{provinceName + "省" + cityName+ "市" + areaName+"区"}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.provinceName= "湖北";
    $scope.cityName= "武汉";
    $scope.areaName= "洪山";
});
</script>

 

在点代码中,以ng-*诸如此类的格式书写的习性,都是AngularJS定义之新属性。

里面ng-app所当的div为叫myApp的AngularJS应用程序。

ng-controller 用于控制 AngularJS 应用.

ng-init在一定给在AngularJS应用程序初始化时,启用的一律段子JS代码。

ng-model相当给绑定一个输入框,到AngularJS应用程序的指定的变量上。

ng-bind绑定AngularJS应用程序里之指定变量到HTML元素上。

然此间我们吧利用了重新便民的做法,{{}}表达式。AngularJS的表达式,就是一对一给一段javascript表达式的计。AngularJS
表达式不支持条件判断,循环和生,但支持过滤器。

AngularJS入门就是是这么简单。

 

AngularJS的目标以及变量

来一个展示AngularJS的靶子同变量的事例

<div ng-app="" ng-init="myInfo={Name:'Troy123',Job:'程序员'};points=[1,3,2,2,1]">
    <p>信息:{{ myInfo.Job+":"+myInfo.Name  }}</p>
    <p>第一个值为 {{ points[0] }}</p>
</div>

这段代码很像,于是吃咱们脑补一下投机因此JS如何错过实现吧。

尽管如此以自本底水准而言实现深有难度,但是咱知道它们可能是怎打的,更方便我们念。

脑补实现(我好想的贯彻,并无看具体代码)

HTML操作

那首先我形容个JS去寻觅这HTML里的特性也ng-app的素,然后找ng-init的性能,并执行中的代码。

诸如此类我们得了名叫吧myInfo的目标和名也points的数组。

下一场搜她的子级元素,搜索{{
表达式的号子,或者ng-bind表达式,或者ng-model,搜到表达式就实行表达式得到结果就是位于HTML上好了。

JS操作

倘若在背后用app.controller来决定就再也简便易行了,同样找到元素,操作是被myApp的命名空间(应该是个函数体)里的变量的值,就算页面及从来不变量,JS也会见活动加一个中间变量。

然后去寻找页面上ng-model和ng-bind或者表达式的岗位,然后赋值

当就是是者样子。

 

相关文章