.png)
Basic Angular File Structure for Most Applications
Hey Guys here I am sharing with you the Very basic file structure to start writing any Angular Js application...I hope it is useful in your projects
It consists of two main files
the html file and the js file
The HTML file will look like the following
<html ng-app="joealmodule" ng-controller="JoelController">
<head>
/*scripts to include jquery and angular and css*/
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/pagination.js"></script>
<script src="js/toastr/angular-toastr.min.js"></script>
<script src="js/toastr/angular-toastr.tpls.min.js"></script>
<script src="js/admin.js"></script>
</head>
<body>
</body>
<html>
Now here below you will see the admin.js file
var joelmodule = angular.module("joelmodule",["toastr","angularUtils.directives.dirPagination"]);
joelmodule.controller("JoelController", function($scope,$http, toastr,$timeout) {
toastr.success('Hello world!', 'Toastr fun!');
/*define functions*/
$scope.myfunctionname = function (){
alert('my first function');
}
});
joelmodule.config(function(paginationTemplateProvider) {
setTimeout(function(){ paginationTemplateProvider.setPath('dirPagination.tpl.html'); }, 3000);
});
Here is the full explanation for pagination
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
View his Video for full understanding
Apart from this I have even added Toaster for messages
View the full plugin here https://github.com/Foxandxss/angular-toastr
Make sure to download the files in the correct location ie dirPagination.tpl.html should be placed in the same folder as the html file as per the above example..Comment below if you still have doubts..
I hope that this tutorial was useful to you...
0 comments: