Before starting AngularJS we should have a basic understanding of:
The following steps describes how to works with AngularJS in ASP.NET project:
At first we need to include a single file “angular.min.js” in our project. We can download it from the AngularJS web site.We can also add AngularJS to the current project with the help of “NuGet”. For that, right-click on the solution explorer and select “Manager NuGet Package”. It is also available on the tools menu. From the Nuget manager window search for AngularJS as shown below and install it to the current project.
Include its reference in our master page or required .aspx page. Ii is better to include it in master page. Because then we can write AngularJS code in any page. Otherwise we must need to include the reference in every page.
We can also use AngularJS without downloading. For that we need to add the following code to the web page with a <script> tag.
AngualrJS has several directives which perform different tasks. At first write “ng-app” directive in a div. It initializes an AngularJS application. It is the root element of the application allowing behavior to be modified through custom HTML tags. Inside this div we can write any HTML/ASPX code.
Add one TextBox and one Label inside this “ng-app” directive.
<asp:TextBox ID="TextBox1" runat="server" ng-model="name"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label" ng-bind="name"></asp:Label>
Lets explain the above code:
- The ng-app directive notifies AngularJS that the <div> element is the “owner” of an AngularJS application
- The ng-model directive binds the value of HTML controls to application data
- The ng-bind directive binds application data to the HTML view. We can see the value of data on runtime
Run the application. AngularJS starts automatically when the web page is loaded. Type any things in the Textbox. Its result will be displayed in the Label.
In this way we can use Angular.JS in ASP.NET application. That’s all about a sample example of Angular.JS and ASP.NET.