Angular超級入門（一）【背景介紹、框架對比】

時間 2019-11-10

標籤 angular 超級入門背景介紹、框架對比欄目 AngularJS 简体版

原文原文鏈接

咱們都知道，JavaScript有衆多的框架，好比初學會jQuery、Bootstrap，Ajax等等。那麼稍微重量級一些的Angular.js框架又是作什麼用的呢？javascript

【背景梳理】html

一、jQuery優勢【重點關注代碼簡化】：（一）將冗長的js語句進行代碼簡化；（二）對不一樣瀏覽器進行代碼轉換和適配（解決舊IE顯示與chrome、firefox差異的問題）。java

例如原始的js代碼爲：jquery

document.getElementById("div_id_1").innerHTML="banana";

運用jQuery框架後，代碼爲：web

$("#div_id_1").text("apple");

二、Bootstrap特色【重點關注界面美化】：（一）簡化優美界面的開發；（二）對不一樣設備進行適配，使得手機、平板和電腦上的顯示一樣出色。ajax

Bootstrap經過區分柵格的方式，當屏幕寬度不夠的時候，相同行的柵格並做一列，從而達到不更改每一個各自內容而適配不一樣設備的目的。相應的，Bootstrap使用了不少倒圓角、陰影的方式美化了界面，並把在WEB端設計困難的按鈕類和其它控件進行標準化，使用簡單。chrome

三、Ajax特色【重點爲不刷新頁面獲取數據，異步調用】：不刷新頁面進行後端數據讀取，使得聊天程序、更新程序等成爲可能。缺點：可能被websocket取代。後端

<html>
<head>
    <script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState===4 && xmlhttp.status===200){
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","http://www.w3school.com.cn/ajax/demo_get.asp?t=" + Math.random(),true);
        xmlhttp.send();
    }
    </script>
</head>
<body>
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">請求數據</button>
    <div id="myDiv"></div>
</body>
</html>

當按下按鈕button的時候，瀏覽器並不會刷新整個頁面，而會去後端地址http://www.w3school.com.cn/ajax/demo_get.asp?讀取數據，並填充到div控件當中。瀏覽器

四、結合框架應用：基於jQuery的Ajax代碼：websocket

<!DOCTYPE html>
<html>
<head>
    <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $('#test11').load('http://www.w3school.com.cn/example/jquery/demo_test.txt');
            })
        })
    </script>
</head>
<body>
    <h3 id="test11">請點擊下面的按鈕，經過 jQuery AJAX 改變這段文本。</h3>
    <button id="btn1" type="button">得到外部的內容</button>
</body>
</html>

相關標籤/搜索

每日一句

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