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.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: angular js, Freebies, MongoDB
