Angularjs基础(一)
(一) 模型——视图——控制器 端对端的解决方案,AngularJS 试图成为WEB 应用中的一种段对端的解决方案。AngylarJS 的出众 之处如下:数据绑定,基本模板标识符,表单验证,路由,深度连接,组件重用,依赖注入。测试包括 单元测试,段对端测试,模拟和自动化测试框架。
Hello World
<Doctype html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
Hello {{'World'}}
</body>
</html>
当加载页面的时候,标记ng-app 告诉AngularJS处理整个HTML页并引导应用。
<html ng-app>
注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World。
Hello {{'World'}}
Hello AngularJS World
<Doctype html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
Your name:<input type="text" ng-model="yourname" placeholder="world">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
文本输入指令<input ng-model="yourname"/> 绑定到一个叫 yourname 的模型变量 双大括号标记将yourname 模型变量添加到问候语文本。 AngularJS 应用的解析 模板(Templates) 模板是您用HTML 和 CSS 编写的文件,展现应用的视图。您给HTML天机新的元素,属性标记,作为AngularJS 编译器的指令,Angular JS编译器是完全可扩展的。这意味着通过AngularJS 编译器是完全可扩展的,这意味着 AngularJS您可以在HTML 中构建自己的HTML标记!
应用程序逻辑(Logic)和行为(Behavior) 应用程序逻辑和行为是您用JavaScrip 定义的控制器。AngularJS与标准的AJAX应用的程序不同,您不需要 另外编写监听器或者DOM 控制器,因为他们已经内置到AngularJS 中了,这些功能使您的应用程序逻辑 很容易编写,测试,维护和理解。 模型数据(Data) 模型是从AngularJS 作用域对象的属性引申的,模型中的数据可能是Javascript对象,数组或基本类型 这都不重要,重要的是,他们都属于AngularJS 作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反 映在视图界面中,反之亦然。 此外,AngularJS 还提供了一些非常有用的服务特性: 1,底层服务保留依赖注入,XHR,缓存,URL路由和浏览器抽象服务。 2,您还可以扩展和添加自己特性的应用服务。 3,这些服务可以让您非常方便的编写WEB应用。
ng-app指令 <html lang="en" ng-app> ng-app 指令标记了AngularJS 脚本的作用域,在<html>都是AngularJS脚本作用域,开发者也在 局部使用ng-app 指令,如<div ng-app>,则AngurJS 脚本仅在该<div>中运行。 Angular JS 脚本标签: <script src="lib/angular/angular.js"></script> 这行代码加载angular.js 脚本,当浏览器将整个HTML页面载入晚班后将会执行该angular.js脚本,angular.js 脚本运行后将会寻找含有ng-app 指令的HTML标签,该标签即定义了AngularJS 应用的作用域。 双大括号绑定的表达式: <p>Nothing here {{'yet'+'!'}}</p> 这行代码演示了AngularJS模板的核心功能——绑定,这个绑定由双大括号{{}}和表达式'yet' + '!'组成。 这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中,接下来的步骤将看到,DOM 可以随意表达运算结果的改变而事实更新。
引导AngularJS 应用 通过ngApp指令来自动引导AngularJS应用是一种简洁的方式,适合大多数情况。 AngularJS应用引导过程有3个重点: 1.注入器(injector)将用于创建此应用程序的依赖注入(dependency injection) 2.注入器将会创建根作用域中的DOM, 3.AngularJS将会连接跟作用域中的DOM,从用ngApp标记的HTML 标签开始,逐步处理DOM中的指令和捆绑。 一旦AngularJS 应用引导完毕,他讲继续侦听浏览器的HTML触发事件,如鼠标点击数事件,按键事件,HTTP 传入响应等改变DOM模型的事件,这类事件一旦发生,AngularJS 将会自动检测变化,并作出相应的处理更新。 模型和控制器 在PhoneListCtrl 控制器里面初始化了数据模型(这里只不过是一个包含了数组的函数,数组中存储的对象是手机数据列表)
function PhoneListCtrl($scope){
$scope.Phones = [
{"name":"Nexus S","snippet":"Fast just got faster with Nexus S."
},
{"name":"Motorola XOOM with Wi - Fi","snippet":"The Next,Next Generation tablet."
}
{"name":"MOTOROLA XOOM","snippet":"The Next, Next Generation tablet"
}
];
}
PhoneListCtrl——控制器方法的名字,(在JS文件controllers.js中)和<body>标签里面的ngController指令的值相匹配。 手机的数据此时与注入到我们控制器函数的作用域($scope)相关联。当应用启动之后,会有一个跟作用域创建出来, 而控制器的作用域的一个典型后继。这个控制器的作用域对所有的<body ng-controller="PhoneListCtrl">标记内部的 数据绑定有效。
- Java案例-数组求余问题
- GO语言实现的端口扫描器分享
- Java案例-数组随机数
- Go语言图片处理和生成缩略图的方法
- Python3 怎么将Unicode转中文,以及GBK乱码ÖйúÉÙÊýÃñ×åÌØÉ«´åÕ¯
- 数据结构和算法——旋转打印链表
- C/C++——set的基本操作总结
- PHP基础——字符串的常用操作
- NLP之tfidf与textrank算法细节对比基于结巴分词
- 【Go 语言社区】算法课程 第一季 第4节-汉诺塔
- C/C++——map的基本操作总结
- Python生成词云图,TIIDF方法文本挖掘: 词频统计,词云图
- C/C++——vector的基本操作总结
- 数据库负载急剧提高的应急处理(二) (r9笔记第55天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- File 类基础解析3 文件过滤器优化
- 原创 | 我在git merge的时候遇到了冲突,怎么解决?
- protobuffer的前世今生(一)——简介
- protobuffer的前世今生(二)——编码
- Java中多线程的使用(超级超级详细)+多线程的实现原理 2
- protobuffer的前世今生(三)——序列化和反序列化性能比较
- 女生勿扰,只适合男孩子的 Python 爬虫,里面东西不给钱统统白送
- LTP 4来了!
- protobuffer的前世今生(五)——在Java中的两种使用方式之注解模式
- Java File类基础解析 1
- jit即使编译语言调用c++
- java JDBC系列1 JDBC类的简析与JDBC的基础操作
- TRTC Android端开发接入学习之常见问题(十一)
- 树莓派基础实验7:倾斜开关实验
- Hive SQL经典优化案例