AngularJS学习笔记01 序

Posted 2020-06-16

AngularJS通过新的属性与表达式来扩展html，有一种很形象的叫法，定义它为声明式语言。

为克服HTML在构建应用上的不足而设计!

这是它的目标。

它的官网进不去，应该是被墙了，这是goegle的团队弄的。所以找了个应用AngularJS的网站，然后另存为下来的。

以一段简单的代码开头

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

省 <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或者表达式的位置，然后赋值

应该就是这个样子。