{"id":9297,"date":"2015-12-07T14:11:08","date_gmt":"2015-12-07T12:11:08","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=9297"},"modified":"2018-06-19T23:42:30","modified_gmt":"2018-06-19T20:42:30","slug":"angularjs-mvc-tutorial-part-1-project-setup","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/","title":{"rendered":"AngularJS MVC Tutorial &#8211; Part 1 &#8211; Project Setup"},"content":{"rendered":"<p><strong>EDITORIAL NOTE<\/strong>: In this post, we feature a comprehensive AngularJS MVC Tutorial. Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications.<\/p>\n<h2>1. Introduction<\/h2>\n<p>When I was asked to write a tutorial on <strong>MVC<\/strong> using <strong>Angular.js<\/strong>, I was not sure how to attack the subject because Angular.js is <em>really<\/em> popular and tutorials like that are <em>everywhere<\/em> on the Internet. I decided to challenge myself and do a <strong>tutorial series in 3 parts<\/strong> on a full stack JavaScript architecture.<\/p>\n<p>In this first part, I will show you how I created an Angular.js MVC application wrapped around a <strong>Tic Tac Toe<\/strong> game engine I did as a <strong>TDD<\/strong> kata.<\/p>\n<p>Basically, I will show you how to create a <code>grid<\/code> directive for the game UI, a <code>TicTacToeService<\/code> that wraps the game engine, a <code>DrawingService<\/code> using <strong>jQuery SVG<\/strong> to draw the crosses and circles, and a <code>TicTacToeController<\/code> to interface between the UI and the services.<\/p>\n<figure id=\"attachment_9337\" aria-describedby=\"caption-attachment-9337\" style=\"width: 1148px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/screenShotGame.png\"><img decoding=\"async\" class=\"wp-image-9337 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/screenShotGame.png\" alt=\"AngularJS MVC tutorial tic tac toe\" width=\"1148\" height=\"669\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/screenShotGame.png 1148w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/screenShotGame-300x175.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/screenShotGame-1024x597.png 1024w\" sizes=\"(max-width: 1148px) 100vw, 1148px\" \/><\/a><figcaption id=\"caption-attachment-9337\" class=\"wp-caption-text\">Figure 1. Screen shot of the game<\/figcaption><\/figure>\n<p>I will also explain how to have a functional development environment, that is the different tools I used to make this work. Those are <strong>Brackets<\/strong>, <strong>Bower<\/strong>, <strong>Grunt<\/strong>, <strong>NPM<\/strong> and <strong>SASS<\/strong>.<br \/>\n[ulp id=&#8217;LXJcMJZXSsqGXYW8&#8242;]<\/p>\n<h2>2. Prerequisites<\/h2>\n<p>To follow this tutorial, you need:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/\">NPM<\/a> (comes with <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a>)<\/li>\n<li><a href=\"http:\/\/sass-lang.com\/install\">SASS<\/a> (needs <a href=\"https:\/\/www.ruby-lang.org\/en\/\">Ruby<\/a>)<\/li>\n<li><a href=\"http:\/\/gruntjs.com\/\">Grunt<\/a> (from NPM)<\/li>\n<li><a href=\"http:\/\/bower.io\/\">Bower<\/a> (from NPM)<\/li>\n<li>Your favorite IDE (I use <a href=\"http:\/\/brackets.io\/\">Adobe Brackets<\/a>)<\/li>\n<\/ul>\n<h2>2. Folder structure<\/h2>\n<p>This way of storing the sources and the dependencies is something I came up with while developing the game. I think that, in the end, I ended up with something that is quite easy to work with. At the root of the project, I have NPM <code>package.json<\/code>, Bower <code>bower.json<\/code> and <code>.bowerrc<\/code> configuration files, and my <code>Gruntfile.js<\/code>. Along with those files, I have NPM modules stored in the folder <code>node_modules<\/code> and Bower modules are in <code>bower_dependencies<\/code>. Then I have a <code>lib<\/code> folder containing the tic tac toe sources in <code>src<\/code> and tests suites in <code>test<\/code>. The <code>src<\/code> folder goes like this:<\/p>\n<figure id=\"attachment_9338\" aria-describedby=\"caption-attachment-9338\" style=\"width: 543px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/folderStructure1.png\"><img decoding=\"async\" class=\"wp-image-9338 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/folderStructure1.png\" alt=\"AngularJS MVC folder structure\" width=\"543\" height=\"229\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/folderStructure1.png 543w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/folderStructure1-300x127.png 300w\" sizes=\"(max-width: 543px) 100vw, 543px\" \/><\/a><figcaption id=\"caption-attachment-9338\" class=\"wp-caption-text\">Figure 2. The folder structure<\/figcaption><\/figure>\n<p>I decided to go with a folder structure that is called <em>by layer<\/em> because it&#8217;s a really small application that will not grow any bigger with different features that would necessitate a structure by feature (domain). I would not recommend doing this in a professional or open source project because one has to navigate deep inside the folder structure to see how files are grouped and what the application is about.<\/p>\n<h2>3. Model-View-Controller in Angular.js<\/h2>\n<p>With near 45k stars on GitHub, Angular.js is one of the most popular JavaScript framework (or script library) on the market. It&#8217;s a powerful tool to create MV* applications in no time. With directives and data binding, Angular gives a feeling that HTML is now something else that just a markup language. It all starts by:<\/p>\n<pre>    var TicTacToe = angular.module(\"TicTacToe\", []);\r\n<\/pre>\n<p>Let&#8217;s have a look that the other layers, from top to bottom.<\/p>\n<h3>3.1 The View<\/h3>\n<p>The view I created for this is a directive template. I also have an HTML template around it to make it look a little bit better, but the main view here is the tic tac toc grid.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>grid.html<\/em><\/span><\/p>\n<pre class=\"brush:html\">&lt;div class=\"row\"&gt;\r\n    &lt;div class=\"container-fluid grid\"&gt;\r\n        &lt;div class=\"row\"&gt;\r\n            &lt;div data-row=\"0\" data-column=\"0\" class=\"col-sm-4 cell\" \r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n            &lt;div data-row=\"0\" data-column=\"1\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n            &lt;div data-row=\"0\" data-column=\"2\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"row\"&gt;\r\n            &lt;div data-row=\"1\" data-column=\"0\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n            &lt;div data-row=\"1\" data-column=\"1\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n            &lt;div data-row=\"1\" data-column=\"2\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"row\"&gt;\r\n            &lt;div data-row=\"2\" data-column=\"0\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n            &lt;div data-row=\"2\" data-column=\"1\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n            &lt;div data-row=\"2\" data-column=\"2\" class=\"col-sm-4 cell\"\r\n                 ng-click=\"clickCell($event)\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"row\"&gt;\r\n    &lt;button type=\"button\" class=\"btn btn-success btn-lg col-sm-12\" \r\n            ng-click=\"startGame()\" ng-hide=\"isGameInProgress()\"&gt;\r\n        GO!\r\n    &lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>So we have a 3 by 3 grid with <code>div<\/code>s having the <code>cell<\/code> CSS class. I have bound the <code>ng-click<\/code> event to a method called <code>clickCell($event)<\/code> which we will have a closer look later. Here, <code>$event<\/code> is an Angular service allowing us to retrieve the instance of the component that was clicked. With that instance, we will be able to query it to get the HTML5 custom attributes <code>data-row<\/code> and <code>data-column<\/code> values representing the coordinates of the current grid cell. This could have been generated. Feel free to download the sources below and try to make this grid generate!<\/p>\n<p>Below the grid, we have a button that the <code>ng-click<\/code> event is bound to the <code>startGame<\/code> method. This button creates a new instance of the tic tac toe game engine and starts the game. It will remain hidden for the whole game and get displayed when the game is finished.<\/p>\n<h3>3.2 The Controller<\/h3>\n<p>No surprise, the controller is the component in a software that takes the data from the view and send it to the model layer. Some kind of a translator. Too many times I have seen controllers with business logic and I think it&#8217;s simply because of its obscure suffix <code>Controller<\/code>. Naturally, I would think that the controller is something that has the control over a system, but it must be thought as a gaming console controller. Something you (UI) <em>use<\/em> to have control on the machine (Model).<\/p>\n<p>That aside, as you might expect, our controller here is really small.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>TicTacToeController.js<\/em><\/span><\/p>\n<pre class=\"brush:javascript\">TicTacToe.controller(\"TicTacToeController\", [\r\n    '$scope', '$timeout', 'TicTacToeService', 'DrawingService', \r\n    function ($scope, $timeout, TicTacToeService, DrawingService) {\r\n        \r\n        this.gameCurrentlyPlayed = TicTacToeService.makeNewGame();\r\n        \r\n        $scope.startGame = function () {\r\n            console.log(\"Initializing a new game...\");\r\n            this.gameCurrentlyPlayed = TicTacToeService.makeNewGame();\r\n\r\n            DrawingService.initialize(this.gameCurrentlyPlayed);\r\n            DrawingService.drawBoard();\r\n        }\r\n\r\n        $scope.clickCell = function ($event) {\r\n            if (this.gameCurrentlyPlayed &amp;&amp; this.gameCurrentlyPlayed.isGameInProgress()) {\r\n                var cellClicked = $($event.target).parent();\r\n                var cellClickedRow = cellClicked.data(\"row\");\r\n                var cellClickedColumn = cellClicked.data(\"column\");\r\n\r\n                this.gameCurrentlyPlayed.playerMove(cellClickedRow, cellClickedColumn);\r\n                DrawingService.drawBoard();\r\n            }\r\n\r\n        }\r\n\r\n        $scope.isGameInProgress = function () {\r\n            if (this.gameCurrentlyPlayed) {\r\n                return this.gameCurrentlyPlayed.isGameInProgress(); \r\n            }\r\n            \r\n            return false;\r\n        };\r\n\r\n        $timeout($scope.startGame, 0);\r\n    }\r\n]);\r\n<\/pre>\n<p>So we create a controller using the function with the same name and pass a bunch of dependencies. The <code>$timeout<\/code> service is used at line 35 to delay the creation of a new game when the controller loads. This was needed because of <b>jQuery SVG<\/b>. I had to wait for the DOM to be completely rendered before initializing the <code>DrawingService<\/code>.<\/p>\n<p>Apart from that game creation method, we have the <code>clickCell<\/code> function that, like I said earlier, fetches the <code>row<\/code> and <code>column<\/code> data attributes of the clicked cell (lines 18-19), does the move on the game engine (line 21) and tells the <code>DrawingService<\/code> to draw the board (line 22).<\/p>\n<h3>3.3 The Model layer as services<\/h3>\n<p>I decided to create a <code>TicTacToeService<\/code> even though I new I already had the game engine with the business logic in it. The reason behind that is that I have plan to make a <b>NodeJS<\/b> back-end to store the player scores and make the game playable real-time using <b>SocketIO<\/b>. The front-end &#8211; back-end communications will be done through this service, that is calling remotely the game engine methods and functions.<br \/>\n<span style=\"text-decoration: underline;\"><em>TicTacToeService.js<\/em><\/span><\/p>\n<pre class=\"brush:javascript\">TicTacToe.service(\"TicTacToeService\", function () {\r\n    var game;\r\n    \r\n    this.makeNewGame = function() {\r\n        console.log(\"Initializing game in service...\");\r\n        this.game = new TicTacToeGame();\r\n        return this.game; \r\n    };\r\n});\r\n<\/pre>\n<p>No need to explain, right? Then, I needed way to draw the crosses and circles on the grid. I implemented that in a service called the DrawingService.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>DrawingService.js<\/em><\/span><\/p>\n<pre class=\"brush:javascript\">TicTacToe.service(\"DrawingService\", function () {\r\n    var CELL_PADDING = 15;\r\n    \r\n    this.initialize = function (ticTacToeBoard) {\r\n        console.log(\"Initializing DrawingService...\");\r\n        $(\".cell\").height($(\".cell\").width());\r\n        $(\"#descriptionJumbotron\").height($(\".grid\").height() - 45);\r\n        \r\n        this.ticTacToeBoard = ticTacToeBoard;\r\n        this.grid = [];\r\n        \r\n        for (var row = 0; row &lt; 3; row++) {\r\n            this.grid.push([]);\r\n            \r\n            for (var column = 0; column &lt; 3; column++) {\r\n                var cellUIComponent = $(\".cell[data-row='\" + row + \"'][data-column='\" + column + \"']\");\r\n                cellUIComponent.svg();\r\n                this.grid[row][column] = cellUIComponent;\r\n            }\r\n        }  \r\n        \r\n    };\r\n    \r\n    this.getCellAt = function (row, column) {\r\n        this.grid[row][column].hide();\r\n    };\r\n    \r\n    this.drawBoard = function () {\r\n        for (var row = 0; row &lt; 3; row++) {\r\n            for (var column = 0; column &lt; 3; column++) {\r\n                \r\n                var cellUIComponent = this.grid[row][column];\r\n                var cellInGame = this.ticTacToeBoard.getCell(row, column);\r\n                var cellSVG = cellUIComponent.svg('get');\r\n                \r\n                cellSVG.clear();\r\n                if (cellInGame === \"X\") {\r\n                    drawCross(cellSVG, cellUIComponent);\r\n                } else if (cellInGame === \"O\") {\r\n                    drawCircledrawCross(cellSVG, cellUIComponent);\r\n                }\r\n            }\r\n        }\r\n    };\r\n    \r\n    var drawCross = function (cellSVG, cellUIComponent) {\r\n        cellSVG.line(null, CELL_PADDING, CELL_PADDING, \r\n                     cellUIComponent.width() - CELL_PADDING, \r\n                     cellUIComponent.height() - CELL_PADDING, {\r\n            stroke: 'red', \r\n            strokeWidth: 5\r\n        });\r\n\r\n        cellSVG.line(null, cellUIComponent.width() - CELL_PADDING, CELL_PADDING, \r\n                     CELL_PADDING, cellUIComponent.height() - CELL_PADDING, {\r\n            stroke: 'red', \r\n            strokeWidth: 5\r\n        });  \r\n    };\r\n    \r\n    var drawCircle = function (cellSVG, cellUIComponent) {\r\n        cellSVG.circle(cellUIComponent.width() \/ 2, \r\n                       cellUIComponent.height() \/ 2, \r\n                       cellUIComponent.width() \/ 2 - CELL_PADDING, {\r\n            fill: 'white', \r\n            stroke: 'blue', strokeWidth: 5\r\n        });    \r\n    };\r\n    \r\n    return this;\r\n});\r\n<\/pre>\n<p>To me, drawing is business logic and has to go in a service even though it really tight to the view. A factory would probably have been better in case I would like to draw with another plugin than <b>jQuery SVG<\/b>. There is also place for a template method pattern with <code>drawCross<\/code> and <code>drawCircle<\/code>.<\/p>\n<p>If you pay a close attention, I made a really tight link with the template around the grid that I should absolutely remove. <code>$(\"#descriptionJumbotron\").height($(\".grid\").height() - 45);<\/code> is a hack because I set the height of the cells dynamically based on their width. The <code>jumbotron<\/code> <code>div<\/code> beside the grid needed to be resized as well.<\/p>\n<h2>4. The grid directive<\/h2>\n<p>Angular is meant to make you feel like you are doing HTML. With directive, we can create new components as if it was pure HTML. To demonstrate this, I decided to create a <code>grid<\/code> directive.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>GridDirective.js<\/em><\/span><\/p>\n<pre class=\"brush:javascript\">TicTacToe.directive('grid', function () {\r\n    return {\r\n        restrict: 'E',\r\n        templateUrl: 'tmpl\/grid.html'\r\n    }\r\n});\r\n<\/pre>\n<p>The <code>restrict: 'E'<\/code> property tells Angular to look for the <code>grid<\/code> directive only in the elements, the tag name itself. This will simply replace the code of the new <code>&lt;grid&gt;<\/code> tag with the content of the view template as defined by <code>templateUrl: 'tmpl\/grid.html'<\/code>.<\/p>\n<p>In this case, the code to include the grid is the following:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.html<\/em><\/span><\/p>\n<pre class=\"brush:html\">&lt;div class=\"container\" ng-app=\"TicTacToe\" ng-controller=\"TicTacToeController\"&gt;\r\n    &lt;grid\/&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h2>5. Conclusion<\/h2>\n<p>In part 2 of this series, I will show you how I added bower for dependencies management and grunt for compilation and packaging. I will also show you how we can compile SASS to CSS with grunt. If you have any questions or comments, feel free to send me a tweet <a href=\"https:\/\/twitter.com\/syl20TOS\">@syl20TOS<\/a>!<\/p>\n<h2>6. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/AngularTutorial.zip\">Angular MVC Tutorial<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>EDITORIAL NOTE: In this post, we feature a comprehensive AngularJS MVC Tutorial. Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. 1. Introduction When I was asked to write a tutorial on MVC using Angular.js, I was not sure how to attack the subject because &hellip;<\/p>\n","protected":false},"author":107,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[288],"class_list":["post-9297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-mvc"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AngularJS MVC Tutorial - Part 1 - Project Setup - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about AngularJS MVC? Check out our Tutorial where we will show you how to create an Angular.js MVC application!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS MVC Tutorial - Part 1 - Project Setup - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about AngularJS MVC? Check out our Tutorial where we will show you how to create an Angular.js MVC application!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/sylvain.cloutier.589\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-07T12:11:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-19T20:42:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sylvain Cloutier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Syl20TOS\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sylvain Cloutier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/\"},\"author\":{\"name\":\"Sylvain Cloutier\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1b11a7869645a6cadbee612bc8d792b6\"},\"headline\":\"AngularJS MVC Tutorial &#8211; Part 1 &#8211; Project Setup\",\"datePublished\":\"2015-12-07T12:11:08+00:00\",\"dateModified\":\"2018-06-19T20:42:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/\"},\"wordCount\":1236,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"keywords\":[\"MVC\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/\",\"name\":\"AngularJS MVC Tutorial - Part 1 - Project Setup - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2015-12-07T12:11:08+00:00\",\"dateModified\":\"2018-06-19T20:42:30+00:00\",\"description\":\"Interested to learn more about AngularJS MVC? Check out our Tutorial where we will show you how to create an Angular.js MVC application!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"AngularJS MVC Tutorial &#8211; Part 1 &#8211; Project Setup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1b11a7869645a6cadbee612bc8d792b6\",\"name\":\"Sylvain Cloutier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a99e21011060c21ac77758d81e774b6366e0408789fc4b44ad01771374984a19?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a99e21011060c21ac77758d81e774b6366e0408789fc4b44ad01771374984a19?s=96&d=mm&r=g\",\"caption\":\"Sylvain Cloutier\"},\"description\":\"Sylvain has been programming in Java for the past 5 years, mainly in the aerospace industry, as a lead developer of complex web based aircraft wiring systems. He is also one of the organizers of the Java User Group of Quebec City and currently works as a Java developer consultant at CGI.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/sylvain.cloutier.589\",\"https:\/\/www.linkedin.com\/profile\/view?id=AAIAAAqXUbIBPSDqY-HagpgyXDIxl55bHvAKjao\",\"https:\/\/x.com\/Syl20TOS\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/sylvain-cloutier\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS MVC Tutorial - Part 1 - Project Setup - Web Code Geeks - 2026","description":"Interested to learn more about AngularJS MVC? Check out our Tutorial where we will show you how to create an Angular.js MVC application!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS MVC Tutorial - Part 1 - Project Setup - Web Code Geeks - 2026","og_description":"Interested to learn more about AngularJS MVC? Check out our Tutorial where we will show you how to create an Angular.js MVC application!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/sylvain.cloutier.589","article_published_time":"2015-12-07T12:11:08+00:00","article_modified_time":"2018-06-19T20:42:30+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Sylvain Cloutier","twitter_card":"summary_large_image","twitter_creator":"@Syl20TOS","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Sylvain Cloutier","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/"},"author":{"name":"Sylvain Cloutier","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1b11a7869645a6cadbee612bc8d792b6"},"headline":"AngularJS MVC Tutorial &#8211; Part 1 &#8211; Project Setup","datePublished":"2015-12-07T12:11:08+00:00","dateModified":"2018-06-19T20:42:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/"},"wordCount":1236,"commentCount":4,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","keywords":["MVC"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/","name":"AngularJS MVC Tutorial - Part 1 - Project Setup - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2015-12-07T12:11:08+00:00","dateModified":"2018-06-19T20:42:30+00:00","description":"Interested to learn more about AngularJS MVC? Check out our Tutorial where we will show you how to create an Angular.js MVC application!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-mvc-tutorial-part-1-project-setup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"AngularJS MVC Tutorial &#8211; Part 1 &#8211; Project Setup"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1b11a7869645a6cadbee612bc8d792b6","name":"Sylvain Cloutier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a99e21011060c21ac77758d81e774b6366e0408789fc4b44ad01771374984a19?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a99e21011060c21ac77758d81e774b6366e0408789fc4b44ad01771374984a19?s=96&d=mm&r=g","caption":"Sylvain Cloutier"},"description":"Sylvain has been programming in Java for the past 5 years, mainly in the aerospace industry, as a lead developer of complex web based aircraft wiring systems. He is also one of the organizers of the Java User Group of Quebec City and currently works as a Java developer consultant at CGI.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/sylvain.cloutier.589","https:\/\/www.linkedin.com\/profile\/view?id=AAIAAAqXUbIBPSDqY-HagpgyXDIxl55bHvAKjao","https:\/\/x.com\/Syl20TOS"],"url":"https:\/\/www.webcodegeeks.com\/author\/sylvain-cloutier\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/107"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=9297"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=9297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=9297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=9297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}