# AngularJS - Includes ## Lesson Objectives 1. Describe why we need includes 1. Include an external file 1. Include a template already in the HTML 1. Dynamically change includes ## Describe why we need includes Includes allow us to take reusable content and move it into external files so that we don't copy and paste the same code over and over In terms of your group project, by separating code into different files, it will be easier to split up the work for AngularJS. ## Include an external file Use the following syntax to include an external html file. ```html
``` **Note the extra single quotes!** Remember that angular directives can accept valid Javascript! So, if we want it to actually evaluate `partials/indcluded.html` as a file name string, we have to put it in single quotes. Otherwise, it'll think we want to divide two variables with JavaScript. Now, inside this external file, you can write normal html with angular. You can even reference controllers outside of the file that are ancestors. It does this via AJAX, but normally a browser cannot make an AJAX request to a file on a computer (because that's insecure!). So there are two ways around this if your app doesn't already have a server like express running: - Start a basic http server from the command line - Start up chrome with extra params - `open /Applications/Google\ Chrome.app --args --allow-file-access-from-files` Let's just go with the simple solution for this code-along and run an http-server ### Running Angular Server with http-server We're going to create a basic AngularJS application _without_ an Express server for this exercise, so we need to spin up a server some other way. We want to be able to go to to [http://localhost:8080](http://localhost:8080) in our browser and see our app, but we are *not* using `nodemon` for this exercise, nor do we need `mongod`, because we do not have an express server set up. Instead, we'll run an http-server - Install `npm-server` by running `npm install -g http-server` from the terminal. - if you get an error about needed to be root/admin try typing `sudo !!` - that should rerun the previous command with sudo, be sure to enter your computer's password or try `sudo npm install -g http-server` - In today's `student_examples` there should be an `includes/starter-code` folder. `cd` into it, then - Run the server with `http-server -o` - If the window didn't automatically open for you, go to [http://localhost:8080](http://localhost:8080) in your browser ## Water Bar Code-along ![water bar header](https://i.imgur.com/5zAq4Rw.png) Let's see how ng-includes work with a quick little code-along. Most of the partials are already written out, so let's just include them all! ### Include the Navigation Bar The given file: **partials/navigation.html** ```html
Home
About
Contact
Locations
``` Let's include the navbar in our **index.html** at the top of the body ```html ... ``` **REMEMBER:** the single quotes inside the double quotes around the name Our nav bar should now appear! ### Move Our Menu Into Its Own Partial - First, create the partial file: `touch partials/menu.html` - Cut out the menu from our `index.html` and paste it into the partial we just created ```html

Menu

{{water.brand}}
${{water.price}}
``` - Back in our `index.html` let's now include the menu as a partial ```html
``` ### Dynamically Changing Includes Again, recall that angular directives all accept valid JavaScript. This means, we can set things like `ng-include` to controller variables! Let's test this out by making it so that the area where our Menu currently is can be dynamically changed depending on where the user wants to navigate to. In **index.html**, where we originally included our menu partial, change it to a controller variable like so: ```html
``` Thus, when we change those variables like normal, the partial will update too. Let's add some of that logic to our controller in **js/app.js** ```javascript this.includePath = 'partials/menu.html'; this.changeInclude = (path) => { this.includePath = 'partials/'+ path +'.html'; } ``` Then in our navbar, let's add an ng-click to each of the links so that it will run `changeInclude` every time it's clicked. In **partials/navigation.html** ```html
Home
About
Contact
Locations
```