node（6）angular介紹

時間 2019-12-07

原文原文鏈接

1、angular 的介紹javascript

AngularJS[1] 誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。css

AngularJS 是一個 JavaScript框架。它是一個以 JavaScript 編寫的框架。它可經過 <script> 標籤添加到HTML 頁面。html

AngularJS 經過指令（directive）擴展了 HTML，且經過 表達式{{}} 綁定數據到 HTML。前端

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中。vue

庫和框架的區別java

類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等react

框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout、sproutcore react vue等angularjs

下載angular.js文件數組

http://cdn.code.baidu.com/ 百度靜態資源庫app

https://angularjs.org/ angular 官方網站 1.x版本的網站

https://angular.io/ 2.x 4.x 網站

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
</head>
<body>
       <h1>{{5+6}}</h1>
     <script type="text/javascript">
       var app = angular.module("app",[]);
     </script>
</body>
</html>

提示：①angular當中有指令之說，ng-XX開頭，ng表明的是angular的縮寫；

②ng-app:這個指令通常是放在HTML標籤這裏，它暗示着整個靜態頁面是一個單頁面應用；

這個頁面當中只能有一個ng-app指令；ng-app = 「app」,這個應用的名稱

③var app = angular.module("app",[]);

Angular.js文件對外暴露了一個angular的對象，這個對象有一個方法叫作module（「應用的名稱」，[]）

數組當中第二個參數是數組，表明的是你這個應用的依賴；

④模板表達式：{{}},這裏面能夠寫一些簡單的數學運算。+ - * / 表達式不能爲變量、if、for這些不行

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
</head>
<body>
       <h1>{{6+6+6}}</h1>

      <div ng-controller="Mainctr as mc">
            <h1>{{mc.name}}</h1>
            <button ng-click="mc.add()">Add</button>
            <h2>{{mc.age}}</h2>
            <button ng-click="mc.minus()">minus</button>
       </div>
     <script type="text/javascript">
       //angular對象打點module方法  應用的名稱  數組暫時爲空，它表明的含義是你這個應用須要的依賴的模塊
       var app = angular.module("app",[]);
        //app對象打點使用controller函數：會建立一個控制器類 ，還有一個還有一個函數你能夠認爲初始化函數
       app.controller("Mainctr",[function () {
             this.name = "小明";
             this.age = 10;
             //添加方法 加的方法
             this.add = function  (argument) {
                 this.age+=10;
             }
            //減的方法  
             this.minus = function  (argument) {
                 this.age-=10;
             }
       }])

     </script>
</body>
</html>

提示：①返回的app對象它有一個方法叫作controller(「MainCtr」,[function(){

}])；它至關於一個類

②若是你想實例化這個類的實例必需要用 ng-controller指令：所有的指令都是嵌套在標籤之中

③實例對象的時候 MainCtr as mc

④ng-click = 「」;須要添加引號

總結：剛纔所有的操做，你會發現，咱麼根本就沒有操做dom，你會發現數據發生變化，視圖跟着發生變化

數據發生變化-視圖發生變化

<h1>{{1+2}}</h1>
     <div ng-controller="Mainctr as mainctr">
          <button ng-click="mainctr.add()">add</button>
          <span>{{mainctr.a}}</span>
          <button ng-click="mainctr.minus()">minus</button>
          <div class="box" ng-style={'width':mainctr.a+"px"}>
          </div>
          <span ng-style={"font-size":mainctr.a+"px"}>123</span>
     </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);
        //聲明一個控制器的一個類
        app.controller("Mainctr",[function  (argument) {
              this.a = 10;
              //添加ADD方法
              this.add = function  (argument) {
                   this.a +=10;
              }
              //添加一個減的方法
              this.minus = function  (argument) {
                  this.a-=10;
              }
        }])
    </script>

提示：玩的是‘數據’。ng-style能夠設置樣式，可是須要注意的是value是一個JSON

數據的雙向綁定

<div ng-controller="MainCtr as mainctr">
          <h4>{{mainctr.a}}</h4>
          <!-- 數據的雙向綁定 -->
          <input type="text" ng-model="mainctr.a">
          <!-- 是否購買保險 -->
          <p>
             是否買保險：<input type="checkbox" ng-model="mainctr.b">
             {{mainctr.b?"買保險":"滾蛋"}}
          </p>
          <!-- 性別 -->
          <p>
            <input type="radio" value="男" ng-model="mainctr.sex">男
            <input type="radio" value="女" ng-model="mainctr.sex">女
            <input type="radio" value="未知" ng-model="mainctr.sex">未知
            <span>{{mainctr.sex}}</span>
          </p>
          <!-- range條 -->
          <p>
           <input type="range" min="0"  max="255" ng-model="mainctr.range"/>
{{mainctr.range}}
          </p>
    </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);
        app.controller("MainCtr",[function  (argument) {
                 this.a =123;
                 this.b = true;
                 this.sex = "未知";
                 this.range = 20;
        }]);
    </script>

提示：數據的雙向綁定是經過ng-model進行數據的雙向的綁定；

調色板

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
    <style type="text/css">
        .box{
             position: relative;
             width: 200px;
             height: 200px;
             background:pink;
        }
    </style>
</head>
<body>
    <div ng-controller="MainCtr as mainctr">
        <div class="box" ng-style="mainctr.getRGBA()">

       </div>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.R">
           <span>{{mainctr.R}}</span>
       </p>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.G">
           <span>{{mainctr.G}}</span>
       </p>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.B">
           <span>{{mainctr.B}}</span>
       </p>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.A">
           <span>{{mainctr.A}}</span>
       </p>
    </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);
        app.controller("MainCtr",[function  (argument) {
                //雙向綁定的數據RGBA
                this.R = 0;
                this.G = 0;
                this.B = 0;
                this.A = 0.5;

                //添加一個RGBA的方法
                this.getRGBA = function  (argument) {
                    return {"background":"rgba("+this.R+','+this.G+','+this.B+','+this.A+")"}
                }
        }]);
    </script>
