AngularJS অন্তর্ভুক্ত (AngularJS Includes)
AngularJS এ, আপনি এইচটিএমএল এ এইচটিএমএল ফাইল অন্তর্ভুক্ত করতে পারেন.
এইচটিএমএল ভবিষ্যত এইচটিএমএল এ অন্তর্ভুক্ত
এইচটিএমএল এ এইচটিএমএল এর একটি portion অন্তর্ভূক্ত দুর্ভাগ্যবশত এখনো পর্যন্ত supported না।
এইচটিএমএল ইমপোর্ট করে W3C suggestion. http://www.w3.org ভবিষ্যৎ ভার্সনগুলোর জন্য প্রযোজ্য। (With
<link rel="import" href="/path/navigation.html">
সার্ভার সাইড অন্তর্ভুক্ত (Server Side Includes)
অধিকাংশ ওয়েব সার্ভার সার্ভার সাইড ইনক্লুডস (এসএসআই) অন্তর্ভুক্তকরণ সমর্থন করে।
এসএসআই এর মাধ্যমে, আপনি আপনার পেজ ব্রাউজার এ পাঠানোর আগেই এইচটিএমএল এ এইচটিএমএল অন্তুর্ভূক্ত করতে পারবেন।
php require("navigation.php"); ?>
ক্লায়েন্ট সাইড অন্তর্ভুক্ত (Client Side Includes)
এইচটিএমএল এ এইচটিএমএল অন্তর্ভুক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করার জন্য অনেক উপায় আছে.
সবচেয়ে সাধারণ ভাবে, এইচটিটিপি (http) রিকুয়েস্ট ব্যবহার করে (AJAX) সার্ভার থেকে তথ্য সংগ্রহ করে এবং এইচটিএমএল এর তথ্যগুলো innerHTML এ write
AngularJS সাইড অন্তর্ভুক্ত (AngularJS Side Includes)
AngularJS সঙ্গে, আপনি ng-include নির্দেশ (directive) ব্যবহার করে, HTML সামগ্রী অন্তর্ভুক্ত করতে পারেন:
উদাহরণ:
<body>
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>
নিচে ৩টি ধাপে পরিপূর্ণভাবে তুলে ধরা হলো:
ধাপ ১: এইচটিএমএল তালিকা তৈরি করুন (Create the HTML List)
myUsers_List.html
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
Step 2: Create the HTML Form
ধাপ ২: এইচটিএমএল ফরম তৈরি করুন (Create the HTML Form)
myUsers_Form.html
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
Step 3: Create the Main Page
ধাপ ৩: মেইন পেজ তৈরি করুন (Create the HTML Form)
myUsers.html
DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="userController">
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>
</html>
