AugularJS从入门到实践（一）
前 言
前端
AngularJS是为了克服HTML在构建应用上的不足而设计的。（引用百度百科）
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。（引用百度百科）例如：使用双大括号{{}}语法进行数据绑定；使用DOM控制结构来实现迭代或者隐藏DOM片段；支持表单和表单的验证；能将逻辑代码关联到相关的DOM元素上；能将HTML分组成可重用的组件。本篇学习主要有两个部分：
①【AngularJS 常用指令】
②【AngularJS 的 mvc 】
| 1、AngularJS 常用指令 |
1.na-app:声明angularjs所管辖的区域，一般写在body或者HTML上原则一个一面只写一个
<body ng-app=""> </body>
2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
<input type="text" id="input" ng-model="name"/>
3.ng-bind 指令把应用程序数据绑定到 HTML 视图。
①<div id="div" ng-bind="name"></div>
②<div>{{name}}</div>
4.ng-init 指令初始化 AngularJS 应用程序变量。
<body ng-app="" ng-init="name=123"></body>
5.表达式：{{}}绑定表达式，可以包含数字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=”代替
{{5+""+5+',Angular'}}
指令：AngularJS中，通过扩展HTML的属性提供功能 ↓↓↓↓（菜鸟教程中的原话）
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
| 2、AngularJS 的 mvc |
【mvc三层框架】
1、 Model（模型）：应用程序中处于处理属性局的部分。（保存或修改数据到数据库、变量等）。AugularJS中的Model特征的是：数据
view（视图）：用户看到的而用于显示数据的页面
controller（控制器）：应用程序中处理用户交互的部分。负责从视图读取数据，控制用户输入，并项目性发送数据。
2、工作原理：用户从视图层发送请求，controller接收到请求后转发给对应的model处理，medle处理完成后返回结果给controller，并在view成反馈给用户。
① 模块名称，即ng-app所需要绑定的名称。ng-app="myApp"；
② 数组：需要注入的模块名称，不需要可为空。
var app = angular.module("myApp",[]);
在Angular模块上，创建一个控制器Controller，需要传递两个参数称。
① ng-controller="myCtrl"
② controller的构造函数：构造函数可以传入多个参数，包括$scope/$roatScope以及各种系统内置对象
【angularJS中的作用域】
①$scope：局部作用域，声明在$scope上的属性和方法，只能在当前Controller中使用；
②$rootScope：根作用域，声明在$rootscope上的熟悉感和方法可以在ng-app所包含的任何区域使用（无论是否同意controller，或是否在controller包含范围中）。
>>> 若没有使用$scope 声明变量，而直接在html中使用ng-model绑定的变量作用域为：
1.如果ng-model在某个ng-controller中，则此变量会默认绑定到当前Controller的$scope上
2.如果ng-model没有在任何一个ng-controller中，则此变量将绑定在$rootScope上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 100px;
background-color: #00BFFF;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<div ng-bind="name" class="div1"></div>
<div ng-bind="age" class="div1"></div>
<div ng-bind="classes" class="div1"></div>
<div ng-bind="classes.name" class="div1"></div>
<div ng-bind="classes.age" class="div1"></div>
<div ng-bind="classes.sex" class="div1"></div> </div>
<div ng-controller="myCtrl1">
<input type="text" ng-model="name"/>
<div ng-bind="name" class="div1"></div>
<div ng-bind="age" class="div1"></div> </div> </body>
<script language="JavaScript" src="angular-1.5.6/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.name = "帅哥" ;
$scope.age = "18岁";
$scope.classes = {
name:"张三",
age:"16岁",
sex:"男" }; }); app.controller("myCtrl1",function($rootScope){
$rootScope.name = "hahaha" ;
}); </script>
</html>
学习时候的笔记，可能会有一些错误的地方，欢迎各位的批评指点。
反思，复盘，每天收获一点---------------------期待更好的自己
AugularJS从入门到实践（一）的更多相关文章
- AugularJS从入门到实践（二）
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) 本篇学习主要有两个部分: ①[AngularJS 过滤器] ②[AngularJS ...
- AugularJS从入门到实践（三）
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...
- 《Github入门与实践》读书笔记 蟲咋先生的追求之旅（上）
<Github入门与实践>作者: [日] 大塚弘记 译者:支鹏浩/刘斌 简介 本书从Git的基本知识和操作方法入手,详细介绍了GitHub的各种功能,GitHub与其他工具或服务的协作 ...
- Python编程从入门到实践笔记——异常和存储数据
Python编程从入门到实践笔记——异常和存储数据 #coding=gbk #Python编程从入门到实践笔记——异常和存储数据 #10.3异常 #Python使用被称为异常的特殊对象来管理程序执行期 ...
- Python编程从入门到实践笔记——文件
Python编程从入门到实践笔记——文件 #coding=gbk #Python编程从入门到实践笔记——文件 #10.1从文件中读取数据 #1.读取整个文件 file_name = 'pi_digit ...
- Python编程从入门到实践笔记——类
Python编程从入门到实践笔记——类 #coding=gbk #Python编程从入门到实践笔记——类 #9.1创建和使用类 #1.创建Dog类 class Dog():#类名首字母大写 " ...
- Python编程从入门到实践笔记——函数
Python编程从入门到实践笔记——函数 #coding=gbk #Python编程从入门到实践笔记——函数 #8.1定义函数 def 函数名(形参): # [缩进]注释+函数体 #1.向函数传递信息 ...
- Python编程从入门到实践笔记——用户输入和while循环
Python编程从入门到实践笔记——用户输入和while循环 #coding=utf-8 #函数input()让程序暂停运行,等待用户输入一些文本.得到用户的输入以后将其存储在一个变量中,方便后续使用 ...
- Python编程从入门到实践笔记——字典
Python编程从入门到实践笔记——字典 #coding=utf-8 #字典--放在{}中的键值对:跟json很像 #键和值之间用:分隔:键值对之间用,分隔 alien_0 = {'color':'g ...
随机推荐
- YYLabel 自动布局 富文本文字点击事件
YYLabel显示多行除了需要设置numberOfLines = 0以外,还需要设置preferredMaxLayoutWidth最大的宽度值才可以生效多行效果 YYLabel中的NSMutableA ...
- Python 随机生成有效手机号码及身份证
中国那么大,人那么多,几乎人手一部手机.手机号码已经作为各大互联网站的注册账户.同样,身份证更是如此.以下是生成有效手机号码和身份证号. 身份证需要下载districtcode.txt这个文件:htt ...
- java虚拟机学习-JVM内存管理：深入垃圾收集器与内存分配策略(4)
Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人却想出来. 概述: 说起垃圾收集(Garbage Collection,下文简称GC),大部分人都把这项 ...
- css浮动--float/clear通俗讲解（转载）
本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...
- Swift 入门之简单语法（四）
函数 目标 掌握函数的定义 掌握外部参数的用处 掌握无返回类型的三种函数定义方式 代码实现 函数的定义 格式 func 函数名(行参列表) -> 返回值 {代码实现} 调用 let result ...
- 深入理解C#中的String
关于C#中的类型 在C#中类型分为值类型和引用类型,引用类型和值类型都继承自System.Object类,几乎所有的引用类型都直接从System.Object继承,而值类型具体一点则继承System. ...
- （数字IC）低功耗设计入门（四）——RTL级低功耗设计
二.RTL级低功耗设计 前面介绍了系统级的低功耗设计,换句话说就是在系统级降低功耗可以考虑的方面.系统级的低功耗设计,主要是由系统级设计.具有丰富经验的人员实现,虽然还轮不到我们设计,我们了解一下还是 ...
- 6.类似Object监视器方法的Condition接口
在<1.有关线程.并发的基本概念>中,我们利用synchronized关键字.Queue队列.以及Object监视器方法实现了生产者消费者,介绍了有关线程的一些基本概念.Object类提供 ...
- WPF 简易的跑马灯效果
最近项目上要用到跑马灯的效果,和网上不太相同的是,网上大部分都是连续的,而我们要求的是不连续的. 也就是是,界面上就展示4项(展示项数可变),如果有7项要展示的话,则不断的在4个空格里左跳,当然,衔接 ...
- 关于MS12-020一次简单尝试
由于之前着重于web漏洞,主机漏洞这块比较薄弱.也没有用过metasploit,对于很多系统漏洞还不熟悉,正好这几天不忙,就想着慢慢学习,再写点简单的东西,进行总结记录. 这次尝试的是MS12-020 ...