Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"


0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Building JavaScript apps with Angular] [Jordan Matthiesen] [male speaker] So hey, there. My name's Jordan. I'm from the Visual Studio team, where I work on JavaScript developer tooling, and today I'm excited to take you through a tour of new features we've been building out in Visual Studio 2015 for JavaScript developers working with the wildly popular Angular JavaScript library. I'm going to take you through a simple sample, working with an 5 project. You should also know that the tools we're going to use here will work for you when writing against your own source code or building out applications for mobile devices using Apache Cordova tools, Windows Store apps, or if you even want to just build out an application using a previous version of Finally at the end, if you're a fan of TypeScript, I give you a pointer of where you can get typing definition files to work with Angular and TypeScript. . So with that, let's go ahead and get started and write some code. Okay, so what we have here is I'm going to build out an 5 project, and what we're going to make is a photo browser application that will simply list out the photos that I have here in this images directory. And we're going to get a list of these images from our photos.json file, which maps the image paths to titles for each of these images. This is a pretty simple application made up of a single index.html file that you see here and which I'm going to use the bootstrap library for CSS styling. I've already got Angular ready to go, and we've also got a placeholder app.js file that we'll put most of our logic into. So I'm working in an project, I also need to be sure that my underscore references file includes a reference to the Angular.js library, and underscore references is a file that helps tell the JavaScript editor what libraries to use to give you JavaScript IntelliSense. So you want to be sure Angular's in there. Now, to get started building out an Angular application, one of the first things you want to do is define what is the main module that makes up your app. So you do this using an ng-app attribute, and you'll see here that Visual Studio's giving us IntelliSense suggestions for different ng attributes as we get going. So I can see here, here is the ng-app attribute that I want to use. Go ahead and choose that, and we'll say that our app is named Photo Browser. I also want to define a controller for this page, so using Angular—controllers are the place where you put your main application logic or business app logic that will guide this page. And I can define a controller by using the ng-controller attribute, which you'll see again in IntelliSense. I can choose that, and we're going to use a controller name of Photo List. So now we'll save those changes and I'll switch over to the app.js file. In here, I'm going to simply create this first module that defines my application using the Angular object. See, as I type dot, I get IntelliSense suggestions for the Angular APIs that I could use. And the API I want to use here is the Angular Module API. And you'll see we're getting quick info tool tips here, giving us documentation about what these different parameters are. In this case, I want to give the app the name Photo Browser, and I'm also going to say that I don't have any other modules that I require. You should know that these comments here are coming straight from the Angular library, and new in Visual Studio 2015, we're actually raiding the JS doc comments that were used by the Angular team to document their source code. In previous versions, you may have seen XML documentation comments being used. Moving to JS doc comments was just a new thing that we recently added. We're also going to create our controller here just named Photo List. And when you work with Angular, you provide a function that will be called to Bootstrap that controller. And I'm going to take a dependency on an Angular service called the $scope service. And $scope gives you a way of getting information back and forth from the view, which is your UI, to your application logic here in the controller. In this case, I can say $scope and I see suggestions from IntelliSense for different APIs I could use against the scope object, or I can also add my own custom property here, in which I'm just going to put a simple message. Save this and go back to our index.html file, and just to make sure everything is working, we're going to put in a very simple display of that message. So what I've done here is I'm defining an Angular template, which is this double curly brace syntax I used, and when the app runs, Angular will see this template and it will fill in placeholder items like the message property there and take those from my scope. So go ahead and view this in our browser now and make sure that simple setup worked. And there you see our message. Okay, let's do something interesting now and let's download all of the photos on the page. So to do this, I'm going to switch back here and now we'll add a new service named The Image Service. And with Angular, a service is just a reasonable piece of code that you can call from other controllers or other services in your application. This service is going to take a dependency on an HDP service within Angular. That's what $HDPmaps do. And what we're going to do here is this service will return a simple object with one function called Get Images. And Get Images is just going to return the result of getting the photos.json file over HTTP. So I'm going to use the $ and HTTP parameter, and you'll see here, I'm getting suggestions in IntelliSense for the HTTP API, and I can use the get function. And it simply takes the URL to retrieve, as well as an optional set of config settings. So here, when I open up the curly brace, Visual Studio gives me suggestions for these config settings I could use, and I'm just going to tell Angular that I want to use a response type of JSON. Now we'll go down to our controller, and we're going to use the service to then get that list of images. I can do this using the navigation bar here, which if you have a lot of source code, helps you jump between different points in your file and helps highlight major points of interest such as the services and controllers you defined using Angular. I'm going to go to my controller, and we'll just add a reference to this image service by name. This is just one simple way of referencing different modules, different components that you can use in your application. Angular is able to map these names for function parameters to the different services you've defined, and Visual Studio is recognizing these, as you'll see now again, when I type Image Service and I hit a dot, I get suggestions from my service, and I can see my Get Images call. So I'm just going to write some code to handle the successful load of our JSON file. Now what this will do is it will call Get Images, which will make the HTTP request, and when that request is successful, it's going to call my callback function here with a list of all the images from the file. And I'm simply going to pass those images on to the view as an images array. Save our changes, and we'll go back to our HTML file now. And in the body of my page, I'm going to define a div that should repeat for each image that came from that image service. We'll do this using the ng-repeat attribute, which merely says that for each image in that list of images, repeat this div. And to give it a little style, I'm going to use Bootstrap and format this as a column. Now, in the body of this div, I want to list out both the title of my image— we'll pull that from the image object. And I also want to show the actual image, and we'll use a special ng-source attribute, which defines the code to bind to our image source attribute. And just for a simpler view on the screen, we'll shrink down the width of this image a little bit. I'll save, and we'll view this change in the browser. And you should now see a list of each of those images shown on our screen. So one final piece to just layer in that's pretty easy to do with Angular is let's add a search box here. It's as simple as using an input element on your page. And I'm going to style this input element using the Bootstrap form control class, and we'll use another ng attribute, ng-model, which says to bind the value of this field to a model object. Specifically, we're going to take the value and put it into a model object title property. Finally, I modify our ng-repeat expression to filter the collection on that search model object. So what Angular will do is when the search title changes, it will filter out each of these images by title. Let's again view our code in the browser. You should see a search field up at the top of the form, and I can just type in some text to filter on title. For example, I can find all of the wild animal photos or I can find the two pet photos in my collection. So I've just shown you how you can build out an application using Angular and an 5 project. You've seen some of the new tooling in Visual Studio to help you write HTML and JavaScript for Angular by providing IntelliSense suggestions for the HTML attributes and JavaScript APIs as you type. You've also seen some new editor improvements that help highlight your Angular code in the HTML editor and also help you navigate between different components of your app using the JavaScript navigation bar. Finally, you can now use the same tooling to build out applications for mobile devices using the Apache Cordova tools, or working with previous versions of If you'd like to learn some more about working with Angular, here are some sites you can visit. [Resources] I've got a link here to more information from the Angular website that helps you learn about the library, a link off to download TypeScript typing definition files to help you work with TypeScript and Angular, and finally, you can keep up with the latest news about Visual Studio and the Angular library through our blog. Thanks so much for watching. Go out and write some code.

Video Details

Duration: 11 minutes and 11 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 48
Posted by: duncanma on May 14, 2015

----- (Please provide translations for these languages: Chinese (Simplified) (chi_hans), Chinese (Traditional) (chi_hant), Czech (cze), English (eng), French (France) (fre_fr), German (ger), Italian (ita), Japanese (jpn), Korean (kor), Polish (pol), Portuguese (Brazil) (por_br), Russian (rus), Spanish (spa), Turkish (tur).)

Caption and Translate

    Sign In/Register for Dotsub to translate this video.