Currently I learn AngularJS and knowing very basic knowledge of AngularJS. With AngularJS, we can easily display data into HTML document with less work by adding new HTML attributes that provided by AngularJS. Yes new HTML attributes!
Off course there are lot's of feature in AngularJS, please click here to learn more detail about AngularJS.
Let's try to create Hello World apps!
- Create new HTML project in Netbeans or your comfortable IDE and named it helloworld.
Note: In Netbeans IDE, the index.html file is automatically generated. Please create new index.html file if there's no index.html file in your helloworld project.
- In your index.html file, please reference AngularJS library. Please see below:
<!DOCTYPE html><html><head><title>Hello world!</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script></head><body></body></html>
Note: AngularJS library can be attach on your app by referencing the library URL into your app or you can download the AngularJS library here. If you download the library then you have to store it into your project and reference the app into that library. For example:
- Extend html element with new attribute called ng-app="" that provided by AngularJS. Please see below:
<!DOCTYPE html><html ng-app=""><head><title>Hello world!</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script></head><body></body></html>
- Type Hello world text inside body tag using AngularJS expressions {{'Hello world!'}}. Please see below:
<!DOCTYPE html><html ng-app=""><head><title>Hello world!</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script></head><body>{{'Hello world!'}}</body></html>
- Run your app by pressing keyboard with combination Shift+F6 buttons in Netbeans IDE
- TARRAAA....your web browser will display Hello world text like image below.
So guys, we are successfully created an AngularJS application! Congratulation to us! Cheers...
