Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:16Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 The Main Script Entry Point

Our application should have a single point of entry from the HTML page it runs on. In this lesson we'll see how to add this in the Require way in order to bootstrap our modules.

2.3 The Main Script Entry Point

Hello. In this lesson we can wire everything up so that we can actually load the act and see our modules doing something. To do this, we need to set the entry point for our application. First of all, let's create a script file called main in the src directory. [BLANK_AUDIO] So we don't want this to be an actual module. But we still want to define it in an A and D style where we don't have to expose any globals. And we still want to load some modules as dependencies. So we can't use the define method because then it would just be a regular module. Instead of using the define method, we can instead use the require method similar to how we can make use of the require method to load dependencies into simplified common JS wrapper style. [BLANK_AUDIO] So just like the define method, we can pass different things to the require method. So we can pass a dependency array and a callback function. So the main script is gonna make use of the task manager. [BLANK_AUDIO] Great, so on the surface it's pretty similar to the define method, except of course, that we aren't defining a module. But our code is still nicely encapsulated and we still have a reference to the dependency that we need. So now inside the main script, if we wanted to create a new task, we could use the API exposed by the task manager. [BLANK_AUDIO] So we still have a little wiring up to do, however, because before we can inspect our task, we'll need to link to require.js in our HTML page. And we need to tell it where our main JS script file is, which effectively bootstraps the application. So we can link to require.js from our index.html page in the traditional way. [BLANK_AUDIO] Great, so this will allow to require.js for us. But what about our main.js script? We can use a special data attribute to tell require where our main script is. [BLANK_AUDIO] The data main attribute specifies a relative path to the main.js script. Where the path is relative to the HTML page, just let the path to require. Like when defining dependencies, we don't need to use the .js extension for the main script. Behind the scenes, require.js will set the base URL, for our modules to the src directory, as this is where our main.js script resides. This is an important concept because the base URL is the URL from which all other modules are referenced. At this point, our application is tiny. And consists of just a couple of modules which are all in the src directory anyway. But as the application grows and we add additional folders and resources, the base URL will become more important and useful. We can also configure the base URL directly, which we'll look at shortly in the specifying configuration lesson. If we don't use the data main attribute at all, and we don't provide any additional configuration, require.js will set the base URL to the directory that the HTML page is within. So, now, we should be able to run the HTML page in a browser. And let's just open up the console, and we see that we have a script error. Let's just fix that quickly so that's in the task manager module and we just need to adjust the case of our task object that gets passed into our callback function. Go back to the browser now. We can see the tasks that were logged into the console, great. Another thing we'll need is a list manager to go with our task manager. So let's create this module now. [BLANK_AUDIO] In this module, we're going to want to create new lists. So let's add a createList method. [BLANK_AUDIO] We're going to want to be able to save lists. We can use the local storage as the storage medium because it's quick and easy. So let's also add a storage module. [BLANK_AUDIO] So we'll definitely want to be able to save lists. [BLANK_AUDIO] And we'll probably want to be able to load lists. [BLANK_AUDIO] Lastly, we might want to be able to tell the user which lists they already have. [BLANK_AUDIO] As we learned in the last lesson, we can export these methods by returning an object from the module if we wish. [BLANK_AUDIO] And we'll finish up there for today. So in this lesson, we did the final bit of wiring up necessary to be able to start using the modules that we've created so far. We did this by setting the main script entry point using the special data-main attribute of the script element that we use to load RequireJS. We also learned that doing this sets the baseUrl that require uses to load our modules from. All module paths are relative to this baseUrl. Thanks for watching.

Back to the top