This is the first part from the series of posts I have planned for AngularJS in which I will provide an in-depth knowledge about AngularJS and how to use that in developing business applications with ASP.NET MVC, WEB API and Entity framework
In this post we will discuss about the core features of AngularJS and bootstrap with ASP .NET MVC using Visual Studio. I assume that the readers should have an in depth knowledge of ASP.NET MVC and Web APIs as I would mostly focus on the AngularJS features.
What is AngularJS
AngularJS is a web framework developed by Google tp provide responsive UI on web. It is supported for Single Page Applications where the landing page remains the same and single or multiple view can render inside it with usage of server side functions asynchronously and updating the model and control values dynamically.
You can check out the complete tutorial over here https://angularjs.org
Step by Step exercise of configuring Angular JS in ASP.NET MVC application
- Start Visual Studio
- Select ASP.NET Web Application and then MVC as project template
- Add references to AngularJS through NuGet
- Search AngularJS on the Package Manager console
- And then Select AngularJS Core and install
6. After adding AngularJS Core, add the bundle
bundles.Add(new ScriptBundle(“~/bundles/angular”)
.Include(“~/Scripts/angular.js”));
7. Now add these bundles in the HTML head section of _Layout.cshtml
@Scripts.Render(“~/bundles/angular”)
8. Now In order to bootstrap angular JS in our MVC app we have to define the ngApp on the page body or html tag. ngApp reference to the application JS file where you can define routing, controllers etc. ngApp is a directive to auto-bootstrap an AngularJS application. Also, note that only one ngApp can be used per HTML document.
9. Let’s create two JavaScript files, one MyApp.js and the other DemoController.js
10. Create an app folder under root in MVC project
11. Add a new JavaScript file named as MyApp.js
12. Inside MyApp.js write following snippet
var MyApp = angular.module(‘MyApp’,[]);
13. This line initialize the application level global object of angular app and a central point where you can add modules like routing, ui etc. Through this object you can add controllers, directives etc and access it globally.
14. Now specify “MyApp” to the ng-App attribute in html tag.
<html ng-app=”MyApp”>
15. Now, let’s add a DemoController.js file in your project under app folder.
16. Add following snippet in DemoController.js
MyApp.controller(‘DemoController’, [‘$scope’,
function DemoController($scope) {
$scope.Name = “ovais mehboob”;
}]);
17. Now add a div tag inside Home/Index.cshtml file and specify ng-controller as DemoController
<div ng-controller=”DemoController”>
<h1>{{Name}}</h1>
<input type=”text” ng-model=”Name” />
</div>
18. In the above code, I have specified DemoController in div tag and access scope varialbes that were defined under DemoController. Using “double curly braces” {{ }} you can access the scope variables throughout controller.
19. In order to bind the values of scope variables with input fields like textbox etc you can use ng-model and ng-bind to bind with other controls like span etc.
20. Add MyApp.js and DemoController.js inside BundleConfig.cs
bundles.Add(new ScriptBundle(“~/bundles/angular”)
.Include(“~/Scripts/jquery-1.10.2.js”,
“~/Scripts/angular.js”,
“~/app/MyApp.js”,
“~/app/DemoController.js”));
21. Let’s build and run the application
In the next post I will discuss about routing and rendering views inside a single page application.
Ovais TechBlogs 