单页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. String与StringBuilder之间区别（转）

    当我们在初学使用C#时,常常会不知道该用StringBuilder合适还是用String高效,下面是我在学习当中对StringBuilder和String的区别总结,分享给大家. String类有不可 ...

  2. jquery中.attr('value')和.val()的区别

    .val() 能够取到 针对text,hidden可输入的文本框的value值. 而 .attr('value') 可以取到html元素中所设置的属性 value的值,不能获取动态的如input ty ...

  3. 使用NSURLSession

    NSURLConnection在iOS9被宣布弃用,NSURLSession从13年发展到现在,终于迎来了它独步江湖的时代.NSURLSession是苹果在iOS7后为HTTP数据传输提供的一系列接口 ...

  4. LeetCode Maximum Size Subarray Sum Equals k

    原题链接在这里:https://leetcode.com/problems/maximum-size-subarray-sum-equals-k/ 题目: Given an array nums an ...

  5. jQuery源代码阅读之三——jQuery实例方法和属性

    jQuery实例方法及属性相关的代码结构如下 jQuery.fn=jQuery.prototype={ jQuery:core_version, constructor:jQuery, selecto ...

  6. Adding Swagger to Web API project

    Adding Swagger to Web API project. All source code for this series can be found here. When you creat ...

  7. SQL数据库操作命令大全

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...

  8. Eclipse中使用自己封装的jar包的过程

    在包名上右键,选择Export"" 经过上面的步骤,成功导出了可运行jar包,下面在另一个自己的工程里引入这个jar包 最终效果如下:可见包已经可以正常使用了!! 运行自己的jar ...

  9. 2.1.5 计算机网络协议： TCP/IP

    应用程序阶段:妳打开浏览器,在浏览器上面输入网址列,按下 [Enter].此时网址列与相关数据会被浏览器包成一个数据, 并向下传给 TCP/IP 的应用层: 应用层:由应用层提供的 HTTP 通讯协议 ...

  10. 报表控件NCReport教程：集成NCReport到Qt应用程序中

    NCReport是一款轻量级.快速.多平台.简单易用的基于Qt toolkit的C++编写的报表解决方案,目前主要包括报表渲染库和报表设计器GUI应用程序. 但是好多使用NCReport控件的朋友都不 ...