AngularJS入门学习笔记一

首先声明:

本博客源自于学习:跟我学AngularJs:AngularJs入门及第一个实例。通过学习,我自己的一些学习笔记。

1.AngularJS的一些基本特性

(1)使用双大括号{{}}语法进行数据绑定;

(2)使用DOM控制结构来实现迭代或者隐藏DOM片段;

(3)支持表单和表单的验证;

(4)能将逻辑代码关联到相关的DOM元素上;

(5)能将HTML分组成可重用的组件。

他是MVC结构的,有双向数据绑定的特点。下图是双向数据绑定的图解:

使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。---这句话我还没有理解。之后理解了,我再解释。

HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。

MVC:

以上只是一些杂乱的特性。当我深入学习了之后,会更好的分门别类的列举和写出具体的特性。

入门实例一:

<p><input  type="text" ng-model = "inputValue">请输入内容</p>

<h1>您输入的内容为:{{inputValue}}</h1>

angular通过 ng-model将input输入框输入的内容,绑定到一个叫inputValue的model上。

然后再用双大括号将这个model绑定到h1上面。

入门实例二:

代码如下:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS入门</title>
    <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>
</head>
<body ng-controller = "myController">
    <p><input  type="text" ng-model = "inputValue">请输入内容</p>
    <h1>您输入的内容为:{{inputValue}}</h1>
</body>
<script type="text/javascript">
var app = angular.module(‘myApp‘, []);//获得整个angularJS影响的html元素
//控制器
app.controller(‘myController‘, function($scope) {
    $scope.inputValue = "PeterTest";
});
</script>
</html>  

注意以上代码标黄的部分。这两个分别批明了AngularJS有效的范围和Controller层有效的范围。

先通过  var app = angular.module(‘myApp‘, []);  拿到整个angularJS影响的app对象。

再通过app.controller拿到myController,

然后让input的数据与注入到我们控制器函数的作用域($scope)相关联。

从而一打开页面,就自动填充好了 PeterTest。

    $scope.inputValue = "PeterTest"; 

angularJS实战

来自于学习慕课网 http://www.imooc.com/video/2678  angularJS实战的一些笔记。

最终实现一个bookstore应用

时间: 2024-10-21 03:32:47

AngularJS入门学习笔记一的相关文章

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新

Hadoop入门学习笔记---part4

紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操作,前提是按照<Hadoop入门学习笔记---part2>中的已经在虚拟机中搭建好了Hadoop伪分布环境:并且确定现在linux操作系统中hadoop的几个进程已经完全启动了. 好了,废话不多说!实际的例子走起. 在myeclipse中新建一个java工程: 在项目工程中新建一个lib包用于存放

Hadoop入门学习笔记---part1

随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力,好好做.正是因为选题和hadoop有关,现在正式开始学习hadoop.将笔记整理于此,希望与志同道合的朋友共同交流. 作者:itRed 邮箱:[email protected] 个人博客链接:http://www.cnblogs.com/itred 好了,废话不多说.进入正题!开始hadoop的学习

汇编入门学习笔记 (六)—— si、di,双重循环

疯狂的暑假学习之  汇编入门学习笔记 (六)-- si.di,双重循环 参考: <汇编语言> 王爽 第7章 1. and和or指令,与[bx+idata] and和or,就不多说了. [bx+idata] 这样写是可以的,某些情况下,比较方便. [bx+idata] 也可以写成 idata[bx] 直接见例子: 把'ABcde' 跟 'fGHig' 都改成大写(ASCII中大写字母与小写字母二进制中,只有第五位不同,大写字母是0,小写字母是1) assume cs:code,ds:data d

汇编入门学习笔记 (八)—— 转移指令

疯狂的暑假学习之  汇编入门学习笔记 (八)--  转移指令 參考: <汇编语言> 王爽 第9章 能够改动ip或者同一时候改动cs和ip的指令统称为转移指令. 8086CPU转移行为分为: 段内转移:仅仅改动ip 段间转移:同一时候改动cs和ip 段内转移按ip改动的范围可分为: 短转移:ip改动范围 -128~127 近转移:ip改动范围 -32768~32767 转移指令分为: 无条件转移指令.如 jmp 条件转移指令 循环指令.如 loop 过程. 中断. 1. offset,nop指令

Hadoop入门学习笔记---part3

2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hadoop有了一个基础的了解.但是还是有一些理论性的东西需要重复理解,这样才能彻底的记住它们.个人认为重复是记忆之母.精简一下: NameNode:管理集群,并且记录DataNode文件信息: SecondaryNameNode:可以做冷备份,对一定范围内的数据作快照性备份: DataNode:存储数据:

汇编入门学习笔记 (三) —— 第一个程序

疯狂的暑假学习之  汇编入门学习笔记 (三)-- 第一个程序 参考:<汇编语言> 王爽  第四章 1.一个源程序从写到执行的过程 第一步:编写汇编源程序 第二步:对源程序进行编译连接 第三步:在操作系统中执行 2.源程序 代码: assume cs:first first segment start: mov ax,2 add ax,ax add ax,ax mov ax,4C00H int 21H first ends end start 代码解释: assume .segment.ends

Python 实现 CNKI批量下载 和FireFox Extension 入门学习笔记

?                                 Python 实现 CNKI批量下载 和FireFox Extension 入门学习笔记? 由于需要也是为了督促自己学习新的东西,我原本想要尝试着写一个爬虫程序,能够在cnki上自动得将论文进行批量下载,学习过程中遇到了诸多情况,cnki也真是专业,不得不佩服cnki的强大. 下面进入正题: 学习.实验环境:ubuntu 14.04 工具:Eclipse ,  FireFox, FireBug,HttpFox 编程语言:pyth

汇编入门学习笔记 (十四)—— 直接定址表

疯狂的暑假学习之  汇编入门学习笔记 (十四)-- 直接定址表 参考: <汇编语言> 王爽 第16章 1. 描述单元长度的标号 普通的标号:a,b assume cs:code code segment a:db 1,2,3,4,5,6,7,8 b:dw 0 start: mov si,offset a mov di,offset b mov ah,0 mov cx,8 s: mov al,cs:[si] add cs:[di],ax inc si loop s mov ax,4c00h in