【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的靶子和变量

来2个体现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或许表明式的地方,然后赋值

应该就是其一样子。

 

相关文章