Tag Archives: Directive

AngularJS - 001

AngularJS এ নিজের/Custom Directives তৈরি। building-your-own-directives-in-angularjs

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

AngularJS এর মাধ্যমে নিজের Directives তৈরি।
Md. Shahinoor Islamনিজের Directives তৈরি।
HTML উপাদান, মন্তব্য বা CSS classes দিয়ে Directives প্রদর্শন করতে পার। উদাহরনঃ

<my-directive></my-directive>
<input my-directive>
<!– directive: my-directive–>
<input>

একটি Directive এর ধারনা
angular.module(‘app’, []).directive(‘myDir’, function() {
return myDirectiveDefinition;
});

একটি Button Directive লেখা
escribe(‘button directive’, function () {
var $compile, $rootScope;
beforeEach(module(‘directives.button’));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it(‘adds a “btn” class to the button element’, function() {
var element = $compile(‘<button></button>’)($rootScope);
expect(element.hasClass(‘btn’)).toBe(true);
});
});
});

button directive ব্যবহার
<button type=”submit”
>Click Me!</button>

একটি Custom Validation Directives প্রবর্তন
একটি Custom Validation directive প্রবর্তন

এই জায়গায় আমাদের একটা test আছে, সুতরাং আমরা directive এর কার্যকারিতা বাস্তবায়ন করতে পারিঃ

myModule.directive(‘validateEquals’, function() {
return {
require: ‘ngModel’,
link: function(scope, elm, attrs, ngModelCtrl) {
function validateEqual(myValue) {
var valid= (myValue === scope.$eval(attrs.validateEquals));
ngModelCtrl.$setValidity(‘equal’, valid);
return valid ? myValue : undefined;
}
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.validateEquals, function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
});
}
};
});

AngularJS - 001, Complete Courses, Professional

AngularJS পরিচিতি (AngularJS Introduction in Bangla)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

পারিজাত বিশ্বাস

AngularJS একটি JavaScript এর framework । এটি HTML পেজের সাথে <script> tag এর মাধ্যমে যোগ করা হয়।

AngularJS এইচটিএমএল এট্রিবিউট এর নির্দেশনা (Directive) অনুসারে প্রসারিত করে এবং HTML এর Expression এর সাথে তথ্য মিশ্রিত করে ।

 

AngularJS একটি JavaScript Framework

AngularJS একটি JavaScript Framework । এটা JavaScript দিয়ে লেখা একটি লাইব্রেরি ।
AngularJS একটি JavaScript ফাইল হিসাবে ব্যবহার করা হয় এবং একটি script tag দিয়ে একটি ওয়েব পেজে যোগ করা হয়

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

AngularJS, HTML কে প্রসারিত করে

AngularJS, HTML কে ng-directives দ্বারা প্রসারিত করে ।

ng-app directive, AngularJS আপ্লিকেশনকে সঙ্গায়িত করে ।

ng-model directive, HTML কন্ট্রোলের (input, select, textarea) তথ্য সংযুক্ত করে ।

ng-bind directive তথ্য সংযুক্ত করে HTML view এর মাধ্যমে ।

উদাহরণঃ

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

ফলাফল : AngularJS উদাহরণ

 

উদাহরনের ব্যাখ্যঃ

ওয়েব পেজ লোড হওয়া শেষ হলে AngularJS সয়ংক্রিয়ভাবে লোড হয়।

ng-app directive, AngularJS কে বলে যে <div> উপাদান হচ্ছে AngularJS application এর “মালিক” ।

ng-model directive, input field এ প্রদত্ত মান অ্যাপ্লিকেশন এর name ভেরিয়েবল এ যোগ করে ।

ng-bind directive, <p> এর ভিতরের innerHTML কে application এর name এর সাথে বেধে দেয়।

 

AngularJS Directives ( নির্দেশনা )

আপনি ইতোমধ্যে দেখেছেন যে AngularJS Directives (নির্দেশনাগুলি ) একটি html এট্রিবিউট, যা ng prefix দ্বারা আরোপিত ।

ng-init directive, AngularJS এর application ভ্যারিয়েবল দ্বারা শুরু হয় ।

উদাহরনঃ

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

ফলাফল :

The name is John

 

 

যদি আপনি আপনার পেজ html এর জন্য বৈধ করতে চান তাহলে আপনি ng- এর পরিবর্তে data-ng- ব্যাবহার করতে পারেন,
উদাহরনঃ

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

আপনি পরবর্তীতে directives সম্পর্কে আরও অনেক কিছু শিখতে পারবেন।

 

AngularJS Expressions (প্রকাশ )

AngularJS expressions লেখা হয় double braces এর ভিতরে : {{ expression }}

AngularJS expressions একই ভাবে তথ্য সংযুক্ত করে, ঠিক যেভাবে ng-bind directive করে ।

AngularJS সেখানেই "output” ডাটা প্রদর্শন করবে ঠিক যেখানে expression লেখা হবে।

উদাহরনঃ

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

 

ফলাফল :

My first expression: 10

 

 

আপনি এই টিউটোরিয়ালে expressions সম্পর্কে আরও অনেক কিছু জানতে পারবেন।

 

AngularJS Controllers (কনট্রোলারসমুহ)

AngularJS application গুলো controller দ্বারা পরিচালিত হয়ে থাকে  ।

ng-controller directive controllers কে নিরধারিত ( নির্দেশিত ) করে ।

controller code কাজ করবে যখন page লোড হবে ।

উদাহরনঃ

<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
 Last Name: <input type="text" ng-model="lastName"><br>
 <br>
 Full Name: {{firstName + " " + lastName}}
</div>
<script>
 function personController($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
 }
 </script>