Introduction:
This is continuation of article NOSQL – FIREBASE WITH ANGULAR JS -2.0 – PART-1 , here we will see CRUD operation with Firebase and using Angular JS 2.0. We will see real time example in this article to understand the Firebase concept.
Basic requirements:
To continue this article one should know basics of Angular JS and Firebase concepts. To understand what is Firebase you can refer this article NOSQL – FIREBASE WITH ANGULAR JS -2.0 – PART-1
Concept:
This article has basic database (project) called BookMyShow which contains ShowClass as subcategroy. Using this we can add Show information and type of show available by using Angular JS and that stores in Firebase.
Creating Angular Project:
Step 1: Generate an new Angular JS Project called – BookMyShow using command ng new BookMyShow and run ng serve to start server at localhost:4200.
Step 2: After creating project – head over fire base and create new project ‘BookMyShow’ as shown below image -1.
Image-1 : BookMyShow project in Firebase.
Step 3: Open terminal – npm install firebase angularfire2 –save which intern installs required data for Firebase connection. Initialize the Angular by copying the content from website script information from Firebase and paste it in angular project as show in image-2.
Image-2 : Setup Angular Project.
Step 4: Rendering list : Here I added few branches of data in Firebase and I will rendering those by calling list method for each parent nodes. Here I have rendered the two lists that is show class and theaters.
Step 5: Adding object: Here adding new show class as platinum class to the list of show classes. By calling a push method on list of show classes. After pushing value to Firebase, we can see there will be new key and value will be added, hence we should use the name property instead of value.
Step 6: Updating : Here updating an existing theater name to some other name, by using update method on the object element by calling on respective parent node. After calling update method we can see without reloading page- object will be updated in browser by firebase. That is the key feature of Firebase – if we want to implement this feature we may need to write lot of code using SignalR concept.
Step 7: Removing an object: Here we can remove the theater object which we added initially, this can be achieved by calling a method remove on object element by passing appropriate node name. Remove method will return a promise, so that we can use then method to show alert message on removing the element and which intern gives the catch method to catch any unexpected errors. In Image 3 and Image – 4 shown Angular component result for the same article.
Image 3: CRUD operation result on Firebase.
Image 4: CRUD operation – Angular component.
Conclusion: Using Firebase with Angular JS we see CRUD operations. compared to SQL programming – noSQL has more flexible and performance. Using same we can work on the more complex queries like join, filter etc. Thanks.
Happy coding 🙂