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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。