(window.webpackJsonp=window.webpackJsonp||[]).push([[2224],{2632:function(t,s,a){"use strict";a.r(s);var e=a(31),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"node-js-express-js-with-angular-js-sample-code"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#node-js-express-js-with-angular-js-sample-code"}},[t._v("#")]),t._v(" Node.js (express.js) with angular.js Sample code")]),t._v(" "),a("p",[t._v("This example shows how to create a basic express app and then serve AngularJS.")]),t._v(" "),a("h2",{attrs:{id:"creating-our-project"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#creating-our-project"}},[t._v("#")]),t._v(" Creating our project.")]),t._v(" "),a("p",[t._v("We're good to go so, we run, again from console:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("mkdir our_project\ncd our_project\n\n")])])]),a("p",[t._v("Now we're in the place where our code will live. To create the main archive of our project you can run "),a("br")]),t._v(" "),a("h3",{attrs:{id:"ok-but-how-we-create-the-express-skeleton-project"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ok-but-how-we-create-the-express-skeleton-project"}},[t._v("#")]),t._v(" Ok, but how we create the express skeleton project?")]),t._v(" "),a("p",[t._v("It's simple:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("npm install "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("g express express"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("generator\n\n")])])]),a("p",[t._v("Linux distros and Mac should use "),a("strong",[t._v("sudo")]),t._v(" to install this because they're installed in the nodejs directory which is only accessible by the "),a("strong",[t._v("root")]),t._v(" user. If everything went fine we can, finally, create the express-app skeleton, just run")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("express\n\n")])])]),a("p",[t._v("This command will create inside our folder an express example app. The structure is as follow:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("bin"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("\nroutes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("\nviews"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("\napp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("package")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("json\n\n")])])]),a("p",[t._v("Now if we run "),a("strong",[t._v("npm start")]),t._v(" an go to "),a("a",{attrs:{href:"http://localhost:3000",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://localhost:3000"),a("OutboundLink")],1),t._v(" we'll see the express app up and running, fair enough we've generated an express app without too much trouble, but how can we mix this with AngularJS?. "),a("br")]),t._v(" "),a("h3",{attrs:{id:"how-express-works-briefly"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-express-works-briefly"}},[t._v("#")]),t._v(" How express works, briefly?")]),t._v(" "),a("p",[a("strong",[t._v("Express")]),t._v(" is a framework built on top of "),a("strong",[t._v("Nodejs")]),t._v(", you can see the official documentation at the "),a("a",{attrs:{href:"http://expressjs.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("Express Site"),a("OutboundLink")],1),t._v(". But for our purpose we need to know that "),a("strong",[t._v("Express")]),t._v(" is the responsible when we type, for example, "),a("a",{attrs:{href:"http://localhost:3000/home",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://localhost:3000/home"),a("OutboundLink")],1),t._v(" of rendering the home page of our application. From the recently created app created we can check:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FILE")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" routes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("index"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" express "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" router "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" express"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Router")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* GET home page. */")]),t._v("\nrouter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" next")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Express'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),a("p",[t._v("What this code is telling us is that when the user goes to "),a("a",{attrs:{href:"http://localhost:3000",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://localhost:3000"),a("OutboundLink")],1),t._v(" it must render the "),a("strong",[t._v("index")]),t._v(" view and pass a "),a("strong",[t._v("JSON")]),t._v(" with a title property and value Express. But when we check the views directory and open index.jade we can see this:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("layout")]),t._v("\nblock content\n    h1"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" title\n    p Welcome to #"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),a("p",[t._v("This is another powerful Express feature, "),a("strong",[t._v("template engines")]),t._v(", they allow you to render content in the page by passing variables to it or inherit another template so your pages are more compact and better understandable by others. The file extension is "),a("strong",[t._v(".jade")]),t._v(" as far as I know "),a("strong",[t._v("Jade")]),t._v("  changed the name for "),a("strong",[t._v("Pug")]),t._v(", basically is the same template engine but with some updates and core modifications. "),a("br")]),t._v(" "),a("h3",{attrs:{id:"installing-pug-and-updating-express-template-engine"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installing-pug-and-updating-express-template-engine"}},[t._v("#")]),t._v(" Installing Pug and updating Express template engine.")]),t._v(" "),a("p",[t._v("Ok, to start using Pug as the template engine of our project we need to run:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("npm install "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("save pug\n\n")])])]),a("p",[t._v("This will install Pug as a dependency of our project and save it to "),a("strong",[t._v("package.json")]),t._v(". To use it we need to modify the file "),a("strong",[t._v("app.js")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" app "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("express")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// view engine setup")]),t._v("\napp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'views'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'views'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\napp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'view engine'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pug'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),a("p",[t._v("And replace the line of view engine with pug and that's all. We can run again our project with "),a("strong",[t._v("npm start")]),t._v(" and we'll see that everything is working fine.")]),t._v(" "),a("h3",{attrs:{id:"how-angularjs-fits-in-all-of-this"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-angularjs-fits-in-all-of-this"}},[t._v("#")]),t._v(" How AngularJS fits in all of this?")]),t._v(" "),a("p",[t._v("AngularJS is an Javascript "),a("strong",[t._v("MVW")]),t._v("(Model-View-Whatever) Framework mainly used to create "),a("strong",[t._v("SPA")]),t._v("(Simple Page Application) installing is fairly simple, you can go to "),a("a",{attrs:{href:"https://angularjs.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("AngularJS website"),a("OutboundLink")],1),t._v(" and download the latest version which is "),a("strong",[t._v("v1.6.4")]),t._v("."),a("br")]),t._v(" "),a("p",[t._v("After we downloaded AngularJS when should copy the file to our "),a("strong",[t._v("public/javascripts")]),t._v(" folder inside our project, a little explanation, this is the folder that serves the static assets of our site, images, css, javacript files and so on. Of course this is configurable through the "),a("strong",[t._v("app.js")]),t._v(" file, but we'll keep it simple. Now we create a file named "),a("strong",[t._v("ng-app.js")]),t._v(", the file where our application will live, inside our javascripts public folder, just where AngularJS lives. To bring AngularJS up we need to modify the content of "),a("strong",[t._v("views/layout.pug")]),t._v(" as follow:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("doctype html\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("html")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ng"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("app"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'first-app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  head\n    title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" title\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("link")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rel"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stylesheet'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" href"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/stylesheets/style.css'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("body")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ng"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("controller"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'indexController'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    block content\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text-javascript'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" src"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascripts/angular.min.js'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text-javascript'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" src"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascripts/ng-app.js'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])]),a("p",[t._v("What are we doing here?, well, we're including AngularJS core and our recently created file "),a("strong",[t._v("ng-app.js")]),t._v(" so when the template is rendered it will bring AngularJS up, notice the use of the "),a("strong",[t._v("ng-app")]),t._v(" directive, this is telling AngularJS that this is our application name and it should stick to it."),a("br"),t._v("\nSo, the content of our "),a("strong",[t._v("ng-app.js")]),t._v(" will be:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("angular"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'first-app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n       "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("controller")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'indexController'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'$scope'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" indexController"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexController")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("$scope")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    $scope"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sigfried'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),a("p",[t._v("We're using the most basic AngularJS feature here, "),a("strong",[t._v("two-way data binding")]),t._v(", this allows us to refresh the content of our view and controller instantly, this is a very simple explanation, but you can make a research in Google or StackOverflow to see how it really works. "),a("br")]),t._v(" "),a("p",[t._v("So, we have the basic blocks of our AngularJS application, but there is something we got to do, we need to update our index.pug page to see the changes of our angular app, let's do it:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("layout")]),t._v("\nblock content\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("div")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ng"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("controller"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'indexController'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    h1"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" title\n    p Welcome "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("input")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text'")]),t._v(" ng"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("model"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])]),a("p",[t._v("Here we're just binding the input to our defined property name in the AngularJS scope inside our controller:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("$scope"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sigfried'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),a("p",[t._v("The purpose of this is that whenever we change the text in the input the paragraph above will update it content inside the "+t._s(t.name)+", this is called "),a("strong",[t._v("interpolation")]),t._v(", again another AngularJS feature to render our content in the template. "),a("br")]),t._v(" "),a("p",[t._v("So, all is setup, we can now run "),a("strong",[t._v("npm start")]),t._v(" go to "),a("a",{attrs:{href:"http://localhost:3000",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://localhost:3000"),a("OutboundLink")],1),t._v(" and see our express application serving the page and AngularJS managing the application frontend.")])])}),[],!1,null,null,null);s.default=n.exports}}]);