【AngularJS学习笔记】01 序

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

应该就是这个样子。

时间: 2024-08-24 22:17:45

【AngularJS学习笔记】01 序的相关文章

AngularJS 学习笔记--01

学习 AngularJS 要先了解 MVC 模式 , 即 " 模型--视图--控制器 " . 模型: 包含了需要用到的数据 ; 有两种广义上的模型 : 视图模型 , 只表示从控制器传往视图的数据 ; 领域模型 , 包含了业务领域的数据 , 以及用于创建 , 存储和操纵这些数据的各种操作 , 转换和规则 , 统称为模型逻辑 . 控制器 : 是数据模型和视图之间的渠道 , 控制器会向作用域中添加业务领域逻辑 ( 也称为行为 ) , 其中作用域是模型的子集 ; 视图: 使用 HTML 元素来

【opengl 学习笔记01】HelloWorld示例

<<OpenGL Programming Guide>>这本书是看了忘,忘了又看,赶脚还是把笔记做一做心里比较踏实,哈哈. 我的主题是,好记性不如烂笔头. ================================================================ 1. 下载glut库 glut库地址为:www.opengl.org/resources/libraries/glut/glutdlls37beta.zip glut全称为:OpenGL Utilit

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

Linux系统学习笔记:序

Linux系统学习笔记:序 ??Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协议.它支持32位和64位硬件.Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统. 本人使用的Linux为Ubuntu,主要以<APUE>(第3版)为学习蓝本. 1. Unix/Linux 体系结构 如图: 内核的接口被称为系统调用.公用函数库构建在

HTTP 学习笔记01

HTTP   hypertext transfer protocol (超文本传输协议) TCP/IP 协议集中的一个应用层协议 用于定义WEB浏览器与WEB服务器之间交换数据的过程以及数据本身的格式 HTTP 1.0  会话方式 HTTP 1.1 方式 HTTP 请求消息结构 一个请求行,若干消息头,以及实体内容 其中的一些消息头和实体内容都是可选的,消息头和实体内容之间要用空行隔开. GET   方式下是没有实体内容的 POST .PUT.DELETE 方式下请求消息才可以包含实体内容 HT

SWIFT学习笔记01

1.Swift,用来判断option是不是nil,相当于OC的 if(option) if let name = option{ greeting = "if=====" }else{ greeting = "else===" } 2.运行switch中匹配到的子句之后,程序会退出switch语句,并不会继续向下运行,所以不需要在每个子句结尾写break. 3.//使用..创建的范围不包含上界,如果想包含的话需要使用...,集合上,就是[)与[]的关系 for i

C++ GUI Qt4学习笔记01

C++ GUI Qt4学习笔记01 qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概念:一个是“信号和槽”,另一个是“布局”. 窗口部件(widget)是用户界面的一个可视化元素,相当于windows系统中的“控件”和“容器”.任意窗口部件都可以用作窗口. 1.1Hello Qt 正确安装Qt4开发环境,创建工程目录hello,源代码文件名为hello.cpp,进入hello目录 (1

HTML学习笔记01

HTML学习笔记 HTML学习笔记01 一.HTML的定义 1 HTML就是"HyperText Markup Language","超文本标记语言".2 HTML不是<color="red">编程语言,而是一种标记语言.3 标记语言是一套标记标签.4 HTML使用标记标签来描述网页. 二.HTML标签 1 HTML标签是由尖括号包围的关键词.2 HTML标签通常是成对出现的.3 标签对中的第一个标签是开始标签,第二个标签是结束标签.

MVC4 学习笔记01

1 . ASP.NET MVC 中 ActionResult 和 ViewResult 在使用上的区别是什么?要注意什么吗? ActionResult 是一个抽象(abstract)类,ViewResult 只是ActionResult 的一个实现(implementation).如果你确认你返回的是一个视图(view),你可以直接返回类型为ViewResult.ActionResult 有很多的派生类,如果你很确定你要返回的类型,你可以明确的返回该类型.如果你并不是很清楚,或者你根本不想去理解

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req