Angular使用筆記2_AngularJS(Angular1.x)簡單起手程式

https://oscarvillarreal.com/2013/05/07/5-reasons-to-use-angularjs-in-the-corporate-app-world/

根據之前blog篇章已經會得知你到底該掌握的angular是哪一種了

在Angular.Js官方網站公告https://angularjs.org/，AngularJS 的支援已於 2022 年 1 月正式終止。

不過部分早期系統為了穩定，仍可能會遇到這類JS框架。

初始建立一個簡易練習的Angular.Js的程式

可以先點Previois Versions

這邊可以點選公司團隊開發維運系統所指定的版本

https://code.angularjs.org/

這邊挑選1.6.4版本來做小試身手，可點angular-1.6.4.zip把整包給下載下來後續做引入使用。

https://code.angularjs.org/1.6.4/

每個版本點選doc就可以看到對應版本的api文檔

https://code.angularjs.org/1.6.4/docs/api

https://code.angularjs.org/1.6.4/docs/guide/index

若透過CDN來導入的也可藉用其google官方CDN網址，自行更改版號來切換對應URL即可。

https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js

這邊用vscode來開發

• 步驟 1：開啟整個專案資料夾
  在 VS Code 按下 Ctrl + K，接著按 Ctrl + O，或使用選單 File → Open Folder。
• 步驟 2：開啟 HTML 檔案
  從左側 Explorer 開啟 myangular1.html。
• 步驟 3：啟動 Live Server
  點擊右下角 Go Live，或對 HTML 檔案按右鍵，選擇 Open with Live Server。

覽器會開啟類似：

http://127.0.0.1:5500/myangular1.html

練習1.作用域範圍指定

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的AngularJs練習1</title>
    <script type="text/javascript" src="./angular-1.6.4/angular.min.js" ></script>
</head>
<body>
    {{'hi, angular test'}}
</body>
</html>

在最上層<html>...</html>去設置ng-app並透過雙大花括號來做單向綁定。

ng-app定義了Angular 應用程式的根元素，在網頁加載完成時會自動引導應用程式初始化，這樣開發者才能在網頁中使用各種Angular 提供的功能。

在Angular中常用到的基本表達式{{}}，主要語法就是於雙括號中的內容，表達式會進行計算跟邏輯處理並結果展示在此。

練習2.作用域範圍指定

Ref:

https://code.angularjs.org/1.6.4/docs/api/ng/directive/ngApp

https://code.angularjs.org/1.6.4/docs/guide/databinding