In this post, we will see step by step how to create an
Angular JS Project using Visual Studio. This is for beginners only J
Before we start, make sure
·
You have very basic understanding of AngularJS
·
Basic understanding of Routing
·
Beginner level knowledge on html5
·
Hands-On using Visual Studio
1.
Open Visual
Studio and click “new project”.
Select “ASP.NET
Web Application”.
Enter
Project Name, Location and Solution
Name.
3. Open Solution Explorer, right click on the
solution and click “Manage Nuget
Packages”
Install Angular.js
Once installed, you will see all
Angular.JS references in “Scripts” folder.
4. In Solution Explorer, create a folder “views”
and add three html pages as shown below:
Below is the code for Index.html:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div>
<ng-view>
</ng-view>
</div>
<script
src="../Scripts/Vendor/angular.min.js"></script>
<script
src="../Scripts/Custom/App.js"></script>
</body>
</html>
Before the end of closure of body tag, add the script
references to angular.js and app.js as highlighted in yellow.
Few Best Practices to be followed in the .html file
- Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of the angular.js script.
- ng-app should be placed at the root of your application, typically on the <html> tag so that Angular JS will auto-bootstrap our application.
- Consider adding an ng-strict-di directive on the same element as ng-app to ensure that all services in your application are properly annotated.
5. Below is the code for Home.html and About.html
pages
Note: Both these html files have the same
code, but the controllers will be different and we will see the controller
related code in the next steps.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
{{title}
</div>
</body>
</html>
6. Within the “Scripts” folder, I have created
another folder named “Custom”.
This is for all our custom code/js files.
I have created another folder “Vendor” and moved all
“Angular JS” related files to “Vendor”.
Add a js file and name it as “App.JS” under the “Custom”
folder.
Below is the code in “App.js”
file.
var app = angular.module("app", []);
app.controller("HomeController", function ($scope) {
$scope.title = "THIS
IS HOME PAGE"
});
app.controller("AboutController", function ($scope) {
$scope.title =
"THIS IS ABOUT PAGE"
});
We have the basic structure ready. Now, let’s start adding the logic for “Routing”.
1. First step is to add Angular Route Script Reference in Index.html in the order as shown
in below snapshot
2. Now, we need to add or inject the dependency for Angular Route in our
App.js file.
var app = angular.module("app", ["ngRoute"]);
3. Next step is to configure Routing
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({redirectTo: "/home"});
});
Below is a snapshot of the complete code in App.js
file.
4. The
last step is to update the “Routes”
in our Index.html.
Press F5 to run the application and you will see the navigation items and
routing behaviour.
This is how we have implemented simple Angular JS application with
Routing!
Hope this helps!
I gone through your blog, It was very much usefull for me,I gained so much of information through your blog ,This was very helfull and keep posting more,Thank you.
ReplyDeleteBest Angularjs Training in Chennai
Angular 6 Training in Chennai
Angular 5 Training in Chennai
I have gone through your blog, it was very much useful for me and because of your blog, and also I gained many unknown information, the way you have clearly explained is really fantastic. Kindly post more like this, Thank You.
ReplyDeleteAviation Academy in Chennai
Aviation Courses in Chennai
best aviation academy in chennai
aviation institute in chennai
You are providing an valuable information. It is useful to so many people all around the world.
ReplyDeleteAngularJS training in chennai | AngularJS training in anna nagar | AngularJS training in omr | AngularJS training in porur | AngularJS training in tambaram | AngularJS training in velachery