单页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的更多相关文章

  1. angularjs link compile与controller的区别详解，了解angular生命周期

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...

  2. AngularJS之指令中controller与link（十二）

    前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...

  3. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  4. AngularJS特性

    如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单来说Angular.js是google开发者设计和开发的一套前端开发框 ...

  5. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  6. AngularJS之Scope及Controller（一）

    前言 之前有接触过基本的AngularJS,未过多涉及,于是乎本系列我们来着重讲讲AngularJS,对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写.在之前项目过程中用到过ava ...

  7. 【转载】AngularJs 指令directive之controller，link，compile

    关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...

  8. AngularJs(五）从Controller控制器谈谈$scope作用域

    大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...

  9. AngularJS中如何对Controller与Service进行分层设计与编码

    初学者的Controller 在我们当接触NG后,如需要通过访问远程的API获取一系列的数据进行显示,通常我的Controller代码会写成下面的样子: angular.module('demo') ...

随机推荐

  1. Unity3D 开发 之 加载Android应用的环境

    (1)下载安装JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html (2)下载安装Android SDK:htt ...

  2. chmod() has been disabled for security reasons

    最近用 codeigniter 写一个小系统,引用了session 库,codeigniter默认的session存储方式为files.鉴于安全性,文件即肯定涉及到权限问题. 在类 UNIX 操作系统 ...

  3. Day2(2016/1/22)——Testing

    Activity Button,Toast,Finish 显式intent 隐式明天再看…… 感觉要先补一补java……

  4. libgdx actor 透明问题

    遇到一个问题,自定义的Actor在使用batch.draw时,其他Actor设置的透明影响到了这个Actor 处理方法为 在自定义Actor中 draw方法中 绘制前,加入 Color color = ...

  5. 字符串数组(String []) 去掉重复值的方法

    public class Demo { /** * 去掉重复值 */ public static void main(String[] args) { String test = "100, ...

  6. django静态文件数据库设置

    STATIC_URL = '/static/'STATICFILES_DIRS = (        os.path.join(BASE_DIR,'static')) DATABASES = {    ...

  7. stl 比较和boost LessThanComparable

    C++ STL的几种常用“比较”概念简述   在C++的现行标准(C++ 98)中,由于没有类似“接口”这样的东西,我们在泛型编程时往往只能对模板类型作一些假设,要求其符合某个需求清单,也就是属于某个 ...

  8. dede 数据库类使用列表

    dedecms的数据库操作类,非常实用,在二次开发中尤其重要,这个数据库操作类说明算是奉献给大家的小礼物了. 引入common.inc.php文件 require_once (dirname(__FI ...

  9. Linux应用程序访问字符设备驱动详细过程【转】

    本文转载自:http://blog.csdn.net/coding__madman/article/details/51346532 下面先通过一个编写好的内核驱动模块来体验以下字符设备驱动 可以暂时 ...

  10. .sh脚本判断判断某一变量是否为某一数值

    .sh脚本中,判断某一变量(例如:OEM_CUSTOMER_SUPPORT)是否为某一数值(例如:0),并根据条件做不同处理,写法如下: if [ $OEM_CUSTOMER_SUPPORT -eq  ...