AngularJS 特性—SinglePage、template、Controller

时间 2019-11-16

标签 angularjs 特性 singlepage template controller 栏目 AngularJS 繁體版

原文原文链接

单页Web应用（SinglePage）javascript

顾名思义，只使用一个页面的Web应用程序.单页面应用是指用户经过浏览器加载独立的HTML页面，Ajax加载数据页面无刷新，实现操做各类操做。html

模板（template）前端

在AngularJS中，一个模板就是一个HTML文件。可是HTML的内容扩展了，包含了不少帮助你映射model到view的内容。java

» HTML模板将会被浏览器解析到DOM中。angularjs

» DOM而后成为AngularJS编译器的输入。浏览器

» AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。app

» 全部的指令都负责针对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（控制器）google

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"-->