Professional Documents
Culture Documents
ThetwominuteguidetoAngularJSfor.NETdevelopers
Introduction
Edit in JSFiddle
<script src="http://code.angularjs.org/1.0.5/angular.js"></script>
<div ng-app>
Name: <input type=text ng-model="name">
<br>
Current user's name: {{name}}
</div>
http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html
1/7
9/1/2015
ThetwominuteguidetoAngularJSfor.NETdevelopers
The interesting thing to note is that, apart from embedding Angular itself, there is
actually no custom script running. In this sample, we have instead just used the
standard AngularJS data binding without any custom processing. To activate angular
for a particular <div> , it is enough to just use the custom attribute ng-app (which
scopes the application to this particular HTML element). After this, we could simply
use ng-model="name" to bind a certain input element to our view model and could then
reference the model's value in other parts of the HTML code with the read-only
expression {{name}} .
Adding a Controller
In a real application you will of course want to run custom code. To do this,
AngularJS uses the concept of Controllers. A controller is an object which is
instantiated for a certain view and which provides the business logic code for it. In
addition, it sets up the initial view model which is used for data binding. (In the
example above, we've used an implicitly created view model in Angular's
automatically created root data binding scope).
In AngularJS, a controller is just a regular JavaScript constructor which accepts a
magic $scope parameter (we're going to talk about this form of dependency injection
in the following chapter.)
function MyController($scope) {
}
The $scope variable is the equivalent of a .NET DataContext which is used to establish
the root of any data binding expression which used in the corresponding HTML
markup. You could for example add a user object to bind your values to:
function UserController($scope) {
$scope.currentUser = {
firstName: "John",
lastName: "Doe"
};
}
To associate a certain controller with an HTML fragment, you have to add the ngcontroller attribute to it to reference the desired controller.
<div ng-app ng-controller="UserController">
First Name: <input type=text ng-model="currentUser.firstName"> <br>
Last Name: <input type=text ng-model="currentUser.lastName"><br>
Full Name: {{currentUser.firstName}} {{currentUser.lastName}}
</div>
When you start this application, you'll see that the model values are displayed and
are correctly bound.
http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html
2/7
9/1/2015
ThetwominuteguidetoAngularJSfor.NETdevelopers
FirstName: John
LastName: Doe
FullName:JohnDoe
Edit in JSFiddle
You can then change the HTML markup to directly bind to the result of this method:
<div ng-app ng-controller="UserController">
First Name: <input type=text ng-model="currentUser.firstName"> <br>
Last Name: <input type=text ng-model="currentUser.lastName"><br>
Full Name: {{getFullName()}}
</div>
Edit in JSFiddle
Please note that you could also add the method directly to your model object and
bind to currentUser.getFullName() as will be shown in the following sample.
Alternative approaches which will result in substantially more reusable code will rely
on AngularJS' service concept, which we'll discuss in the next chapter.
http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html
3/7
9/1/2015
ThetwominuteguidetoAngularJSfor.NETdevelopers
Edit in JSFiddle
In this sample, I've first added a constructor (in C# terms, the closest equivalent
would be a very simple class) which holds user instances and which returns a user's
full name:
function User(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.getFullName = function () {
return this.firstName + " " + this.lastName;
}
}
The corresponding controller populates a list of user, and then exposes two new
properties to the view. The first one is called currentUser which reflects the currently
selected user (the one for which the details should be shown). The second exposed
element is the method selectUser which can be called by the view to select a different
user as the current one.
http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html
4/7
9/1/2015
ThetwominuteguidetoAngularJSfor.NETdevelopers
function UserController($scope) {
$scope.userList = [
new User("John", "Doe"),
new User("Henri", "de Bourbon"),
new User("Marguerite", "de Valois"),
new User("Gabrielle", "d'Estres")
];
// select the first user of the list
$scope.currentUser = $scope.userList[0];
// expose a callable method to the view
$scope.selectUser = function (user) {
$scope.currentUser = user;
}
}
To display these values in the desired form, the following HTML fragment is used:
<div ng-app ng-controller="UserController">
<b>Names</b>
<ul>
<li ng-repeat="user in userList">
<a ng-click="selectUser(user)">{{user.getFullName()}}</a>
</li>
</ul>
<hr>
<b>Selected User</b><br>
First Name: <input type=text ng-model="currentUser.firstName"> <br>
Last Name: <input type=text ng-model="currentUser.lastName"><br>
Full Name: {{currentUser.getFullName()}}
</div>
The attribute ng-repeat is used to perform the equivalent of a for or foreach loop.
The HTML element which defines this attribute will be added for each individual
entry of the list (in this case userList ) while the inner elements will get access to the
current item using the loop variable (in this case user ).
Inside of the loop, we've included the following HTML fragment:
<a ng-click="selectUser(user)">{{user.getFullName()}}</a>
The attribute ng-click contains the name of a method on the view model ( $scope )
which will be called when the user clicks the element. As a parameter, the current
value of the loop-variable user will be passed to the view model's method so that it
knows which entry has been clicked on.
Extending HTML
Now, of course we can't easily extend HTML (as in the HTML5 specification) itself,
but what AngularJS allows you, is to define new custom tags and use them alongside
http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html
5/7
9/1/2015
ThetwominuteguidetoAngularJSfor.NETdevelopers
your regular HTML. Or to say it differently: you can build your own domain-specific
extensions on top of HTML. These tags will be interpreted at runtime by AngularJS
and will be converted into real HTML which is then rendered for the browser.
AngularJS calls an extension to HTML a directive. One of the canonical and simple
example for a directive is the creation of tabbed dialogs, which can then be used
inside your HTML like shown in the following example (the underlying directive's
source code is conveniently part of AngularJS current official demos and the CSS
used for displaying/styling the tab control is taken directly from Twitter's bootstrap
project):
<div ng-app="myApp" class="myApp">
<tabs>
<pane title="First Page">
This is some <i>content on the first page</i>.
</pane>
<pane title="Second">
And this is the second page.
</pane>
</tabs>
</div>
Even though the HTML5 specification does not know about the elements tabs and
pane , AngularJS allows you to register a directive (shown in a later chapter in full
source code) which performs the necessary translation to the required HTML. The
important thing to note is that this transformation is self-contained and completely
independent from either your controller (which contains your application's business
logic) or your HTML code (which contains your markup for one particular view). You
can therefore reuse these directives similar to WPF or Silverlight's UI Controls.
FirstPage
Second
Thisissomecontentonthefirstpage.
Edit in JSFiddle
Please note: this is a very simple initial demo and you can use AngularJS' directives
in ways which are a lot more powerful than this. You can read more about directives
and how to use them in one of the following chapters. Just as a bit early of mouth
watering: directives can participate in two-way databinding so that you can, for
example, embed jQuery UI's datepicker (or mostly any other component of most web
frameworks) in a custom HTML element like <datePicker ng-model="user.dateOfBirth>
.
Summarizing
In this short introduction, we've just wanted to quickly outline some of the
capabilities of AngularJS. The two elements which might be the most important for
business apps are:
AngularJS does not force a specific structure for models. You can use any kind
http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html
6/7
9/1/2015
ThetwominuteguidetoAngularJSfor.NETdevelopers
Copyrightthinktecture,2013contact&imprint
http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html
7/7