First of all, you need to install node.js on your system. Use following set of commands to add node.js PPA in your Ubuntu system and install it.
$ sudo apt-get install python-software-properties $ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - $ sudo apt-get install nodejs
Make sure you have successfully installed node.js and npm on your system
$ node --version $ npm --version
After installation of node.js and npm on your system, use following commands to install bower.
$ sudo npm install -g bower
Now, You have successfuly installed bower. Let’s check the installed version of bower on your system using following command.
$ bower --version 1.8.0
Angular คือ client-side MVC/MVVM Framework ด้วย JavaScript เหมาะสำหรับเว็บแนว Single Page Applications (SPA) พัฒนาโดย Google
สร้างโปรเจ็ค AngularJS ขึ้นมา ผมทำการตั้งชื่อว่า hello-ng ภายในประกอบด้วยไฟล์ 2 ไฟล์คือ bower.json และ package.json
mkdir hello-ng cd hello-ng touch bower.json
ไฟล์ bower.json
{ "name": "hello-ng", "version": "0.0.1"}
ต่อมา ทำการดาวน์โหลด AngularJS จากเว็บไซต์หลักได้เลย มีทั้งการดาวน์โหลดไฟล์ JavaScript หรือว่าติดตั้งผ่าน bower
สำหรับบทความนี้ใช้วิธีติดตั้งผ่าน Bower ด้วยคำสั่ง
bower install angular --save
ไฟล์ AngularJS จะถูกโหลดไว้ที่โฟลเดอร์ bower_components
ต่อมา สร้างไฟล์ index.html ขึ้นมา และลิงค์ไฟล์ AngularJS และไฟล์ app.js ซึ่งจะเอาไว้เขียนโค๊ด JS ของเรา ดังนี้
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello AngularJS</title></head><body> <script src="bower_components/angular/angular.min.js"></script> <script src="js/app.js"></script></body></html>
ทำการเพิ่มแท็ก ng-app="myApp" ใส่ไว้ภายใน element body ดังนี้
<body ng-app="myApp"> <div ng-controller="MainController"> {{ message }} </div></body>
จากด้านบน เป็นการ Setup Angular Project โดยกำหนดให้ชื่อว่า myApp
ต่อมาทำการสร้างไฟล์ js/app.js ขึ้นมา ดังนี้
var myApp = angular.module('myApp', []);myApp.controller('MainController', function($scope) { $scope.message = "Hello AngularJS";});
ทดสอบ รันเซิฟเวอร์ จะเห็นว่าหน้าเว็บ ตรงส่วน {{ message }} จะโชว์ข้อความว่า Hello AngularJS