AngularJS 特性—SinglePage、template、Controller
单页Web应用（SinglePage）
顾名思义，只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面，Ajax加载数据页面无刷新，实现操作各种操作。
模板（template）
在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。
» HTML模板将会被浏览器解析到DOM中。
» DOM然后成为AngularJS编译器的输入。
» AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。
» 所有的指令都负责针对view来设置数据绑定。
通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎：
<!--模板（template）:
这里的模板是指前端模板，在angularjs 之外已经有非常丰富的JavaScript模板引擎了，例如artTemplate，Mustache，doT.js等。
Angularjs 内置有自己的模板引擎。
通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎：-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta charset="UTF-8">
<title>angularjs 模板解释</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
var app = angular.module("MyModule", []); //创建模块
app.controller("tmplController", ["$scope", function ($scope) {
//给变量val赋值
$scope.val = "Hello Angularjs template";
//给变量list赋值
$scope.list = [
{ title: "cnblogs", url: "http://www.cnblogs.com" },
{ title: "codeproject", url: "http://www.codeproject.com/" },
{ title: "google", url: "http://www.google.com/" }
]
//给变量hasValue赋值
$scope.hasValue = false;
}]);
})()
</script>
</head> <body ng-app="MyModule">
<div ng-controller="tmplController">
<!--普通输出-->
<div>{{val}}</div>
<!--循环-->
<ul ng-repeat="item in list">
<li><a href="{{item.url}}" rel=nofollow>{{item.title}}</a></li>
</ul>
<!--条件语句-->
<div ng-if="!hasValue">
Angularjs条件语句
</div>
</div>
</body> </html>
<!--以上代码首先创建一个"MyModule"模块，然后在模块中添加了一个名词为"tmplController"的控制器，然后给scope添加三个属性“val”，“list”，“hasValue”，并赋值。
在模板页面设置angularjs作用域为"body"标签内,名词为"Bobby"-->
<!--例子中提供了3种输出方式（普通输出，循环，条件语句），当然angularjs不仅仅这几种方式
“ng-repeat”，“ng-if” 这都是通过指令实现。-->
Controller（控制器）
Controller应该纯粹地用来把service、依赖关系、以及其它对象串联到一起，然后通过scope把它们关联到view上。如果在你的 视图里面需要处理复杂的业务逻辑，那么把它们放到controller里面也是一个非常不错的选择。
如果我要add一本书籍应该怎么办呢？我应该在controller上面新增一个方法来处理这件事情吗？ 不，原因在下面解释。因为它是DOM交互/操作的一部分。
Controller（控制器）-注意点
不要试图去复用Controller，一个控制器一般只负责一小块视图
不要在Controller中操作DOM，这不是控制器的职责
不要在Controller里面做数据格式化，ng有很好用的表单控件
不要在Controller里面做数据过滤操作，ng有$filter服务
一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行
<!--控制器（controller）控制器可以理解为控制页面某个区块的方法。
其中有一个非常重要的对象 \(scope是这个控制器与页面控制器区域沟通的桥梁。
angularjs最精华的部分是双向绑定，失去了双向绑定angularjs就失去了自己的灵魂。这也是和其他以DOM操作的框架比最大的区别。-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta charset="UTF-8">
<title>angularjs控制器介绍</title>
<script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
(function () {
var app = angular.module("MyModule", []);
app.controller("cntoController", ["$scope", function ($scope) {
var defaults = "angularjs控制器介绍";
//设置值
$scope.val = defaults;
$scope.click = function () {
//通过内置的绑定方法click 我们重置字符串
$scope.val = defaults;
};
}]);
})()
</script>
</head> <body ng-app="MyModule">
<div ng-controller="cntoController">
<!--绑定值-->
<div>
<textarea ng-model="val"></textarea>
</div>
<!--输出值-->
<div>{{val}}</div>
<!--绑定方法-->
<div>
<button ng-click="click()">重置</button>
</div>
</div>
</body> </html> <!--我们首先创建了一个模块，然后在模块中添加一个控制器方法 "cntoController".
在控制器里我们给scope添加了一个属性"val" 和一个方法 "click"。
在页面中我们使用"ng-model"指令绑定控制器中设置的"val"-->
AngularJS 特性—SinglePage、template、Controller的更多相关文章
- angularjs link compile与controller的区别详解，了解angular生命周期
壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...
- AngularJS之指令中controller与link（十二）
前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS特性
如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单来说Angular.js是google开发者设计和开发的一套前端开发框 ...
- AngularJS开发指南11：AngularJS的model，controller，view详解
model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...
- AngularJS之Scope及Controller（一）
前言 之前有接触过基本的AngularJS,未过多涉及,于是乎本系列我们来着重讲讲AngularJS,对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写.在之前项目过程中用到过ava ...
- 【转载】AngularJs 指令directive之controller，link，compile
关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...
- AngularJs(五）从Controller控制器谈谈$scope作用域
大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...
- AngularJS中如何对Controller与Service进行分层设计与编码
初学者的Controller 在我们当接触NG后,如需要通过访问远程的API获取一系列的数据进行显示,通常我的Controller代码会写成下面的样子: angular.module('demo') ...
随机推荐
- javascript:算法之数组去重
一 /*******************************111111111***********************************/ /*1,最好数组去重方法,利用json的 ...
- NEC学习 ---- 模块 - 带点文字链接列表
带点文字链接列表, 实现的效果是, 调整字体大小, 点的位置不会跟着变动. HTML如下: <div class="container"> <div class= ...
- Xamarin Android 真机调试时闪退
方法1:引起此问题的原因一般是因为 Mono Shared Runtime 在手机上没有运行,这个程序相当于.net运行时,没有运行的话用C#开发的程序自然无法运行. 解决方法是将此程序设置为自动运行 ...
- SSH 登录VPS解决 The directory media/wysiwyg is not writable by server.问题
权限问题,去到 Magent根目录的Media文件夹,执行下面代码授权. chmod 777 wysiwyg
- Web性能API——帮你分析Web前端性能
前端性能统计必备api,有不知道的吗? 正文从这开始- 开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户 ...
- FPGA学习笔记之格雷码、边沿检测、门控时钟
一.格雷码 格雷码的优点主要是进位时只有一位跳变,误码率低. 1.二进制转格雷码 我们观察下表: 二进制码 格雷码 00 00 01 01 10 11 11 10 二进制码表示为B[],格雷码表示为G ...
- kibana使用操作部分
1.kibana的概念及特点. 概念:数据可视化平台工具 特点: - 灵活的分析和可视化平台 - 实时总结和流数据的图表 - 为不同的用户显示直观的界面 - 即时分享和嵌入的仪表板 2.kib ...
- Linux系统中“动态库”和“静态库”那点事儿 /etc/ld.so.conf 动态库的后缀为*.so 静态库的后缀为 libxxx.a ldconfig 目录名
Linux系统中“动态库”和“静态库”那点事儿 /etc/ld.so.conf 动态库的后缀为*.so 静态库的后缀为 libxxx.a ldconfig 目录名 转载自:http://b ...
- when will a databasechange be committed?
1) Database-updates via DML in a SQLExec-statement (e.g. INSERT INTO PS_TEST_TABLE VALUES(‘value_fie ...
- web移动前端的click点透问题
在移动端开发中,有时会出现click点透的问题. 一.什么是click点透 以下情况,在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C. tips:以下举例仅针对webkit内核浏览器,所有 ...