Prem Tiwari - - Angular JS, Jquery
Hello friend to i am going to share How To Build Modern Web Application with MEAN (Part II). In have share How to install MEANJS stack. By using MEAN stack you can build a real-world application and will get you started your apps very quickly.
Below is a basic list of things i want my users to do using MEAN. In bellow example i will explain how to create a simple application to add posts.
Adding Some Style
Getting Started
Start creating app, create index.html which will look like this. With bellow several lines of code, we have set up a new AngularJS application.
1 2 3 4 5 6 7 8 9 10 11 12 | Your Name : Hello {{name}} |
Getting User Input
Now i am going to create a form which will get user input. To do this, first we need to add a function to $scope variable.
1 2 3 | $scope.addPost = function(){ $scope.posts.push({title: 'A new post!', upvotes: 0}); }; |
Create a simple submit button which will executes addPost $scope function using the ng-click directive.
1 |
Create addPost.html page and add bellow code snippets.
1 2 3 4 5 6 7 8 9 10 11 12 |
Craete a aap.js file and add bellow code.
1 2 3 | $scope.addPost = function(){ $scope.posts.push({title: 'A new post!', upvotes: 0}); }; |
Adding Some Style
You can also add some style inf your angular apps by using some basic Bootstrap styling. Now change your index.html file to include Twitter Bootstrap along with a new form layout.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | Add New Posts |
Thank you for giving time on freewebmentor community. Please don’t forget to subscribe our newsletter or join us on Facebook to be the first to learn the next great thing from freewebmentor.
Tags: angular js, Freebies, MongoDB
