angular.js-1初識

時間 2019-11-11

標籤 angular.js angular 欄目 AngularJS 简体版

原文原文鏈接

初識AngularJS

AngularJS 爲了克服HTML在構建頁面上的不足，經過新的屬性和表達式擴展了 HTML（AngularJS 經過指令擴展了 HTML，且經過表達式綁定數據到 HTML）。css

1.四個核心思想：依賴注入，模塊化，雙向綁定，語義化標籤html

2.優勢：簡化代碼，加快開發，不用像jQuery那樣操做複雜的DOM代碼，只需改變數據模型便可。express

AngularJS 指令是以 ng 做爲前綴的 HTML 屬性。bootstrap

一、ng-app=" " 指令定義angularJS的使用範圍，聲明angularJS管理邊界數組

二、ng-model="變量" 定義變量名；app

3.AngularJS 表達式寫在雙大括號內：{{ expression }}，表達式把數據綁定到 HTML，將在表達式書寫的位置"輸出"數據。表達式能夠包含文字、運算符和變量等ide

4.AngularJS 模塊（Module） 定義了 AngularJS 應用。用ng-app指令指明瞭應用模塊化

定義方法：angular.module('本身命名', []);spa

5.AngularJS 控制器（Controller） 用於控制 AngularJS 應用。用ng-controller 指明瞭控制器。雙向綁定

控制方法：.controller('控制器名字', function($scope) { $scope.變量= "值";}); $scope應用程序指向的HTML元素

<!DOCTYPE html>
<html lang="en" ng-app="todolist"><!--ng-app指令聲明angularJS管理邊界，命名爲todolist-->
<head lang="en">
    <meta charset="UTF-8">
    <title>todolist</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body style="padding: 10px;" ng-controller="TaskCtrl">
    <div class="input-group">
        <input ng-model="task" type="text" class="form-control"/>
        <span class="input-group-btn">
            <button class="btn btn-default" ng-click="add()">提交</button>
        </span>
    </div>
    <h4 ng-hide="tasks.length==0">任務列表</h4>
    <!--此處用ng-if="tasks.length>0"也能夠，區別是ng-hide不論表達式成功與否，h4標籤都會先在生成出來，但ng-if不會-->
    <ul class="list-group">
        <li ng-repeat="item in tasks track by $index" class="list-group-item">
            {{item}}
            <a ng-click="tasks.splice($index,1)">刪除</a>
        </li>
    </ul>
</body>
<script src="js/angular.min.js"></script>
    <script>
        var ap = angular.module('todolist',[]);//在js中要聲明todolist,使用angular.module
                ap.controller('TaskCtrl',function($scope){//須要控制angularJS內容，使用控制器.controller,控制器名字爲TaskCtrl,需在HTML中綁定
                    //自帶變量$scope
                    $scope.task="";//使用ng-model="task"。ng-model指令把元素值（好比輸入域的值）綁定到應用程序
                    $scope.tasks=[];//使用ng-repeat="item in tasks"
                    $scope.add=function(){
                        $scope.tasks.push($scope.task);//將task中內容添加到tasks數組中，js數組中不容許添加相同內容,經過track by $index用下標解決
                    }
                })
    </script>
</html>