AngularJS
I am admitting the fact that AngularJS is a "tough nut" when compared to jQuery which is purely a JavaScript library ,mostly used for DOM manipulations.AngularJS is much more than that ;)
Im going to create a simple app which shows the concepts of routing ,controllers ,views etc
Step 1
Create a folder structure like this
angulartutorial
css
In your partials file add some unique content likeI am admitting the fact that AngularJS is a "tough nut" when compared to jQuery which is purely a JavaScript library ,mostly used for DOM manipulations.AngularJS is much more than that ;)
Im going to create a simple app which shows the concepts of routing ,controllers ,views etc
Step 1
Create a folder structure like this
angulartutorial
css
basic.css //if you are using any css
js
js
app.js //your js file
partials //this folder contains partial html files which is used for rendering
partials //this folder contains partial html files which is used for rendering
route1.html
route2.html
route3.html
default.html
error.html
templates //say ,your static things like header ,footer
default.html
error.html
templates //say ,your static things like header ,footer
header.html
footer.html
index.html //this is a file
Step 2
Step 2
In your index.html file add these
<!DOCTYPE html>
<html>
<!-- include the angular js file -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>
<body ng-app="tutorial">
<!--include the header file -->
<div ng-include='"templates/header.html"'></div>
<div ng-view></div>
<!--include the footer file-->
<div ng-include='"templates/footer.html"'></div>
<script src="js/app.js"></script>
</body>
</html>
Step 3
<html>
<!-- include the angular js file -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>
<body ng-app="tutorial">
<!--include the header file -->
<div ng-include='"templates/header.html"'></div>
<div ng-view></div>
<!--include the footer file-->
<div ng-include='"templates/footer.html"'></div>
<script src="js/app.js"></script>
</body>
</html>
Step 3
route1.html
<p>Hello im coming from the file route1.html</p>
route2.html
<p>Hello again !!! file route2.html</p>
etc
Step4
In your templates/header.html add these
<p>This is the header file<p>
<ul>
<li><a href='#route1'>Route 1</a></li>
<li><a href='#route2'>Route 2</a></li>
<li><a href='#route3'>Route 3</a></li>
<li><a href='#route4'>Route 4</a></li>
</ul>
Step 5
In the file js/app.js add these lines of code
//bootstrap it
var app = angular.module('tutorial', [
'ngRoute'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/default.html", controller: "yourcontroller"})
// Pages
.when("/route1", {templateUrl: "partials/route1.html", controller: "yourcontroller"})
.when("/route2", {templateUrl: "partials/route2.html", controller: "yourcontroller"})
.when("/route3", {templateUrl: "partials/route3.html", controller: "yourcontroller"})
// else 404
.otherwise("/404", {templateUrl: "partials/error.html", controller: "errorcontroller"});
}]);
thats it !! Now navigate to localhost/angulartutorial ,click on the links
