Projects and Tutorials in AngularJS
We have developed Shopping Cart Application in AngularJS .Tutorial: Develop Shopping Cart. A tutorial is made to help development for each step starting from scratch. A Shopping Cart Application is deployed using AngularJS, PHP and MySql. Web Server used is Xampp. In this page Link for tutorials and YouTube Videos and Blogs is given at the end of this page.
Another online AngularJS application is developed to learn each features of AngularJS. Project and Tutorial is Learn Online AngularJS in One Day . In this each feature of Angular is demonstrated. You can edit the code, watch the output and learn the basic of AngularJS. Link for tutorials and YouTube Videos and Blogs is given at the end of this page.
We have also developed an Online Resume Builder in AngularJS. Link for Project is Online Resume Builder. In this we can add name,address of person and select Resume Heads and fill the relevant details. An HTML file is created and is displayed as output on screen. Resume can be printed or send as Email or copy in clipboard and can be pasted to other application like word for editing.
Shopping Cart Application.
In this blog we are showing the steps involved to develop an application in AngularJS. We have taken a project Shopping Cart Application. First we list down the Features and start developing an application.A YouTube tutorial for coding is associated with each steps.We have also developed an Online Resume Builder in AngularJS. Link for Project is Online Resume Builder. In this we can add name,address of person and select Resume Heads and fill the relevant details. An HTML file is created and is displayed as output on screen. Resume can be printed or send as Email or copy in clipboard and can be pasted to other application like word for editing.
Shopping Cart Application.
Setup AngularS in Eclipse
First we need to setup AngularJS. Integrated Development environment is Eclipse. Setup Xampp Server with MySql Database. And create PHP files for CRUD operation.
First we need to setup AngularJS. Integrated Development environment is Eclipse. Setup Xampp Server with MySql Database. And create PHP files for CRUD operation.
Test my First AngularS app in Eclipse
First we develop My First App in AngularJS. We start with Eclipse as IDE and Create an empty AngularJS project. Create a blank HTML Pages. Write as Controller as JavaScript. Load AngularJS libraries. Include all the files like HTML as pages as View Eg. index.html, JavaScript files as controllers files, CSS file and AngularJS Libraries. Now execute index file.
First we develop My First App in AngularJS. We start with Eclipse as IDE and Create an empty AngularJS project. Create a blank HTML Pages. Write as Controller as JavaScript. Load AngularJS libraries. Include all the files like HTML as pages as View Eg. index.html, JavaScript files as controllers files, CSS file and AngularJS Libraries. Now execute index file.
Overview of Shopping Cart Application.
Overview of Shopping Cart showing list of features to be developed in AngularJS. Now we will be demonstrating which all pages and features we will be developing. like creation of Home pages with animations. login and register page. Load Items images from server and display in pages. Create PHP scripts for CRUD operations. Sorting and filter of Items. Add Items to Cart and tracking of Items. And many others features using AngularJS.
Overview of Shopping Cart showing list of features to be developed in AngularJS. Now we will be demonstrating which all pages and features we will be developing. like creation of Home pages with animations. login and register page. Load Items images from server and display in pages. Create PHP scripts for CRUD operations. Sorting and filter of Items. Add Items to Cart and tracking of Items. And many others features using AngularJS.
Now let us start with the development. In this tutorial we will be showing the Overview of Shopping Cart Application to be developed. Each feature is showing like home page with list of items,add items to Cat,filter,sort and resize images. payments and tracking etc. And later demonstrate page by page and tables linked to each page.
Create Template for menu.
Create Custom Template for menu. For any application we have to create a Home page and a menu page or a template. We can create a Template for this. This template can be included in other html pages. It will show same look like page in all html pages. Meaning It will have a header, footer, left and right panels with some relevant information. And the same information can be shown in all HTML pages. CSS is used to align panels in pages.
Create Custom Template for menu. For any application we have to create a Home page and a menu page or a template. We can create a Template for this. This template can be included in other html pages. It will show same look like page in all html pages. Meaning It will have a header, footer, left and right panels with some relevant information. And the same information can be shown in all HTML pages. CSS is used to align panels in pages.
Now we code HTML page showing a menu in AngularJS. We have created a Template in previous tutorial showing heading, footer, left, right and center panels. Now we code using ng-template,ng-view and ng-route. ng-template is used to load template and ng-view is used to show the view. ng-route is used to direct respective view pages.
Create CRUD operation in XAMPP Server.
Start with Xampp Server. Also start MySql database. Create PHP files that will be used for CRUD operations in AngularJS. Now we write a simple PHP script and save in server to insert and retrieve data. And show in HTMP page.
Start with Xampp Server. Also start MySql database. Create PHP files that will be used for CRUD operations in AngularJS. Now we write a simple PHP script and save in server to insert and retrieve data. And show in HTMP page.
Once PHP files are created we filter and sort the data to get the required data. First we create a items page. And setup routing to Items Page from menu. Create JavaScript as controller as con_items. A PHP script having SQL query to get data from MySQL is called from controller. ng-repeat directive is used to get multiple rows of items. The data received is filtered, re order and image is resized.
Create Master and Details link.
A supplier sells a particular list of Items. On select of Items from Items page list of supplier who supply the selected item is shown with their own price. One can add the item to cart for the supplier. We define two views as Items.html and seller.html. Item code is passed to seller.html
Animation Flip and Slide Images. In this tutorial we create Home Page for Shopping Cart Application. Here we are demonstrating the sliding images and Flip animation of images.
Create Modal Login Page. In this tutorial we are demonstration for creation of dialog page. Login screen is created as Login Page. Once user name is entered respective data is selected from database and user name is shown.
Update Login Account Details.
In this video we update the user account details like user name , password etc.
Register User & Form Validation. Create New user and register.
Here we will be creating Register User Entry screen with all possible validations. ngMessage directive is used.
Shopping Cart Tracking using group by filter.
In this tutorial we are showing the tracking details for the user enter in login page. Tracking details are grouped for the list of items aer payment is made.
Move data between two controllers.
List of category code is listed in left panel its controller is category. Once the category is selected it is updated in $rootScope.fil and list of items is displayed based on category code is associated for the items. Items list have a items controller.
Create Right Panel showing Offers and with Images
Projects and Tutorials Link:
We have developed Shopping Cart application in AngularJS. Please click on this link for YouTube Videos Develop Shopping Cart. Click on blog for Develop Shopping Cart Blog .
Another tutorial is developed "Online AngularJS as Angular learning tool". A small program is written to under stand each feature of AngularJS. Learn in One Day Click on link for Online AngularJS Tool Learn Online AngularJS in One Day.
Another tutorial is developed to understand the basic concepts of AngularJS . Click on YouTube Tutorial for each features of AngularJS Learn Basics . And also for blog Learn Basics Blog
Create Resume Builder Online Resume Builder. In this we can add name,address of person and select Resume Heads and fill the relevant details. An HTML file is created and is displayed as output on screen. Resume can be printed or send as Email.
Create Resume Builder Online Resume Builder. In this we can add name,address of person and select Resume Heads and fill the relevant details. An HTML file is created and is displayed as output on screen. Resume can be printed or send as Email.