AngularJS – 跟著Google玩網頁！
今天馬老師要與大家分享的是一個前端開發的函式庫AngularJS，前面的文章中都有提到，因為近年來行動裝置的普及讓Javascript大為活躍，不過傳統的Javascript在相容性上、操作上都非常的不方便，所以才有了許許多多Javascript的函式庫與框架的誕生，例如：jQuery、KnockoutJS、GSAP、PaperJS…等，每個Javascript的函式庫和框架的大小、作用和目的都不盡相同，有的是為了特效；有的則是為了方便操作，那今天為何要跟大家分享AngularJS呢？因為…它是名牌！
為何說AngularJS是名牌呢？因為目前他是由Google來負責維護。初始版本是在2009年誕生的，比jQuery晚了三年，言下之意就會比jQuery好嗎？當然也不能這麼說，jQuery在目前還是一個非常火燙的前端開發函式庫，應該要說他們兩個在使用的架構和目的上會有所不同，這篇文章也來比較一下同樣的案例，在兩種語法上面撰寫的不同。
不過首先我們要知道基本的AngularJS開發方式，今天的案例我們利用JS Bin的線上開發網頁來說明，大家也可以到這個平台上來試著玩看看！如果需要利用AngularJS開發自己的網頁，也可以到AngularJS的官方網頁把JS下載到資料夾之後引用到網頁裡。
1. 首先點選Add library後選擇AngularJS Stable，這樣該平台就會加入AngularJS的函式庫進入頁面。
2. 在標籤中，加入ng-app的屬性，讓整份文件都可以使用AngularJS。
3. 接下來就可以在左手邊body標籤內開始輸入一些程式碼來測試，AngularJS在輸出方面有個基本的結構式「{{ }}」，大家輸入以下的程式碼來測試看看結果：
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>{{ '馬老師雲端研究室' }}</p>
<p>35+62={{ 35+62 }}</p>
<p>NT{{ 62000 | currency }}</p>
</body>
</html>
可以看到輸出的結果應該是：（在JS Bin上面看AngularJS輸出結果）
馬老師雲端研究室 35+62=97 NT$62,000.00
同樣的如果我們要利用jQuery來完成這樣的頁面，程式碼就會變成：（在JS Bin上面看jQuery輸出結果）
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p></p>
<p></p>
<p></p>
</body>
</html>
<script>
$("p:eq(0)").text('馬老師雲端研究室')
$("p:eq(1)").text('35+62=' + (35 + 62))
$("p:eq(2)").text('NT' + (numeral(62000).format('$ 0,0.00')))
</script>
請注意，為了要完成第三項貨幣型式的呈現，我們還必須去引用這個網站的jQuery Plugin才有辦法比較輕鬆的實現。從上面的案例可以看的出來jQuery是由HTML DOM來抓到對象，再針對對象做操作，而AngularJS不管顯示的效果為何，就是在需要有程式運算的地方出現，所以AngularJS也被稱為符合MVC結構的Javascript函式庫（MVC是一種寫程式的結構，全名是Model View Controller，大家可以上網Google就可以查到很多與MVC相關的資料），但如果你有進入官網，可以看到官網上他的標題是「AngularJS – Superheroic JavaScript MVW Framework」，翻譯成中文大概是「AngularJS是一個符合MV…Whatever什麼什麼隨便啦！的超級函式庫」，可以看出Google的惡搞功夫。
再來示範第二個案例，本案例利用購物行為來製作相關的頁面讓大家參考，程式碼如下：
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-init="stock=120;price=325;quantity=1;total=0">
<p>馬老師雲端研究室 滑鼠墊</p>
<p>剩餘：<span ng-model="stock">{{ stock-quantity }}</span>個</p>
<p>單價：<span ng-model="price">{{ price | currency:"NT$":0 }}</span>元</p>
<p>數量：<input type="number" min="0" max="{{ stock }}" ng-model="quantity"></p>
<p>總金額：<span ng-model="total">{{ price*quantity | currency:"NT$":0 }}</span></p>
</body>
</html>
輸出結果：（在JS Bin上面看AngularJS輸出結果）
在這個案例裡面有四個項目，分別是商品剩餘數量、單價、數量、總金額，使用者唯一可以改變的只有數量，但頁面中會自動運算剩餘數量和總金額，其中在語法body標籤中，加上了ng-init屬性，代表設定這幾個項目的預設值，stock（剩餘數量）120個、price（單價）325元、quantity（數量）1個，total（總金額）325元。接下來在span內的ng-model就是去綁定該定義項目，{{ }}則是顯示該項目或運算結果，另外貨幣格式的部分，也是用了一些設定讓貨幣在這個案例裡面顯示得更為接近台幣格式，另外還是用HTML5 input標籤的min和max來限制欄位內的值。 而這個案例如果轉換為jQuery的寫法，大概會是下面這樣子：（在JS Bin上面看jQuery輸出結果）
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>馬老師雲端研究室 滑鼠墊</p>
<p>剩餘：<span id="stock"></span>個</p>
<p>單價：<span id="price"></span>元</p>
<p>數量：<input type="number" min="0" ng-model="quantity" id="quantity"></p>
<p>總金額：<span id="total"></span>元</p>
</body>
</html>
<script>
var stock = 120;
var price = 325;
var quantity = 1;
var total = 325;
$("#stock").text(stock) $("#price").text('NT' + (numeral(price).format('$ 0,0'))) $("#quantity").val(quantity).attr(
"max", stock) $("#total").text('NT' + (numeral(total).format('$ 0,0'))) $("#quantity").change(function () {
quantity = $(this).val() newstock = stock - $(this).val() total = price * $(this).val() $("#stock").text(
newstock) $("#price").text('NT' + (numeral(price).format('$ 0,0'))) $("#total").text('NT' + (
numeral(total).format('$ 0,0')))
})
</script>
後記：以上兩個案例示範的是jQuery和AngularJS在撰寫頁面的不同，不過因為這篇文章原本就是要以AngularJS為主，所以挑的案例當然會是AngularJS比較佔優勢的內容，還是跟我常說的一樣，做不同的東西就要用不同的工具，用錯了工具不是做不到，但可能是會事倍功半的！另外文章中的程式碼，都是嵌入遠端的JS檔，所以也可以把整個程式碼複製到你熟悉的網頁開發軟體內，一樣會看到同樣的結果喔！
Indicators generate clutter within the pump room, and the metallic wire stands will rust if left in there for too lengthy.
Born in Dublin, he was a number one figure in the Irish Arts and Crafts Motion.
Excellent article. It’s extremely articulate and packed with valuable information. Many thanks for offering this content.
What’s the very best steakhouse in Cave Creek?
Appreciated the details offered in this entry. It’s extremely articulate and full of helpful details. Fantastic job!
Louie, Elaine (16 January 2013).
The operation of a pool pump is a captivating process.
You are so awesome! I don’t suppose I have read something like this before. So wonderful to discover another person with a few original thoughts on this subject. Seriously.. thanks for starting this up. This website is something that’s needed on the web, someone with a bit of originality.
The pump circulates the water, whereas the filter removes debris and impurities.
Ленинградская область выделяется многослойной геологической структурой, что определяет процесс создания скважин на воду особенным в каждом регионе. Территория обладает различие слоев и подземных пластов, которые требуют экспертный метод при выборе позиции и метки создания. Подземная вода может протекать как на малой уровне, так и погружаться на нескольких десятков, что создает затруднение работ.
Основной деталью, влияющих на выбор тип скважины (https://popugaychiki.com/nasos-vintovoj-pogruzhnoj-dlya-skvazhiny-kakoj-vybrat.html ), служит состав грунтов и местоположение глубинного источника. В Ленинградской области чаще всего сверлят артезианские скважины, которые обеспечивают доступ к незагрязненной и непрерывной воде из скрытых слоев. Такие скважины характеризуются надежным сроком использования и отличным качеством водоносных ресурсов, однако их постройка просит значительных средств и специального оборудования.
Методы создания в регионе включает использование современных машин и механизмов, которые могут управляться с твердыми породами и помогать избежать возможные осыпи грунта скважины. Крайне важно, что всегда нужно обращать внимание на экологически безопасные требования и правила, так как вблизи некоторых населённых мест расположены охраняемые водные зоны и заповедники, что заставляет особый подход к буровым действиям.
Водные запасы из глубоких источников в Ленинградской области характеризуется высоким качеством, так как она не подвержена от поверхностных загрязнений и содержит гармоничный состав составных элементов. Это считает такие скважины нужными для владельцев участков и компаний, которые прибегают к безопасность и качество систем водоснабжения.
You can see at a glance that the surface is smooth, so you’ll be able to just drive over it.
This process helps keep the water clear and clear.
All previous articles of be aware have been moved to the Information Archive.
Entry to the commune is by the D16 road from Allerey in the south passing by way of the village and continuing north-east to Thoisy-le-Désert.
Ленинградская область выделяется многослойной геологической конфигурацией, что делает задачу пробивки скважин на воду уникальным в каждом участке. Регион представляет собой различие слоев и подземных горизонтов, которые требуют профессиональный подход при нахождении зоны и уровня сверления. Водные ресурсы может находиться как на низкой глубокости, так и доходить до нескольких глубоких метров, что влияет на трудоемкость бурения.
Основной деталью, влияющих на выбор тип воды (https://www.vizd.ru/kak-samostoyatelno-ochistit-skvazhinu-ot-ila/ ), служит состав грунтов и глубина подземной воды. В Ленинградской области чаще всего создают глубокие скважины, которые гарантируют доступ к незагрязненной и непрерывной воде из скрытых слоев. Такие скважины отличаются длительным сроком эксплуатации и качественным качеством воды, однако их создание нуждается высоких вложений и профессионального инструментария.
Методы создания в регионе предполагает использование инновационных установок и технологий, которые могут управляться с каменистыми породами и помогать избежать возможные разрушения опор скважины. Следует отметить, что необходимо учитывать санитарные требования и правила, так как вблизи некоторых населённых мест расположены охраняемые водные зоны и защищенные зоны, что требует особый внимание к буровым мероприятиям.
Водные запасы из артезианских скважин в Ленинградской области характеризуется отсутствием загрязнений, так как она скрыта от поверхностных загрязнений и содержит гармоничный состав микроэлементов. Это делает такие водные источники нужными для частных домовладений и компаний, которые ценят безопасность и качество водообеспечения.
This post is amazing! Full of valuable information and very clear. Thank you for providing this.
He was also included in Poland’s squad for the UEFA Euro 2020, however made no appearances as the group suffered another early elimination after solely scoring a degree in their three group matches.
Rohina Phadnis, 16, who’s collaborating within the Nationwide Young Leaders Convention in Washington DC, makes a case for tolerance.
Cut a big piece of foil, and wrap round boot, taping in back to hold foil in place.
Truth be instructed, it’s so good that I binge-learn all of its chapters in a single day.
Бурение водяных скважин на водные ресурсы — это важнейший шаг в проектировании независимой системы водной системы загородного жилища. Этот подход включает предварительное обследование, исследование почвы и оценку подземных вод площадки, чтобы выбрать подходящее расположение для размещения скважины. Глубина скважины зависит от особенностей местности, что зависит от её разновидность: абиссинский колодец, скважина до первого водоносного слоя или артезианская – https://prom-info01.ru/magaloks-novoe-slovo-v-mire-kosmetiki/ . Правильно спроектированная скважина дает качественную и непрерывную подачу воды в при любых условиях, исключая риск обмеления и загрязнения. Технические достижения дают возможность автоматизировать использование скважины, делая проще её использование для семейного потребления.
По завершении бурильных работ необходимо устроить подачу воды, чтобы она была надёжной и надежной. Организация предполагает оснащение насосами, фильтрацию воды и разводку труб по дому. Также необходимо продумать автоматический контроль, которая будет следить за напор и потребление ресурса. Утепление в зимний период и постоянная эксплуатация в зиму также играют важную роль. С квалифицированной помощью к сверлению и монтажу дом обеспечит коттедж качественной водой, придавая удобство комфортной и удобной.
Создание колодцев на воду — это важнейший шаг в создании независимой системы водоснабжения загородного дома. Этот этап включает в себя технический анализ, исследование почвы и гидрогеологическое обследование территории, чтобы найти подходящее расположение для размещения скважины. Расстояние до воды зависит от структуры почвы, что влияет на её вид: мелкий источник, песчаный водозабор или глубинная – https://techno-voda.ru/poverhnostnyj-nasos-aquario-ajs-60a-fc-idealnoe/ . Правильно спроектированная водная скважина гарантирует чистую и бесперебойную поставку воды в при любых условиях, исключая риск осушения и попадания примесей. Новые методы позволяют автоматизировать процесс добычи воды, облегчая её эксплуатацию для повседневной жизни.
Когда скважина готова необходимо обустроить подачу воды, чтобы она прослужила долговечной и долговечной. Проектирование заключается в установку насосного оборудования, установку очистительных систем и развод водопроводной системы. Также требуется продумать автоматический контроль, которая будет обеспечивать уровень воды и расход жидкости. Сохранение тепла и стабильность функционирования в холода также крайне важны. С профессиональным подходом к сверлению и обустройству вы создадите коттедж комфортной системой, гарантируя комфорт насыщенной и комфортной.
Бурение глубинных источников на водные ресурсы — это важнейший шаг в обустройстве независимой системы водоснабжения дачного коттеджа. Этот подход предполагает технический анализ, геологическое изучение и исследование водных ресурсов участка, чтобы обнаружить подходящее расположение для сверления. Глубина источника зависит от грунтовых особенностей, что влияет на её категорию: песчаная скважина, песчаная скважина или артезианская – https://techno-voda.ru/obzor-servoprivoda-siemens-sqm50-543a8-i-ego/ . Грамотно устроенная водозаборная скважина обеспечивает качественную и стабильную подачу воды в любое время года, исключая опасность исчезновения водного ресурса и попадания примесей. Современные технологии обеспечивают упростить забор воды, значительно облегчая её внедрение для повседневной жизни.
Когда скважина готова необходимо обустроить систему водоснабжения, чтобы она оставалась максимально эффективной и практичной. Проектирование включает оснащение насосами, монтаж системы фильтрации и разводку труб по дому. Также необходимо запланировать автоматический контроль, которая будет обеспечивать напор и потребление ресурса. Защита скважины от замерзания и постоянная эксплуатация в зиму также остаются необходимыми. С правильным проектом к созданию источника и обустройству дом обеспечит жилище полноценным водоснабжением, придавая удобство комфортной и удобной.
Сверление глубинных источников на водные ресурсы — это основной процесс в организации автономной системы водоснабжения частного дома. Этот процесс предполагает предварительное обследование, исследование почвы и исследование водных ресурсов площадки, чтобы найти подходящее расположение для размещения скважины. Глубина источника зависит от структуры почвы, что влияет на её вид: мелкий источник, песчаная скважина или подземная – https://prom-info01.ru/obzor-invertornogo-dugovogo-svarochnogo-apparata-3/ . Грамотно устроенная водная скважина гарантирует чистую и постоянную подачу воды в всех сезонах, исключая риск пересыхания и загрязнения. Современные технологии дают возможность настроить автоматический режим подачу воды, делая проще её использование для домашнего хозяйства.
По завершении бурильных работ необходимо устроить подачу воды, чтобы она работала надёжной и долговечной. Настройка содержит размещение насосного агрегата, подключение фильтров и проведение водопровода. Также следует рассчитать автоматический контроль, которая будет следить за напор и объём потребляемой воды. Сохранение тепла и обеспечение её бесперебойной работы в холода также имеют значение. С квалифицированной помощью к бурению и монтажу удастся получить частный участок полноценным водоснабжением, гарантируя комфорт насыщенной и комфортной.
A punchbowl waterfall happens when water from a wider river squeezes through a narrower space and out right into a plunge pool.
There appeared to be no serious threat from the south – certainly Basic Franz Halder, Chief of Army General Staff, toyed with the idea of attacking Paris instantly to knock France out of the struggle in a single blow.
Eberhard, Robert (September 2011).
One other Britten & Gilson employee was Mary Lowndes whom he met in 1893.
Later in life, varicella could reactivate with stress or age because the herpes zoster virus, or shingles, which we’ll discuss within the Shingles section.
Different archaeological proof means that the first true glass was made in coastal north Syria, Mesopotamia or Egypt.