by David Loo | Apr 6, 2015 | AngularJS
How do you pass data to your directive?
So now we have covered the most basic part of custom directives, and now you should learn how to pass data to it.
You can simple access the current scope from a controller and get the data this way.
JavaScript:
angular.module('app', [])
.controller('HelloWorldController', ['$scope',function($scope) {
$scope.message = "This is a wonderful world we live in!"
}])
.directive('helloWorld', function () {
return {
restrict: 'E',
templateUrl: 'template.html'
};
});
Html Code:
<body ng-controller="HelloWorldController">
<hello-world></hello-world>
</body>
Template:
Your message:
<b>{{message}}</b>
And then in your template you simply use the curly braces to display the message from the current scope. (more…)
by David Loo | Apr 5, 2015 | AngularJS
What is a custom directive?
In my last post I’ve described what’s a directive and the types of directives available in AngularJS. But in AngularJS you’re not restricted to what is available, you have the ability to create you own directive too.
What are the ingredients that makes up a custom directive?
A very basic custom directive will contains the module.directive API to register it. The first parameter is the name and the second parameter is the function that returns configuration object.
Below is I have created an directive that is an element with a template that display a simple Hello, World! message in html.
angular.module('app', [])
.directive('helloWorld', function () {
return {
restrict: 'E',
template: '<b>Hello, World!</b>'
};
});
<hello-world></hello-world>
Let’s break it down. (more…)
by David Loo | Apr 5, 2015 | AngularJS
What is a Directive?
AngularJS Directives is a method of manipulating the DOM and there is two types of directives, a behavior modifiers and reusable components.
Behavior Modifier Directive
This type of directive will add or modify existing behavior of the UI. Some of these types include ng-show which show or hide parts of your html code, and ng-include which allows you to include a html code from another file to be rendered in an existing UI.
Reusable Components
This type of directive can render a new html code with in your page, and it can have business logic attached to it. Your typical reusable directive would be your Tab and Accordion directives.
ng-show example
This is an attribute directive which means you can only use it as attribute in any elements. For example below I am going to you it in my DIVs.
So ng-show you have to provide a condition that will resolve to true to show part of the html:
<div ng-show="condition == true">
Hello, World!
</div>
<div ng-show="condition == false">
Good Bye!
</div>
In my next post I am going to talk about Custom Directive, and demonstrate how you can write you own directive for your own single page application.
by David Loo | Dec 8, 2014 | AngularJS, Sharepoint Development
In this post I am going to show you how to apply AngularJS to your Visual WebParts in SharePoint.
Create a SharePoint 2013 Solution.
From Visual Studio menu File->New->Project and then use the SharePoint 2013 – Empty Project Template. Name the project DemoSite1 and the solution SharePoint2013 and click OK to continue. While Visual Studio is preparing your solution why not go and make yourself some coffee!
Right click on the DemoSite1 project and from the popup menu select Add->SharePoint “Layouts” Mapped Folder. After you have created the Layouts folder you will see another sub folder called DemoSite1. So in the Layouts folder create a Scripts folder, and then create another Scripts folder inside the DemoSite1 folder.
(more…)
by David Loo | Nov 22, 2014 | AngularJS
Here are some basics on how to create your own Angular custom filters. Below I have created a controller with an array of numbers starting from 1 to 10 and I am going to write a custom filter for filtering even numbers and one for odd numbers.
app.controller('AppController', ['$scope', function($scope) {
$scope.numbers = [1,2,3,4,5,6,7,8,9,10];
}
]);
To filter even numbers only I created a filter called EvenNumbersOnly which is a function that takes an array of numbers and check each value to see they are even numbers:
app.filter('EvenNumbersOnly', [function() {
return function(numbers) {
var evenNumbers = [];
for (idx in numbers)
{
if ((numbers[idx] % 2) == 0)
{
evenNumbers.push(numbers[idx]);
}
}
return evenNumbers;
}
}
]);
For filtering odd numbers I have done the same thing except it only check for odd numbers 🙂
app.filter('OddNumbersOnly', [function(){
return function(numbers) {
var oddNumbers = [];
for (idx in numbers)
{
if ((numbers[idx] % 2) == 1)
{
oddNumbers.push(numbers[idx]);
}
}
return oddNumbers;
}
}
]);
So now we have our filters ready to be used I will create a html page that will display the original complete set of numbers in the first div element, then I display a set of even numbers using the EvenNumbersOnly filter in the second div element, and then I display a set of odd numbers using the OddNumbersOnly filter in the third div element. Please note that the filter must be used with a pipe after the value you want to filter with:
<html ng-app="app.demo">
<head>
<title>Learn AngularJS - Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppController">
<div>
Numbers: {{ numbers }}
</div>
<div>
Even Numbers: {{ numbers | EvenNumbersOnly }}
</div>
<div>
Odd Nimbers: {{ numbers | OddNumbersOnly }}
</div>
</body>
</html>
Download Source Code
by David Loo | Nov 22, 2014 | AngularJS
To create a controller function that can be use with an element’s event attribute, you need to define a function with it’s implementation in it and then attached it to the $scope.
Below I have created a new Javascript file called app.js with a controller called AppController. In the $scope I have a property for storing text and one for attaching a function called onClick. When the onClick function is invoked, the message property will be set with a message ‘Hello, World!’:
var app = angular.module('app.demo', []);
// Controllers
app.controller('AppController', ['$scope', function($scope) {
$scope.message = '';
$scope.onClick = function() {
$scope.message = 'Hello, World!';
}
}
]);
Below I create a html page with body that uses the AppController controller, I have a input element that is a button type and I use ng-click to bind the function that I have create in the controller. I have created a div that will display the message property every time the button is clicked:
<html ng-app="app.demo">
<head>
<title>Learn AngularJS - Functions</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppController">
<input type="button" ng-click="onClick()" value="Click Here" />
<div><h1>{{message}}</h1></div>
</body>
</html>
Download Source Code
