angularjs
1. Install Node.js
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
2. Install Bower using NPM
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
Step 1 : เริ่มต้นกับ AngularJS
สร้างโปรเจ็ค 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
Step 2 : Create index.html
ต่อมา สร้างไฟล์ 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