7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 6Length: 28 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Angular 2 and ES5

In this lesson, I’ll show you how to build an Angular 2 component in plain JavaScript ES5. We’ll make a simple component that displays a message about learning Angular.

Related Links

2.2 Angular 2 and ES5

Hello everyone, this is Reggie Dawson. Welcome to the What's New in Angular 2 course with plus. In this video we are going to create a small Angular 2 project. For this example we are going to use ES5, or standard JavaScript. Angular 2 is built with ES6 which is the upcoming version of JavaScript that is in development. Most browsers do not have full support for ES6 so that is why we use something like TypeScript to write code in the ES6 syntax. This code is then compiled to JavaScript. We will work with TypeScript in the next video. ES5 doesn't have the features of ES6 that are used in Angular 2. So we have to use a different syntax than what we will see later when using TypeScript. Let's create our project. First we will need to have Node.js installed. Once you have Node installed create a project folder, and name it whatever you like, then run npm init- y, this generates a package.json file for us. The hyphen y uses default values for the file and won't prompt for any options. Package that they sign is the MPM configuration file. You'll understand why we need this in a moment, then we run. Mpm install angular2 --save. This installs Angular2 and saves it as part of the dependencies in package .jsign, then finally if you are running Angular2 on your local machine you'll need a web server to preview your project. If so, run mpm install live-server --save-dev. This will install the live server and add it to the dev dependencies of the package.JSON file. After that, open up the package.JSON file, remove everything from the script section, and then we're going to add start: live-server. We can now use our live server to preview our file. Next create an index.html and an app.js file in the root of your project folder. If this were a real application we would create some kind of logical folder structure to organize our project. The last thing to bear in mind is that Angular Two is still in development and certain features could be changed or removed by the time of release. Open your index.html file. First we are going to add our opening and closing HTML tags, then we add our head element. Inside of the head element we will add a title. Then we add a script reference for Angular 2. Remember we installed with MPM and since we did, we can find Angular in the node module folder. Angular 2 can be found inside of the node modules folder inside of the Angular 2 folder and then inside of the bundles folder. Inside of that folder we want the Angular2.sfx.div.gs file, then finally we can add a reference to our app.js file, then after the closing head tag, we can add our opening and closing body tags. Then inside of the body tag we're going to add a tag that says, first hyphen comp, short for first component. This is where our app will be loaded on our page. After that we are finished with our HTML file. Let's open up @.js. ES 5 syntax was recently updated to a format that was closer tot the type script format. First we will creat a variable to hold our component, then we'll add ng.component. This tells angular two this is a component. Inside of this component we're going to add a property. Remember the first-comp tag we added to our HTML file? This tells Angular that the host element for this component is first-comp. An instance of our component will be displayed our first-comp element, then we chain view to the component. This lets Angular know that this is going to contain information about the view of our component. In here we will add the template property. This is what Angular is going to display when the component is called. Bare in mind that if the template is very large, the preferred method is to use an external template with the template URL property. Finally, we will change class. Inside of class, we are going to add our constructor function. Here, we can set properties of our component and add logic. This is the part of the component that replicates the behavior of a controller. For example, we can add. We will now be able to access this property in our component. Notice we don't have to add scope like we had to do in Angular. This is one way that the Angular team has simplified Angular 2. After that, the last thing we need to do is bootstrap our app. We added an event list in there for the DOM content loaded event and when we detect that event we're going to run ng.bootstrap against our first component. Unlike angular where we initialize our app in our HTML file, here we boot strap the app in our JavaScript file. The way we boot strap this app we can basically only initialize one component. The idea is that in order to build large apps, you create a base component as a host, and load all of our other components from the base component. Let's save our files and preview If you´re using the live server make sure you´re in your project folder and run MPM start. I´m using Cloud nine, so I´ll just have to open the Index.HTMl file in preview. You should see the message, I am learning angular two. Now let´s add another component that will be hosted by our base component. We are adding a component called SecondComponent with a selector of second-com, then in our view we have a template that is displaying the skill property from our constructor function and finally, We add our constructor function that sets our skill. Then in our first component, we will add a br tag in the second element to our template. The last thing we need to do is add the second component to our first component. We do this by adding the directives property to our view. We add the second component as an array. After that our second component should be available to our first component. If we didn't add the directives property this would not work. After that, save and preview. The level message should appear in emphasized text. That's everything you need to know to set up an Angular 2 component in ES5. In the next video we will use type script to create a component.

Back to the top