Angular.js with Visual Studio - Your First Project
Today i am going to show you how to deploy angular.js with visual studio by creating one simple project. Please follow the steps...
Step 1:- Open Visual Studio, here i am using vs 2013 and select new project - visual c# - web and
select ASP.NET Web Application . please see the image given below.
Step 2:- after all this your project will look like the image given below
Step 3:- Now add reference of angular , for that select Tools - Nuget Package Manage - Nuget Package for Solution.
it will open a window search for angular and select angular core to install.
Now your project will look like the image given below.
Now we are finished with the files, lets start the project , add index.html file to your project,
i hope you know how to add html file.
and also create one folder named as app, and create main.js file, where we will create our module and controllers. this is a standard procedure so please follow it .
after all this your project will look like the image given below.
1. add reference to your html file in head section like
<script src="Scripts/angular.min.js"></script> <script src="app/main.js"></script>
2. Now open your main.js file to create module and controller.
3. by default you will not have intellisense for angular , to get that you need to provide reference to your javascript file.
write the line on top of main.js
/// <reference path="../scripts/angular.min.js" />
Module Part:-
4. Now we will create a module .
/// <reference path="../scripts/angular.min.js" /> .
(function() {
var app = angular.module('app', []);
})();
here, best practice is to write function in closures.
var app = angular.module ----------defines we are going to create a module
var app = angular.module('app', []); --------'app' is a name of module
[] is a directive if we use in future.
now your main.js file will look like this
now , we are done with module, we have created one module named as app but we need a controller to make some logic lets write it.
Controller Part:-
app.controller('maincontroller', Main); // this is a controller
here we have app.controller which is a syntax to define a controller
and 'maincontroller' is a name of the controller and Main is the function which we will define later.
Now , we have to define Main function that is the function where we have to put our logic.
function Main()
{
this.Name = 'Arj';
}
here we have simple function which will write name.
so we have done with controller and module lets merge with the view i mean to say with index .html file, that's why we call angular as MVC .
we have module,controller and now we will work with view.
View Part:-
open Index .html file,
first we need to tell our application that it is an angular application for that include angular directives.
in html tag
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
ng-app is angular directives which will load our module that we named as app, when our html page is loading in the browser.
now add controller to the view. it will be added in the body tag by using directive ng-controller.
<body ng-controller="maincontroller as ar">
here , ng-controller is an angular directive to add controller to the html page and "as ar" is alias of controller.
Now your html page and Main.js will look like this
INDEX.html
Result of your first app:-
here, i have printed Arj which you can see is in the controller and after calling controller through index.html it will fetch data from it by using binding variable {{ar.name}}
ar-----controller alias
name----value in the controller
Another Example of angular js :-
Now, we have another example where i show you the dynamic part of angular.js
we only need a index.html and there is no need of controller because i am not implementing any logic here.
Try it, hope you will get it.
there are numbers of directives in angular.js which you have to learn to do masters in angular.
FOR U.... A
Kindly Bookmark this Post using your favorite Bookmarking service:
Post a Comment
Note: only a member of this blog may post a comment.