By: Prem Tiwari | Last Updated: | In: 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 | <!DOCTYPE html> <html lang="en-US"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app=""> <p>Your Name : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html> |
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 | <button ng-click="addPost()">Submit</button> |
Create addPost.html page and add bellow code snippets.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="en-US"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <form ng-submit="addPost()"> <input type="text" ng-model="title"></input> <button type="submit">Submit</button> </form> </body> </html> |
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 | <html> <head> <title>Flapper News</title> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> <script src="app.js"></script> </head> <body ng-app="flapperNews" ng-controller="MainCtrl"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="page-header"> <h1>Add New Posts</h1> </div> <form ng-submit="addPost()" style="margin-top:30px;"> <h3>Add a new post</h3> <div class="form-group"> <input type="text" class="form-control" placeholder="Title" ng-model="title"></input> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </body> </html> |
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.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