</body>
</html>

微博的發佈框

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
    <style type="text/css">
        .waring{
             color:red;
        }
    </style>
</head>
<body>
      <div ng-controller="MainCtr as mainctr">
          <textarea rows="20" cols="20" ng-model="mainctr.content">

          </textarea>
          <p>
           共<span ng-class="{'waring':mainctr.content.length>=140}">{{mainctr.content.length}}</span>/140個字
           <button ng-disabled="mainctr.content.length>=140">發佈</button>
         <button ng-disabled="mainctr.content.length==0" ng-click="mainctr.clear()">清空</button>
          </p>
      </div>
      <script type="text/javascript">
        var app = angular.module("app",[]);
        app.controller("MainCtr",[function  (argument) {
            this.content = "";
            this.clear = function  (argument) {
                 this.content = "";
            }
        }]);
      </script>
</body>
</html>

ng-repeat循環

概述：在angular當中標籤部分，能夠用ng-repeat你能夠認爲是for循環；

<!DOCTYPE html>
<html lang="en" ng-app = "app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
</head>
<body>
     <div ng-controller="Mainctr as mainctr">
           <ul ng-repeat="item in mainctr.hobby">
               <li>{{item.name}}</li>
           </ul>
     </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);

        app.controller("Mainctr",[function  (argument) {
           this.hobby = [{"name":"小明"},{"name":"大明"},{"name":"老明"}];
        }]);
    </script>
</body>
</html>

小小學生管理系統

<!DOCTYPE html>
<html lang="en" ng-app = "app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
    <style type="text/css">

      table,tr,td{
         border:1px solid black;
         border-collapse:collapse;
      }
      tr:nth-child(2n){
        color:purple;
      }
      .addStudent{
          position: fixed;
          top: 0;
          right: 10px;
      }
    </style>
</head>
<body>
     <div ng-controller="Mainctr as mainctr">
        <div>
         <table>
            <tr>
                  <td>學號</td>
                  <td>姓名</td>
                  <td>年齡</td>
                  <td>性別</td>
                  <td>刪除</td>
            </tr>
            <tr ng-repeat="item in mainctr.students track by $index">
                <!-- 學號 -->
                <td>
                  <span ng-dblclick="item.isShow=true" ng-show="!item.isShow">{{item.id}}</span>
                  <input type="text" ng-show="item.isShow" ng-blur="item.isShow=false" ng-model="item.id">
                </td>
                <!-- 姓名 -->
                  <td>
                  <span ng-dblclick="item.ShowName=true" ng-show="!item.ShowName">{{item.name}}</span>
                  <input type="text" ng-show="item.ShowName" ng-blur="item.ShowName=false" ng-model="item.name">
                </td>
                <!-- 年齡 -->
                 <td>
                  <span ng-dblclick="item.ShowAge=true" ng-show="!item.ShowAge">{{item.age}}</span>
                  <input type="text" ng-show="item.ShowAge" ng-blur="item.ShowAge=false" ng-model="item.age">
                </td>
                <!-- 性別 -->
                 <td>
                  <span ng-dblclick="item.ShowSex=true" ng-show="!item.ShowSex">{{item.sex}}</span>
                  <input type="text" ng-show="item.ShowSex" ng-blur="item.ShowSex=false" ng-model="item.sex">
                </td>
                <td ng-click="mainctr.remove(item.id)">刪除</td>
            </tr>
         </table>
        </div>
           <!-- 下面是添加學生的佈局 -->
            <div class="addStudent">
                   <p>
                      學號:<input type="text" name="" ng-model ="mainctr.formData.id">
                   </p>
                    <p>
                      姓名:<input type="text" name="" ng-model ="mainctr.formData.name">
                   </p>
                   <p>
                      年齡:<input type="text" name="" ng-model ="mainctr.formData.age">
                   </p>
                    <p>
                      性別:<input type="text" name="" ng-model ="mainctr.formData.sex">
                   </p>
                   <p>
                      <button ng-click = "mainctr.addStudent()">添加學生</button>
                   </p>
           </div>
     </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);

        app.controller("Mainctr",[function  (argument) {
              this.students = [
                   {"id":0,"name":"賈成豪","age":18,"sex":"男"},
                   {"id":1,"name":"小青","age":38,"sex":"女"},
                   {"id":2,"name":"劉銘","age":28,"sex":"男"},
                   {"id":3,"name":"小豬","age":68,"sex":"男"}
              ];

              //數據的雙向綁定
              this.formData = {
                   "id":"",
                   "name":"",
                   "age":"",
                   "sex":""
              }
              //添加學生
              this.addStudent = function  (argument) {
                 this.students.push(this.formData);
              }
              //刪除的方法
              this.remove = function  (id) {
                    var i = 0;
                   while(i<this.students.length){

                     if(this.students[i].id==id){
                       this.students.splice(i,1);
                     }
                     i++;
                 }
              }
        }]);
    </script>
</body>
</html>

1. Angular 6的新特性介紹
2. Angular介紹1
3. Angular Material介紹
4. angular 介紹
5. 【angular】angular框架介紹
6. Node介紹
7. Node-webkit 介紹
8. 01 - node - 介紹
9. node介紹
10. Node介紹——什麼是Node？
更多相關文章...
• 網站主機介紹 - 網站主機教程
• XML DOM - Node 對象 - XML DOM 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

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