文档章节

【AngularJS学习笔记】00 序

前端老手
 前端老手
发布于 10/22 08:39
字数 818
阅读 8
收藏 0

本文转载于:专业的前端网站【AngularJS学习笔记】00 序

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

应该就是这个样子。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=h0iiici0hbib

前端老手
粉丝 10
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
197
0
2017-03-01

学习内容:angular.js module模板定于服务provide 多个控制器数据共享 过滤器及练习 完成内容:学习内容及笔记详细 工作问题:关于angular.js之前在做签到抽奖项目的时候遇到 获取数值及方式...

Full_Session
2017/03/01
2
1
2019 ngChina 开发者大会 - Getting Better with You!

2019 ngChina 开发者大会将于11月23-24日在杭州举办!届时,全国各地前端和全栈开发的小伙伴们齐聚杭州,一起零距离聆听来自中国、中国台湾、美国、德国、以色列、英国、奥地利、保加利亚、日...

2019ngchina开发者大会
10/08
87
0
2017-03-04

学习内容:angular.js 自定义指令compile和link属性 完成内容:学习内容及笔记详细 磐石农商行商家管理端需求分析文档 工作问题:学习angular.js编译阶段 pre:指令链接到子元素之前运行 post...

Full_Session
2017/03/04
2
0
Angular 5 升级至Angular 7

根据升级建议,应该先从Angular 5升级至Angular 6,再从Angular 6升级至Angular 7。 本文内容“升级前-升级”适用于想从Angular 5升级至Angular 6的小伙伴; 本文内容“升级后”适用于想从A...

Hermy
2018/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue.js学习笔记2 - better-scroll滚动条

better-scroll滚动条 使用作者自制的better-scroll库,实现内容的滚动。 先在package.json加上依赖: "better-scroll": "^0.1.7" 接着再npm install安装依赖。 import BScroll from 'better-......

swanf
54分钟前
7
0
设计模式之适配器模式

定义 将一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工 作。 UML类图 适配器分为两种,类适配器与对象适配器。 类适配器的UML图...

陈年之后是青葱
今天
8
0
教你玩转Linux—磁盘管理

导读 Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了...

问题终结者
今天
11
0
KMP

字符串匹配算法 针对被匹配字段生产一个部分匹配表 A B C D A B D 0 0 0 0 1 2 0 部分匹配表 熟悉前缀与后缀的概念 ,“部分匹配表” 的生产就是根据前缀、后缀的最苍的共有元素的长度 前缀:...

鬼才王
昨天
6
0
快速搭建Jenkins集群

关于Jenkins集群 在Jenkins上同时执行多个任务时,单机性能可能达到瓶颈,使用Jenkins集群可以有效的解决此问题,让多台机器同时处理这些任务可以将压力分散,对单机版Jenkins的单点故障的隐...

程序员欣宸
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部