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

应该就是这个样子。

【AngularJS学习笔记】00 序的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. VC++ 学习笔记(序):神一样的语言

    总的来说,我觉得VC++是一门神一样的语言——它是公认最强大.最复杂的:它一切以效率为第一要务,却又不肯落伍,拼命兼容现在的新的语言设计特点.本来在别的语言很容与就避开的问题,在这里要用很高的技巧去设 ...

随机推荐

  1. Android手机清除微信缓存

    方法一: 1.任意找一个微信好友,给他发送网址 http://debugx5.qq.com 2.自己点击这个网址跳转 3.进入后看到下面的页面,通过勾选第二张截图的Cookie和文件缓存来清除微信缓存 ...

  2. ViewPager取消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  3. webservice入门(1)

    前段时间学习了webservice的用法,虽然只是一些简单的用法,但是如果久了还是会忘记的,所以将学到了记录下来. 一:schema和http协议. 1.schema约束: schema规范中: . ...

  4. 实现PD控制

    尝试为场加入PD控制 在之前的模拟中,需要最小化一个能量函数H. 这样做的原因是,由理想约束的特性(约束反力垂直于虚位移),对于不含体积蒙皮的情况,可以推出 对于表面点,有 J^T * Σfs = 0 ...

  5. C语言:联合变量

    #include <stdio.h> union hold{ int digit; double big; char letter; }; int main(){ union hold a ...

  6. iOS开发-xCode代码格式化xAlign

    xCode默认是可以进行代码格式化的,能满足基础开发需求,如果想要个性一些代码对齐方式宏对齐,等号对齐,属性对齐,xAlign就提供了以上三种功能,参考文中效果~ 基础效果 等号对齐: 属性对齐: 宏 ...

  7. iOS 从手机相册里选取图片

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...

  8. linux上一些命令

    ps -ef看看有没有tomcat的进程:也可以用netstat -tnl来看tomcat的端口是否开放

  9. C#获取进程的主窗口句柄的实现方法

    通过调用Win32 API实现. public class User32API { private static Hashtable processWnd = null; public delegat ...

  10. 修改sublime 侧边栏 颜色 等

    通过 Package Control 安装 PackageResourceViewer  插件 安装成功后 快捷键 ctrl+shift+p  输入 PackageResourceViewer  找到 ...