In my previous post we have seen how to setup AngularJS & Bootstrap in your development machine.
If you are not clear with introduction of AngularJS & Bootstrap then first please review my following posts.
Please post your comments or questions. Thank you !
If you are not clear with introduction of AngularJS & Bootstrap then first please review my following posts.
- What Is AngularJS? Introduction and Basic Example.
- What is Bootstrap? Setup and Basic Template Example.
In this post we see one simple AngularJS + Bootstrap small example and it's page development step by step. Please check running page demo here : Click Here
We never get final expected webpage in straight one writing so i always go step by step approach of any webpage or application development.
Step 1: First step is to create webpage with basic bootstrap template just to see our bootstrap require references are added proper or not.
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body></html>
Step 2 : Once you check webpage change webpage title and webpage header"AngularJS & Bootstrap Example"
<title>AngularJS & Bootstrap Example</title><body>
<h2>AngularJS + Bootstrap Example</h2>
Step 3 : Go to the Bootstrap documentation page and find the component which you want to use in your page. I am going to use Panel for my "Order Summary" page so i will go to following link and get the sample of Panel. https://getbootstrap.com/docs/3.3/components/#panels
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Step 4 : Change panel "Header" , "Content" & "Footer" as per following code sample.You will see that i have used Bootstrap CSS in most of all HTML elements like Input,Label,Panel which give nice view on webpage.
Step 5 : After you test your Page layout now it's time to add AngularJS Directives as per following
- Add reference of AngularJS library in your page
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
- Add ng-app directive which define root of Angular App
- Add ng-model="price1" , ng-model="price2",ng-model="price3" which bind HTML element with data value.
- Add Total as Angular Expression like "{{ price1 + price2 + price3 }}"
AngularExample2.html
No comments:
Post a Comment