Introduction
There are many tutorials available online, but still its difficult to understand. Here, I’ve explain how to begin with AngularJs as beginner in very simple way.
Background
You need to have basics of JAVASCRIPT to understand working.
Using the code
I am going to create an AngularJs app within ASP.Net MVC web application. In order to create the said application follow the below steps:
1. Create a new mvc web application in Visual Studio.
2. Install angularJS using NuGet server. ( Tools > NuGet Package Manager > Package Manager Console)
Hide Copy Code
PM> Install-Package angularjs
3. Create a new folder name “App” in root of the project
4. You can add separate folders to this app folder for controller, model, route, directive, assembly etc.
5. Now add App.js file under App folder by right clicking on App folder and selecting add new items.
6. Do coding as follows:
Hide Copy Code
(function () {
var app = angular.module(“app”, [ ]);
app.controller(“myCtrl”, [‘$scope’, function ($scope) {
$scope.value = “hello first app”;
}]);
})();
In above code, we have created a function which defines our app.
i.e.
Hide Copy Code
var app = angular.module(“app”, [ ]);
after defining app, a controller is added.
Hide Copy Code
app.controller(“myCtrl”, [‘$scope’, function ($scope) {
$scope.value = “hello first app”;
}]);
if you haven’t define app like below code. you need to use angular.controller instead of app.controller.
Hide Copy Code
var app = angular.module(“app”, [ ]);
in controller we have defined $scope.value = “hello first app;”. Here, value is model which holds some values.
save the file.
Here, We are done with App.js! Now we are going to use this AngularJs app in ASP.NET MVC view.
Follow the following steps to use AngularJs app in MVC View.
1. Add a controller in ASP.NET MVC web application’s root.
2. Create a view and define ng-app, ng-controller and ng-model in hierarchy, like follows:
Hide Copy Code
<div ng-app=”app”>
<div ng-controller=”myCtrl”>
<input type=”text” ng-model=”value” />
<label>{{value}}</label>
</div>
</div>
3. Now, Before Running the App you need to include following js in head tag of cshtml page. After including required js, you need to include App.js which we created.
Hide Copy Code
<script src=”~/Scripts/angular.js”></script>
<script src=”~/Scripts/angular-route.js”></script>
<script src=”~/Scripts/angular-resource.js”></script>
/* Below this include your app.js which was created under App folder */
<script src=”~/App/Controller/app.js”></script>
•{{value}} – This denotes 2 way binding which means that when you change the value of the textbox, it will directly reflect to the place where you have used 2 way binding.
•{{::value}} – This denotes 1 way binding. Unlike two way binding you’ll only see the value which you have set in the app module.
Now, Run the project. We are done with AngularJs.
License
