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. DevExpress第三方控件使用实例之ASPxPopupControl弹出子窗体

    弹出页面控件:ASPxPopupControl, <dxpc:ASPxPopupControl ID="popubCtr" runat="server" ...

  2. 解决Unsupported major.minor version 51.0错误

    解决Unsupported major.minor version 51.0错误使用jdk6运行项目时发生了Unsupported major.minor version 51.0错误.经过网上搜索发 ...

  3. Code First 关系配置整理

    之前EF一直有性能问题以及使用便利性问题, 终于到了EF6有了Migrations之后, 小弟也决定加入EF阵营了. 在学习FluentAPI配置关系的时候, 发现网上的好几个教程实际上博主自己都没有 ...

  4. Web API Get Started First

    注:此博客是自官网修剪而来,博主IT新手 一.web api与web service的不同: web api是基于Http协议,而web service是基于soap协议.两协议的区别小子看了很多,但 ...

  5. 实现iOS图片等资源文件的热更新化(三):动态的资源文件夹

    简介 此文,将尝试动态从某个不确定的文件夹中加载资源文件.文章,会继续完善自定义的 imageNamed 函数,并为下一篇文章铺垫. 这么做的意义 正如我们经常所说的那样,大多数情景知道做事的意义往往 ...

  6. MySQL为什么需要一个主键

    主键 表中每一行都应该有可以唯一标识自己的一列(或一组列). 一个顾客可以使用顾客编号列,而订单可以使用订单ID,雇员可以使用雇员ID 或 雇员社会保险号. 主键(primary key) 一列(或一 ...

  7. Snmp协议应用-扫描局域网内打印机

    .h2cls { background: #6fa833 none repeat scroll 0 0 !important; color: #fff; font-family: "微软雅黑 ...

  8. POJ 2101

    #include <iostream> #include <algorithm> #include <cmath> using namespace std; int ...

  9. 关于MD5加密的小知识

    - (NSString *)MD5Hash { const char *cStr = [self UTF8String]; unsigned char result[16]; CC_MD5(cStr, ...

  10. selenium简单代码入门

    #!/usr/bin/env python #-*- coding:utf-8 -*- import os,sys,string import time import unittest from se ...