mahuntington
/
angularjsnotes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
angularjsnotes/Day 6/1. custom_directives/2. INCLUDES.md

4.8 KiB
Raw Permalink Blame History

AngularJS - Includes

Lesson Objectives

  1. Describe why we need includes
  2. Include an external file
  3. Include a template already in the HTML
  4. 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.

<div ng-include="'partials/included.html'"></div>

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 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 in your browser

Water Bar Code-along

water bar header

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

<h5>Home</h5>
<h5>About</h5>
<h5>Contact</h5>
<h5>Locations</h5>

Let's include the navbar in our index.html at the top of the body

<body ng-controller='BaseCtrl as ctrl'>
  <nav ng-include="'partials/navigation'"></nav>
	...
</body>

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
<div class="menu">
  <h3>Menu</h3>
  <hr>
      <dl ng-repeat="water in ctrl.waters">
        <dt>{{water.brand}}</dt>
        <dd>${{water.price}}</dd>
      </dl>
</div>
  • Back in our index.html let's now include the menu as a partial
<div class="container">
  <div ng-include="'partials/menu'">
</div>

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:

	<div ng-include="ctrl.includePath"></div>

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

  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

<h5 ng-click="ctrl.changeInclude('menu')">Home</h5>
<h5 ng-click="ctrl.changeInclude('about')">About</h5>
<h5 ng-click="ctrl.changeInclude('contact')">Contact</h5>
<h5 ng-click="ctrl.changeInclude('location')">Locations</h5>