AngularJS Tutorial - Part 1

In this part, we'll download the required libraries and write a hello world application using AngularJS.

As we are going to develop a web application, we'll need to write HTML, Javascript and CSS. Let's create a directory named 'js' and another named 'css' in the project root directory.

We'll use twitter-bootstrap for the front-end. Let's download the following css files and put them in the css directory that we previously created.
- bootstrap.min.css
- styles.css

bootstrap.min.css is the css library and styles.css contains some custom rules for the template being used in our project. We'll write any other custom css rules in this file.

We are done with css files and it's time to download the required Javascript libraries. Let's download AngularJS library from their website https://angularjs.org/ and put it in the js directory of our project.

Now, we need to write down the HTML file that'll be used as our base template. We'll use one of the templates listed in the twitter-bootstrap's documentation. Here is the link to the template: http://getbootstrap.com/examples/dashboard/

I've removed the unnecessary parts from the HTML, fixed the links to css and js files and put it as index.html in the project root directory. Here is the simplified  version https://github.com/rafiqnayan/api-browser/blob/e51a1835cf3afb59c163fc89f5af0d57170461fb/index.html

For simplicity, I'm not going to explain the css styles classes used in the html file. If you are interested to know more about twitter-bootstrap and it's components, you can browse their documentation.


We are done with the library setup and initial structure. If you open the index.html in your browser, you should see the following page



One last thing we'll do in this step is, make sure we've integrated the AngularJS library properly. To do so, we need to modify the index.html file and make these changes https://github.com/rafiqnayan/api-browser/commit/90d1767b11e4c719acca74198ff56265bbca4f45

We've added ng-app inside the html tag. This tells angular to create a AngularJS application whose scope will be the enclosing DOM elements of html tag. AngularJS will parse the DOM and create the application.

By writing {{ 'API' + ' Doc' }}, we are telling angular to join the strings 'API' and ' Doc' and print it.

If you reload the page in your browser you should see same output as before but this time using a bit AngularJS magic! Remove the ng-app from html tag and reload the page to see what happens. Also try changing the {{}} expression and see what happens.

So, in this part, we've done the following
- Downloaded the required CSS and JS library files
- Created a HTML file for project template
- Added AngularJS and declared a AngularJS application using ng-app
- Written a AngularJS expression and performed string concatenation


Next Post: Part 2
Previous Post: Part 0

Comments

Post a Comment

Popular posts from this blog

Run tasks in background in Spring

Why background task? There are tons of examples where we often need to run a task in background e.g. sending an email, sms or notification, writing some log in file etc. If a task is not required to maintain atomicity and can be executed after some delay, it's a good candidate to run in background.   How to run tasks in background in Java? In Java, the easiest way to run a task in background is to create a new thread and execute it. It's quite simple. Here is how to do this: new Thread(new Runnable(){ @Override public void run(){ // your background task } }).start(); It's easy! But there are some maintenance problem with the above code. The major problem is - there is no way to control how many background tasks we want to run simultaneously. For example, if 1000 users registers in your application at a time and you create 1000 background threads to send them a confirmation email, maybe you'll be in trouble. So you ne
Read more

Conditional field inclusion in Jackson and Spring Boot

When we write JSON API with spring boot, we often need to customize which fields should be included in our response JSON and which should not. For example, suppose we've a Model like the following: public class User {     private Long id;     private String name;     private String password;     private List<String> children;     // getters and setters here } Now we've the following controller: @RestController @RequestMapping("/api/users") public class UserController {     @GetMapping     public List<User> userList(){         User user = new User();         user.setId(10L);         user.setName("Rafiqunnabi Nayan");         user.setPassword("abcd");         user.setChildren(Arrays.asList("Child 1", "Child 2"));         return Arrays.asList(user);     }     @GetMapping("{id}")     public User userDetails(@PathVariable Long id){         User user = new User();         user.set
Read more

How to configure Wildfly 10 to use MySQL

Follow these steps to configure MySQL in Wildfly 10 Step 1 : Download MySQL connector jar from mysql downloads page . Step 2 : Go to modules\system\layers\base\com of your Wildfly home Step 3 : Create folder like mysql\main and go to mysql\main Step 4 : Place the downloaded connector jar in the main folder  Step 5 : Create a file named module.xml in the main folder and put the following content in it. Set the path variable so that it matches the name of the jar file. <?xml version="1.0" encoding="UTF-8"?> <module xmlns="urn:jboss:module:1.1" name="com.mysql">     <resources>         <resource-root path="mysql-connector-java-5.1.39-bin.jar"/>                  </resources>     <dependencies>         <module name="javax.api"/>         <module name="javax.transaction.api"/>     </dependencies> </module> Step 6 : Go to standalone\configuration dir
Read more