├── view ├── css │ └── style.css ├── view2.html ├── directives │ ├── List.js │ └── List.html ├── forms │ └── login.html └── view1.html ├── controller ├── routes.js ├── filters.js ├── controllers.js ├── services.js └── directives.js ├── README.md ├── App.js ├── model └── Model.js └── index.html /view/css/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /controller/routes.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /view/view2.html: -------------------------------------------------------------------------------- 1 |

VIEW 2

2 | -------------------------------------------------------------------------------- /view/directives/List.js: -------------------------------------------------------------------------------- 1 | App.directive('gbNoteList', () => { 2 | // TODO 3 | }); 4 | -------------------------------------------------------------------------------- /view/directives/List.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /controller/filters.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | "use strict"; 3 | const App = angular.module("App.filters", []); 4 | 5 | App.filter("interpolate", function (version) { 6 | return function (text) { 7 | return String(text).replace(/\%VERSION\%/gm, version); 8 | }; 9 | }); 10 | 11 | // just copy paste the example above to add more filters 12 | })(); 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularJS MVC Web App Template 2 | 3 | A starter template for an AngularJS Web Application with a MVC folder structure. 4 | 5 | Uses AngularJS 1.7.8, jQuery 3.6.1, Twitter Bootstrap 5.2.0, Flat UI 2.3.0 as CDNs & HTML5 6 | 7 | This is a customized version of a combination of two similar starter templates built for a similar purpose: 8 | 9 | - https://github.com/kajackdfw/angular_bootstrap_app 10 | - https://github.com/davidb583/white-angularjs-app 11 | 12 | ![screenshot](https://i.imgur.com/DREeNEa.png "screenshot") 13 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | "use strict"; 3 | const App = angular.module("App", [ 4 | "App.controllers", 5 | "App.services", 6 | "App.directives", 7 | "App.filters", 8 | "ngRoute", 9 | "ngResource", 10 | ]); 11 | 12 | App.config(function ($routeProvider) { 13 | $routeProvider 14 | .when("/view1", { 15 | templateUrl: "view/view1.html", 16 | }) 17 | .when("/view2", { 18 | templateUrl: "view/view2.html", 19 | }) 20 | .otherwise({ redirectTo: "view1" }); 21 | }); 22 | })(); 23 | -------------------------------------------------------------------------------- /controller/controllers.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | "use strict"; 3 | const App = angular.module("App.controllers", []); 4 | 5 | App.controller("MyCtrl1", [ 6 | "$scope", 7 | function ($scope, UtilSrvc) { 8 | $scope.aVariable = "anExampleValueWithinScope"; 9 | $scope.valueFromService = UtilSrvc.helloWorld("User"); 10 | }, 11 | ]); 12 | 13 | App.controller("MyCtrl2", [ 14 | "$scope", 15 | function (_$scope) { 16 | // if you have many controllers, it's better to separate them into files 17 | }, 18 | ]); 19 | })(); 20 | -------------------------------------------------------------------------------- /model/Model.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | "use strict"; 3 | 4 | const App = angular.module("App.services", []); 5 | 6 | App.service('Model', function () { 7 | this.getLinks = function () { 8 | return [{ 9 | id: 1, 10 | title: 'Item A' 11 | }, { 12 | id: 2, 13 | title: 'Item B' 14 | }, { 15 | id: 3, 16 | title: 'Item C' 17 | }, { 18 | id: 4, 19 | title: 'Item D' 20 | }, { 21 | id: 5, 22 | title: 'Item E' 23 | }, { 24 | id: 6, 25 | title: 'Item F' 26 | } 27 | ]; 28 | }; 29 | }); 30 | 31 | })(); -------------------------------------------------------------------------------- /view/forms/login.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | 11 |
12 | 13 |
14 |
Text goes here
15 |
20 | TBD 21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /controller/services.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | "use strict"; 3 | const App = angular.module("App.services", []); 4 | 5 | App.value("version", "0.1"); 6 | 7 | // here is a declaration of simple utility function to know if an given param is a String. 8 | App.service("UtilSrvc", function () { 9 | return { 10 | isAString: (o) => 11 | typeof o == "string" || 12 | (typeof o == "object" && o.constructor === String), 13 | 14 | helloWorld: function (name) { 15 | let result = "Hum, Hello you, but your name is too weird..."; 16 | if (this.isAString(name)) { 17 | result = "Hello, " + name; 18 | } 19 | return result; 20 | }, 21 | }; 22 | }); 23 | })(); 24 | -------------------------------------------------------------------------------- /controller/directives.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | "use strict"; 3 | const App = angular.module("App.directives", []); 4 | 5 | App.directive("inputtext", function (_$timeout) { 6 | return { 7 | restrict: "E", 8 | replace: true, 9 | template: '', 10 | scope: { 11 | //if there were attributes it would be shown here 12 | }, 13 | link: function (_scope, _element, _attrs, _ctrl) { 14 | // DOM manipulation may happen here. 15 | }, 16 | }; 17 | }); 18 | 19 | App.directive("version", function (version) { 20 | return function (_scope, elm, _attrs) { 21 | elm.text(version); 22 | }; 23 | }); 24 | 25 | // you may add as much directives as you want below 26 | })(); 27 | -------------------------------------------------------------------------------- /view/view1.html: -------------------------------------------------------------------------------- 1 |
2 |

VIEW 1

3 |
4 |
5 |
6 |
AngularJS
7 |

8 | AngularJS is a tool-set for building the framework most suited to your 9 | application development. 10 |

11 | View details » 12 |
13 |
14 |
15 |
16 |
17 |
18 |
jQuery
19 |

20 | jQuery is a fast, small, and feature-rich JavaScript library. 21 |

22 | View details » 23 |
24 |
25 |
26 |
27 |
28 |
29 |
Bootstrap
30 |

31 | Sleek, intuitive, and powerful front-end framework for faster and 32 | easier web development. 33 |

34 | View details » 35 |
36 |
37 |
38 |
39 |
40 |
41 |
Flat UI
42 |

Flat UI Kit - HTML/PSD Design Framework

43 | View details » 46 |
47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AngularJS MVC App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | 23 | 29 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 83 | 84 |
85 |
86 |
87 | 88 |
89 |
90 |

Web App MVC Template

91 |

92 | This is a web application starter template built with AngularJS 93 | with an MVC structure 94 |

95 |
96 | 97 |
98 |
99 | 100 |
101 | 102 |
103 | 104 | 105 | 106 | --------------------------------------------------------------------------------