title
AngularJS Tutorial

description
Get the Code Here : http://goo.gl/yvDpi1 Best AngularJS Book : http://amzn.to/1PhNVPT Support me on Patreon : https://www.patreon.com/derekbanas In this tutorial I clear up all of the jargon in AngularJS through a ton of examples. We'll cover the Model View Controller pattern and how it works with AngularJS. I'll then provide examples that explain AngularJS Modules, Directives, Scope, and Expressions. Beyond those topics I'll also cover dependency injection, ng-app, ng-init, ng-controller, ng-model, event handling, data-ng-bind, ng-repeat, multiple views, multiple controllers, ng-cloak, $index, $first, $last, $middle, $even, $odd, ng-repeat-start, ng-repeat-end, ng-include, ng-switch, ng-switch-when, ng-disabled, ng-hide, ng-show, ng-class and much more. Thank you to Patreon supports like the following for helping me make this video https://www.facebook.com/cottageindus... @kyleaisho @thetwistedhat

detail
{'title': 'AngularJS Tutorial', 'heatmap': [{'end': 533.258, 'start': 503.877, 'weight': 0.919}, {'end': 629.254, 'start': 575.754, 'weight': 1}, {'end': 1601.178, 'start': 1568.342, 'weight': 0.704}], 'summary': "The 'angularjs tutorial' video covers fundamental concepts including mvc architecture, directives, controllers, and event handling, demonstrating practical examples for creating maintainable web applications with proper folder structure and usage of ng-app and ng-init directives.", 'chapters': [{'end': 143.311, 'segs': [{'end': 72.654, 'src': 'embed', 'start': 41.191, 'weight': 0, 'content': [{'end': 44.873, 'text': 'And with MVC, the model is going to represent the data source.', 'start': 41.191, 'duration': 3.682}, {'end': 47.554, 'text': 'The view is going to be the rendered web page.', 'start': 44.913, 'duration': 2.641}, {'end': 50.576, 'text': 'And the controller is going to handle communication between both of them.', 'start': 47.754, 'duration': 2.822}, {'end': 55.018, 'text': 'And by structuring your page this way, your code is going to be easier to maintain.', 'start': 50.796, 'duration': 4.222}, {'end': 57.059, 'text': "It's also going to be easier to update.", 'start': 55.198, 'duration': 1.861}, {'end': 59.701, 'text': "And it's also going to make your code much more readable.", 'start': 57.2, 'duration': 2.501}, {'end': 63.905, 'text': "And that brings us to AngularJS's jargon, which I'm going to explain in this tutorial.", 'start': 59.901, 'duration': 4.004}, {'end': 66.868, 'text': 'But briefly, I just want to cover everything that you see right here.', 'start': 64.025, 'duration': 2.843}, {'end': 72.654, 'text': 'AngularJS uses modules, which are going to represent the components used in your application.', 'start': 67.088, 'duration': 5.566}], 'summary': 'Mvc helps to maintain, update, and read code easily, while angularjs uses modules to represent application components.', 'duration': 31.463, 'max_score': 41.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY41191.jpg'}], 'start': 0.109, 'title': 'Angularjs basics', 'summary': 'Provides an overview of angularjs, covering mvc architecture, modules, directives, scope, expressions, and services, emphasizing their role in creating maintainable, readable, and dynamic web applications.', 'chapters': [{'end': 143.311, 'start': 0.109, 'title': 'Angularjs tutorial overview', 'summary': 'Covers the basics of angularjs, including mvc architecture, modules, directives, scope, expressions, and services, explaining their significance in building maintainable, readable, and dynamic web applications.', 'duration': 143.202, 'highlights': ['AngularJS is based on the MVC model, which improves code maintainability and readability. AngularJS is built on top of JavaScript and jQuery, providing a front end framework based on the MVC model, making the code easier to maintain and more readable.', 'Modules in AngularJS represent components used in applications and enable code reusability. AngularJS uses modules to represent application components, making it easier to reuse code in other applications or parts of the site.', 'Directives in AngularJS extend HTML tags and attributes, making it easy to bind data directly to HTML elements. AngularJS allows the extension of HTML tags and attributes using directives, simplifying the binding of data directly to HTML elements.', 'AngularJS uses JavaScript objects called scope to represent data, allowing for dynamic page updates as the data changes. AngularJS utilizes scope, which represents data and enables dynamic page updates as the data changes.']}], 'duration': 143.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY109.jpg', 'highlights': ['AngularJS is based on the MVC model, improving code maintainability and readability.', 'Modules in AngularJS enable code reusability, representing application components.', 'Directives in AngularJS extend HTML tags and attributes, simplifying data binding.', 'AngularJS utilizes scope for dynamic page updates as the data changes.']}, {'end': 349.43, 'segs': [{'end': 265.391, 'src': 'embed', 'start': 238.894, 'weight': 3, 'content': [{'end': 243.697, 'text': "And what I'm doing here is I'm going to define the AngularJS model that I'm defining.", 'start': 238.894, 'duration': 4.803}, {'end': 250.401, 'text': 'And modules are basically used to associate an AngularJS app with the part of an HTML document.', 'start': 243.937, 'duration': 6.464}, {'end': 256.125, 'text': "They're also going to provide access to numerous AngularJS features and also help with organization.", 'start': 250.581, 'duration': 5.544}, {'end': 261.188, 'text': 'And the Angular module function here is going to accept the module name.', 'start': 256.345, 'duration': 4.843}, {'end': 265.391, 'text': 'as well as a list of modules inside of this bracket.', 'start': 261.648, 'duration': 3.743}], 'summary': 'Defining angularjs model with modules for app association and feature access.', 'duration': 26.497, 'max_score': 238.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY238894.jpg'}, {'end': 324.12, 'src': 'embed', 'start': 281.061, 'weight': 0, 'content': [{'end': 284.002, 'text': 'Now you may be wondering where exactly is this app1 coming from.', 'start': 281.061, 'duration': 2.941}, {'end': 285.082, 'text': "I'm going to jump over here.", 'start': 284.022, 'duration': 1.06}, {'end': 291.704, 'text': "And right after the HTML, I'm going to type in ng-app is equal to app1.", 'start': 285.422, 'duration': 6.282}, {'end': 294.665, 'text': 'And this is going to define the ng-app parameter.', 'start': 291.884, 'duration': 2.781}, {'end': 299.406, 'text': "And it's normally going to be either put in the HTML tag right here or in the body.", 'start': 294.865, 'duration': 4.541}, {'end': 304.447, 'text': 'And this is going to be set so that AngularJS knows where to begin compiling your code.', 'start': 299.586, 'duration': 4.861}, {'end': 308.068, 'text': 'And app1, like I said previously, is going to be the module name.', 'start': 304.647, 'duration': 3.421}, {'end': 312.211, 'text': "And as we saw previously, it's going to be referenced in our JavaScript file.", 'start': 308.348, 'duration': 3.863}, {'end': 316.214, 'text': "Another guy we can put inside here that we're going to use is ng init.", 'start': 312.351, 'duration': 3.863}, {'end': 318.415, 'text': 'And it is what we call a directive.', 'start': 316.534, 'duration': 1.881}, {'end': 324.12, 'text': "And what it's going to do is initialize application data by assigning different values to variables.", 'start': 318.656, 'duration': 5.464}], 'summary': 'Defining ng-app and ng-init in angularjs to initialize app1 module and assign values to variables.', 'duration': 43.059, 'max_score': 281.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY281061.jpg'}], 'start': 143.411, 'title': 'Angularjs basics', 'summary': 'Covers angularjs tutorial setup, emphasizing proper folder structure and importing angularjs via cdn. it also discusses implementing angularjs model, controller, and scope, and usage of ng-app and ng-init directives.', 'chapters': [{'end': 216.521, 'start': 143.411, 'title': 'Angularjs tutorial setup', 'summary': 'Demonstrates setting up the folder structure and importing angularjs via cdn, to create a web page and javascript file for a tutorial, emphasizing the need for proper folder structure and placement of script tags.', 'duration': 73.11, 'highlights': ['The tutorial emphasizes the importance of having a specific folder structure for HTML and JavaScript files, to ensure proper organization and functionality.', 'The chapter demonstrates the process of importing AngularJS via CDN, and the placement of the script tag near the end of the HTML file for its usage.', 'Various services for common tasks like Ajax and techniques for dynamically pulling data from web services are mentioned, setting the stage for the upcoming tutorial.']}, {'end': 280.821, 'start': 216.801, 'title': 'Implementing angularjs model and controller', 'summary': 'Discusses implementing an angularjs model, controller, and scope, defining the angularjs model, and explaining the function of modules in association with an angularjs app, highlighting the use of angular module function.', 'duration': 64.02, 'highlights': ['The Angular module function is used to associate an AngularJS app with a part of an HTML document, providing access to numerous AngularJS features and aiding in organization.', 'Modules are used to associate an AngularJS app with an HTML document and provide access to various AngularJS features, aiding in organization and structure.']}, {'end': 349.43, 'start': 281.061, 'title': 'Angularjs ng-app and ng-init', 'summary': 'Discusses the usage of ng-app to define the angularjs module and ng-init to initialize application data by assigning values to variables, providing an example of these directives and their usage.', 'duration': 68.369, 'highlights': ['The ng-app directive is used to define the AngularJS module, referenced in the JavaScript file and placed either in the HTML tag or in the body.', "The ng-init directive initializes application data by assigning different values to variables, exemplified by assigning values to 'person' and 'capitals' variables."]}], 'duration': 206.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY143411.jpg', 'highlights': ['The tutorial emphasizes the importance of having a specific folder structure for HTML and JavaScript files, to ensure proper organization and functionality.', 'The chapter demonstrates the process of importing AngularJS via CDN, and the placement of the script tag near the end of the HTML file for its usage.', 'The ng-app directive is used to define the AngularJS module, referenced in the JavaScript file and placed either in the HTML tag or in the body.', "The ng-init directive initializes application data by assigning different values to variables, exemplified by assigning values to 'person' and 'capitals' variables.", 'Modules are used to associate an AngularJS app with an HTML document and provide access to various AngularJS features, aiding in organization and structure.', 'The Angular module function is used to associate an AngularJS app with a part of an HTML document, providing access to numerous AngularJS features and aiding in organization.', 'Various services for common tasks like Ajax and techniques for dynamically pulling data from web services are mentioned, setting the stage for the upcoming tutorial.']}, {'end': 990.49, 'segs': [{'end': 437.288, 'src': 'embed', 'start': 408.988, 'weight': 1, 'content': [{'end': 411.79, 'text': "that's what this is referred to as a factory function.", 'start': 408.988, 'duration': 2.802}, {'end': 417.214, 'text': "let's close that off right there and factory function is going to get the controller ready to use.", 'start': 411.79, 'duration': 5.424}, {'end': 422.878, 'text': "and we're saying scope right here is a dependency by putting it inside of the attributes area,", 'start': 417.214, 'duration': 5.664}, {'end': 429.743, 'text': 'and that is telling angular to automatically pass in the scope object whenever the function is going to be called angular,', 'start': 423.178, 'duration': 6.565}, {'end': 437.288, 'text': "smart enough to know what we want, and it's gonna throw it in there automatically for us, and this is an example of what we call dependency injection.", 'start': 429.743, 'duration': 7.545}], 'summary': 'Factory function prepares controller with dependency injection in angular.', 'duration': 28.3, 'max_score': 408.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY408988.jpg'}, {'end': 533.258, 'src': 'heatmap', 'start': 503.877, 'weight': 0.919, 'content': [{'end': 507.199, 'text': 'And then we can go and add the two values together.', 'start': 503.877, 'duration': 3.322}, {'end': 515.024, 'text': "And I'm going to use a shortcut here, which is the unary plus operator, which is going to convert a string into an integer in this situation.", 'start': 507.46, 'duration': 7.564}, {'end': 523.39, 'text': "So I can get my scope like this and then add it to the other value that I have defined in the HTML and we'll output that to the screen.", 'start': 515.224, 'duration': 8.166}, {'end': 527.774, 'text': "so we'll save that, we'll jump back over in our HTML and we'll start defining some things.", 'start': 523.39, 'duration': 4.384}, {'end': 533.258, 'text': "so let's say we want to throw a span inside of here and we could just say values.", 'start': 527.774, 'duration': 5.484}], 'summary': 'Using unary plus operator to convert string to integer for addition in html.', 'duration': 29.381, 'max_score': 503.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY503877.jpg'}, {'end': 629.254, 'src': 'heatmap', 'start': 575.754, 'weight': 1, 'content': [{'end': 579.517, 'text': 'So we can say ng click is equal to update value.', 'start': 575.754, 'duration': 3.763}, {'end': 580.698, 'text': "And that's a function.", 'start': 579.857, 'duration': 0.841}, {'end': 584.741, 'text': "And we'll just put some as the value for our button.", 'start': 580.978, 'duration': 3.763}, {'end': 589.918, 'text': 'throw a couple break statements in here and then, if we want to get this value right here,', 'start': 585.077, 'duration': 4.841}, {'end': 598.1, 'text': "the calculation what we're going to do is we're going to be able to display that scope value inside of this using what's called an expression,", 'start': 589.918, 'duration': 8.182}, {'end': 603.021, 'text': 'just a couple curly brackets and then calculation and that will automatically display right there.', 'start': 598.1, 'duration': 4.921}, {'end': 605.961, 'text': 'and if we reload it, you can see right here values one and one.', 'start': 603.021, 'duration': 2.94}, {'end': 615.891, 'text': 'those default values one and one come from this definition right here and we can come in here and change those values and hit sum and you can see the calculations automatically generated.', 'start': 605.961, 'duration': 9.93}, {'end': 620.927, 'text': 'So you can see just how easy it is to come in here and change all those different values and work with them.', 'start': 615.911, 'duration': 5.016}, {'end': 629.254, 'text': "and you saw an example basically of a whole bunch of different things directives and models and how we're going to be able to update all those different values.", 'start': 621.351, 'duration': 7.903}], 'summary': 'Demonstrates ng click function and value update in angularjs, allowing for easy manipulation and display of calculated values.', 'duration': 53.5, 'max_score': 575.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY575754.jpg'}, {'end': 629.254, 'src': 'embed', 'start': 605.961, 'weight': 2, 'content': [{'end': 615.891, 'text': 'those default values one and one come from this definition right here and we can come in here and change those values and hit sum and you can see the calculations automatically generated.', 'start': 605.961, 'duration': 9.93}, {'end': 620.927, 'text': 'So you can see just how easy it is to come in here and change all those different values and work with them.', 'start': 615.911, 'duration': 5.016}, {'end': 629.254, 'text': "and you saw an example basically of a whole bunch of different things directives and models and how we're going to be able to update all those different values.", 'start': 621.351, 'duration': 7.903}], 'summary': 'Easy to change and calculate values in the model, demonstrating flexibility and ease of use.', 'duration': 23.293, 'max_score': 605.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY605961.jpg'}, {'end': 895.949, 'src': 'embed', 'start': 867.577, 'weight': 0, 'content': [{'end': 870.278, 'text': "so one through ten is what we're going to be generating here,", 'start': 867.577, 'duration': 2.701}, {'end': 876.322, 'text': "and then we'll do the same thing for random number two and we'll see how they generate different numbers randomly.", 'start': 870.278, 'duration': 6.044}, {'end': 877.617, 'text': "And that's all we need to do.", 'start': 876.636, 'duration': 0.981}, {'end': 878.777, 'text': 'We can reload this.', 'start': 877.897, 'duration': 0.88}, {'end': 885.542, 'text': 'And you can see, first random number is 10, second random number is 7, 8 and 10, 6 and 3, and so forth and so on.', 'start': 879.238, 'duration': 6.304}, {'end': 889.325, 'text': 'And in this situation, we have one controller and two views.', 'start': 885.962, 'duration': 3.363}, {'end': 892.587, 'text': "Now let's take a look at how we can use multiple different controllers.", 'start': 889.685, 'duration': 2.902}, {'end': 895.949, 'text': "So let's jump over into the JavaScript first.", 'start': 893.287, 'duration': 2.662}], 'summary': 'Generating random numbers using one controller and two views.', 'duration': 28.372, 'max_score': 867.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY867577.jpg'}], 'start': 349.71, 'title': 'Angularjs concepts and usage', 'summary': 'Covers defining controllers, linking html elements to scope variables, utilizing dependency injection, data binding, controllers, multiple views, and working with ngrepeat. it includes examples on generating random numbers and displaying different moods using multiple views and controllers.', 'chapters': [{'end': 446.255, 'start': 349.71, 'title': 'Angularjs controller and scope', 'summary': "Explains the process of defining a controller in angularjs, linking html elements to variables in the scope, and utilizing dependency injection for the controller function, highlighting the use of 'ng-controller', 'scope' component, and 'dependency injection'.", 'duration': 96.545, 'highlights': ["The process of defining a controller in AngularJS involves using 'ng-controller' to specify the controller name in the HTML, and then defining the controller function in JavaScript, linking it to the HTML controller name.", "Linking HTML elements to variables in the scope is achieved through the use of the 'scope' component, allowing data to be provided to the view.", "Dependency injection for the controller function is demonstrated, where the 'scope' component is automatically passed into the function by AngularJS, showcasing the concept of dependency injection."]}, {'end': 990.49, 'start': 446.255, 'title': 'Angularjs data binding and controllers', 'summary': 'Covers the basics of angularjs data binding, controllers, and multiple views, demonstrating how to create and update values on the screen, perform calculations, bind data to html, use expressions, and work with ngrepeat to cycle through a list of information. it also showcases the usage of multiple views and controllers to generate random numbers and display different moods.', 'duration': 544.235, 'highlights': ['The chapter covers the basics of AngularJS data binding, controllers, and multiple views, demonstrating how to create and update values on the screen, perform calculations, bind data to HTML, use expressions, and work with ngRepeat to cycle through a list of information. demonstrating how to create and update values on the screen, perform calculations, bind data to HTML, use expressions, and work with ngRepeat to cycle through a list of information', 'The chapter also showcases the usage of multiple views and controllers to generate random numbers and display different moods. showcases the usage of multiple views and controllers to generate random numbers and display different moods']}], 'duration': 640.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY349710.jpg', 'highlights': ['The chapter covers the basics of AngularJS data binding, controllers, and multiple views, demonstrating how to create and update values on the screen, perform calculations, bind data to HTML, use expressions, and work with ngRepeat to cycle through a list of information.', 'The chapter also showcases the usage of multiple views and controllers to generate random numbers and display different moods.', "The process of defining a controller in AngularJS involves using 'ng-controller' to specify the controller name in the HTML, and then defining the controller function in JavaScript, linking it to the HTML controller name.", "Linking HTML elements to variables in the scope is achieved through the use of the 'scope' component, allowing data to be provided to the view.", "Dependency injection for the controller function is demonstrated, where the 'scope' component is automatically passed into the function by AngularJS, showcasing the concept of dependency injection."]}, {'end': 1428.256, 'segs': [{'end': 1096.514, 'src': 'embed', 'start': 1072.273, 'weight': 0, 'content': [{'end': 1078.259, 'text': "And you can see here I'm referencing that controller that I have over there, glist control, grocery list control.", 'start': 1072.273, 'duration': 5.986}, {'end': 1084.146, 'text': "And like I showed you previously, you're going to be able to bind data using either expressions or ng-bind.", 'start': 1078.48, 'duration': 5.666}, {'end': 1087.508, 'text': "For the most part, I like to use expressions, though, because they're just easier.", 'start': 1084.446, 'duration': 3.062}, {'end': 1088.609, 'text': 'But you can go either way.', 'start': 1087.728, 'duration': 0.881}, {'end': 1092.792, 'text': "Well, let's say we want to give this a class name of list title.", 'start': 1088.809, 'duration': 3.983}, {'end': 1096.514, 'text': 'And we wanted to get the number of items in our grocery list.', 'start': 1093.172, 'duration': 3.342}], 'summary': 'Demonstrates binding data with expressions or ng-bind, and referencing a controller for grocery list control.', 'duration': 24.241, 'max_score': 1072.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1072273.jpg'}, {'end': 1167.689, 'src': 'embed', 'start': 1138.441, 'weight': 1, 'content': [{'end': 1139.781, 'text': "let's go and do something here.", 'start': 1138.441, 'duration': 1.34}, {'end': 1143.084, 'text': "we'll say ol, Because I want to show you a couple different neat things here.", 'start': 1139.781, 'duration': 3.303}, {'end': 1145.985, 'text': "And I know you're not supposed to put styling inside here.", 'start': 1143.504, 'duration': 2.481}, {'end': 1149.565, 'text': "I'm just doing this just as a quick and dirty way to get around things.", 'start': 1146.005, 'duration': 3.56}, {'end': 1150.806, 'text': '15 pixels.', 'start': 1150.146, 'duration': 0.66}, {'end': 1154.686, 'text': "So we're going to create an ordered list and a list item.", 'start': 1151.226, 'duration': 3.46}, {'end': 1158.647, 'text': "And I'm going to use an expression here to go and get one of my grocery items.", 'start': 1154.986, 'duration': 3.661}, {'end': 1159.927, 'text': "So I'm going to say groceries.", 'start': 1158.727, 'duration': 1.2}, {'end': 1162.868, 'text': "And I'm going to get the first item since it's zero based array.", 'start': 1160.207, 'duration': 2.661}, {'end': 1166.708, 'text': 'And I want specifically just the item name in this situation.', 'start': 1163.148, 'duration': 3.56}, {'end': 1167.689, 'text': 'And list item.', 'start': 1167.008, 'duration': 0.681}], 'summary': 'Creating an ordered list with 15 pixels and displaying the first grocery item.', 'duration': 29.248, 'max_score': 1138.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1138441.jpg'}, {'end': 1272.126, 'src': 'embed', 'start': 1245.427, 'weight': 4, 'content': [{'end': 1253.272, 'text': "true. if the item that we're currently working with is the first item, you're also going to have last, and that's gonna come back true.", 'start': 1245.427, 'duration': 7.845}, {'end': 1258.136, 'text': "if the item you're currently working with is the last item, I'm gonna demonstrate this middle.", 'start': 1253.272, 'duration': 4.864}, {'end': 1265.141, 'text': "if it is neither the first or the last, it's gonna come back as true and you're also gonna be able to use even as well as odd,", 'start': 1258.136, 'duration': 7.005}, {'end': 1272.126, 'text': "and in those situations, or in this situation, if the is, if the item is a even index, it's gonna come back.", 'start': 1265.141, 'duration': 6.985}], 'summary': 'Demonstrating conditions for first, last, even, and odd items.', 'duration': 26.699, 'max_score': 1245.427, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1245427.jpg'}, {'end': 1386.359, 'src': 'embed', 'start': 1364.213, 'weight': 5, 'content': [{'end': 1374.176, 'text': "have it just be change first item and then we'll provide an input and use ng model again to bind that over there with the first grocery item.", 'start': 1364.213, 'duration': 9.963}, {'end': 1376.576, 'text': 'so that would be groceries zero, like this.', 'start': 1374.176, 'duration': 2.4}, {'end': 1383.418, 'text': 'and then reference item specifically and make sure this is inside of quotes, and it will close off that input box.', 'start': 1376.576, 'duration': 6.842}, {'end': 1385.078, 'text': "see, we're not doing anything with the javascript.", 'start': 1383.418, 'duration': 1.66}, {'end': 1386.359, 'text': "it's going to automatically work.", 'start': 1385.078, 'duration': 1.281}], 'summary': 'Using ng-model to bind input for the first grocery item.', 'duration': 22.146, 'max_score': 1364.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1364213.jpg'}], 'start': 990.49, 'title': 'Ng cloak directive and angularjs data binding', 'summary': 'Explains the usage of ng cloak directive in angularjs for smooth functionality and design. it also demonstrates data binding techniques, including array manipulation and two-way binding.', 'chapters': [{'end': 1039.175, 'start': 990.49, 'title': 'Ng cloak directive and its usage', 'summary': 'Explains the usage of ng cloak directive in angularjs to prevent the display of curly brackets until the content has been properly compiled, facilitating smooth functionality and design. it also highlights the necessity of placing the reference to angularjs near the top for avoiding the usage of ng cloak and demonstrates adding data to a controller in a js file.', 'duration': 48.685, 'highlights': ['The ng cloak directive is used in AngularJS to prevent the display of curly brackets until everything has been properly compiled and ready to be displayed.', 'Placing the reference to AngularJS near the top avoids the usage of ng cloak, ensuring smooth functionality and design.', 'Adding data to a controller in a JS file allows for the utilization of the data within the application.']}, {'end': 1428.256, 'start': 1039.476, 'title': 'Angularjs data binding', 'summary': 'Demonstrates various data binding techniques in angularjs, including creating arrays, manipulating array data, using ng-repeat to cycle through and display array items, and implementing two-way binding to allow users to change the data model.', 'duration': 388.78, 'highlights': ['The tutorial demonstrates creating arrays and manipulating array data in AngularJS. The speaker creates an array of different grocery objects and demonstrates ways to manipulate them, such as checking if an item is purchased and displaying the number of items in the grocery list.', 'The demonstration showcases using ng-repeat to cycle through and display array items, including utilizing ng-if and index to skip and manipulate specific items. The tutorial illustrates using ng-repeat to cycle through and list array items, skipping specific items using ng-if and index, and utilizing ng-repeat index, first, last, even, and odd to manipulate the displayed items.', 'The tutorial explains and implements two-way data binding, allowing users to change the data model, and showcases using ng-include to input HTML fragments directly into pages. The speaker demonstrates implementing two-way binding to allow users to change the data model, and showcases using ng-include to input HTML fragments directly into pages. Additionally, a note is provided on the requirement of having the content inside a server for ng-include to work.']}], 'duration': 437.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY990490.jpg', 'highlights': ['The tutorial demonstrates creating arrays and manipulating array data in AngularJS. The speaker creates an array of different grocery objects and demonstrates ways to manipulate them, such as checking if an item is purchased and displaying the number of items in the grocery list.', 'The demonstration showcases using ng-repeat to cycle through and display array items, including utilizing ng-if and index to skip and manipulate specific items. The tutorial illustrates using ng-repeat to cycle through and list array items, skipping specific items using ng-if and index, and utilizing ng-repeat index, first, last, even, and odd to manipulate the displayed items.', 'The tutorial explains and implements two-way data binding, allowing users to change the data model, and showcases using ng-include to input HTML fragments directly into pages. The speaker demonstrates implementing two-way binding to allow users to change the data model, and showcases using ng-include to input HTML fragments directly into pages. Additionally, a note is provided on the requirement of having the content inside a server for ng-include to work.', 'The ng cloak directive is used in AngularJS to prevent the display of curly brackets until everything has been properly compiled and ready to be displayed.', 'Placing the reference to AngularJS near the top avoids the usage of ng cloak, ensuring smooth functionality and design.', 'Adding data to a controller in a JS file allows for the utilization of the data within the application.']}, {'end': 1795.367, 'segs': [{'end': 1601.178, 'src': 'heatmap', 'start': 1568.342, 'weight': 0.704, 'content': [{'end': 1570.603, 'text': 'Remember, this is the thing that we were checking.', 'start': 1568.342, 'duration': 2.261}, {'end': 1574.084, 'text': "If it's true, it's going see their show list.", 'start': 1570.803, 'duration': 3.281}, {'end': 1576.386, 'text': "if it's true, it's going to return unordered list.", 'start': 1574.084, 'duration': 2.302}, {'end': 1578.347, 'text': "if it's false, it's going to return grocery list.", 'start': 1576.386, 'duration': 1.961}, {'end': 1582.63, 'text': 'so two different partials, depending upon whatever this checkbox is checked or not.', 'start': 1578.347, 'duration': 4.283}, {'end': 1591.135, 'text': "close that off and then we could say show unordered list and let's throw a label around this as well and then close off our label right here and now.", 'start': 1582.63, 'duration': 8.505}, {'end': 1601.178, 'text': 'what we can do is call ng include as an element itself and have the source be equal to a call to the get list function.', 'start': 1591.135, 'duration': 10.043}], 'summary': 'Code will display an unordered list if true, grocery list if false.', 'duration': 32.836, 'max_score': 1568.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1568342.jpg'}, {'end': 1631.921, 'src': 'embed', 'start': 1606.461, 'weight': 0, 'content': [{'end': 1611.744, 'text': "and that's what happens whenever you just do a regular old ng include and give it a very specific file name.", 'start': 1606.461, 'duration': 5.283}, {'end': 1618.889, 'text': "it's going to put that html partial inside of there and here you can see that we can change the partial just by checking on this little check box.", 'start': 1611.744, 'duration': 7.145}, {'end': 1620.23, 'text': 'see how they switch back and forth.', 'start': 1618.889, 'duration': 1.341}, {'end': 1626.716, 'text': "So that's how we can use an event of sorts to automatically change the HTML partial that shows up inside of there.", 'start': 1620.61, 'duration': 6.106}, {'end': 1627.897, 'text': 'So another cool trick.', 'start': 1627.016, 'duration': 0.881}, {'end': 1631.921, 'text': "Another thing we can do that's cool is we're going to be able to use something called ng switch,", 'start': 1628.098, 'duration': 3.823}], 'summary': 'Using ng include to switch html partials and ng switch for more functionality.', 'duration': 25.46, 'max_score': 1606.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1606461.jpg'}], 'start': 1428.561, 'title': 'Creating html grocery lists and angularjs event handling', 'summary': 'Covers creating html grocery lists with angularjs using ordered and unordered lists and ng repeat, along with demonstrating event handling, dynamic loading of html partials based on user input, and enabling/disabling elements in angularjs.', 'chapters': [{'end': 1461.207, 'start': 1428.561, 'title': 'Creating html grocery lists with angularjs', 'summary': 'Demonstrates creating an html grocery list with angularjs, utilizing both ordered and unordered lists and employing ng repeat to automatically generate grocery items.', 'duration': 32.646, 'highlights': ['The chapter demonstrates creating an HTML grocery list with AngularJS, utilizing both ordered and unordered lists and employing ng repeat to automatically generate grocery items.', 'Users can use all AngularJS techniques outside and pull them directly inside, allowing them to work automatically.', 'The chapter also mentions using ng repeat again to iterate through grocery items and display them, showcasing the practical application of AngularJS.']}, {'end': 1795.367, 'start': 1461.207, 'title': 'Angularjs event handling', 'summary': 'Demonstrates how to use nginclude and ngswitch directives to dynamically load html partials based on user input, as well as how to handle events and enable/disable elements in angularjs.', 'duration': 334.16, 'highlights': ['Demonstrates using ngInclude directive to dynamically load HTML partials based on user input The speaker explains how to use ngInclude to load different HTML partials, such as an unordered list or a regular grocery list, based on the value of a checkbox, providing a dynamic user interface.', 'Illustrates using ngSwitch directive to conditionally insert or remove an element based on user input The chapter showcases the use of ngSwitch to conditionally display different elements based on user input, demonstrating how to handle multiple cases and a default case while dynamically updating the content.', 'Explains event handling using ngBlur event and incrementing value The transcript shows how to handle the ngBlur event to increment a value when a user leaves an input box, providing an example of displaying the incrementing value on the screen.']}], 'duration': 366.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1428561.jpg', 'highlights': ['The chapter demonstrates creating an HTML grocery list with AngularJS, utilizing both ordered and unordered lists and employing ng repeat to automatically generate grocery items.', 'Demonstrates using ngInclude directive to dynamically load HTML partials based on user input The speaker explains how to use ngInclude to load different HTML partials, such as an unordered list or a regular grocery list, based on the value of a checkbox, providing a dynamic user interface.', 'Illustrates using ngSwitch directive to conditionally insert or remove an element based on user input The chapter showcases the use of ngSwitch to conditionally display different elements based on user input, demonstrating how to handle multiple cases and a default case while dynamically updating the content.']}, {'end': 2029.747, 'segs': [{'end': 1841.063, 'src': 'embed', 'start': 1795.367, 'weight': 3, 'content': [{'end': 1798.29, 'text': 'save that, then jump over into the js file.', 'start': 1795.367, 'duration': 2.923}, {'end': 1806.476, 'text': "over here and inside of the scope object I'm going to give blur a default value of zero and save that, jump back over here,", 'start': 1798.29, 'duration': 8.186}, {'end': 1808.238, 'text': 'save all that stuff and reload.', 'start': 1806.476, 'duration': 1.762}, {'end': 1812.021, 'text': 'well, change this to angulartut4.html.', 'start': 1808.238, 'duration': 3.783}, {'end': 1813.502, 'text': "you can see there's the input box.", 'start': 1812.021, 'duration': 1.481}, {'end': 1814.463, 'text': 'I clicked inside of it.', 'start': 1813.502, 'duration': 0.961}, {'end': 1815.804, 'text': 'I left That incremented.', 'start': 1814.463, 'duration': 1.341}, {'end': 1817.445, 'text': 'Clicked again, it incremented.', 'start': 1815.964, 'duration': 1.481}, {'end': 1819.006, 'text': 'Click again, it incremented.', 'start': 1817.645, 'duration': 1.361}, {'end': 1820.588, 'text': 'And you can add a ton.', 'start': 1819.146, 'duration': 1.442}, {'end': 1825.652, 'text': "I'm actually going to add every event to just this input box just to demonstrate all of them.", 'start': 1820.728, 'duration': 4.924}, {'end': 1826.432, 'text': 'So there you go.', 'start': 1825.752, 'duration': 0.68}, {'end': 1834.439, 'text': 'I added in click, double click, copy, paste, cut, focus, model, change, key down, mouse enter, and mouse leave.', 'start': 1826.673, 'duration': 7.766}, {'end': 1841.063, 'text': "And you can see all those other different events and they're structured exactly the same way the blur was, except key down is going to be different.", 'start': 1834.699, 'duration': 6.364}], 'summary': 'Implemented multiple events for input box with incrementing functionality.', 'duration': 45.696, 'max_score': 1795.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1795367.jpg'}, {'end': 2037.031, 'src': 'embed', 'start': 2008.862, 'weight': 0, 'content': [{'end': 2013.141, 'text': "I could come up here and click inside of there and hit G, for example, And it didn't show.", 'start': 2008.862, 'duration': 4.279}, {'end': 2014.342, 'text': "Let's go and see why.", 'start': 2013.221, 'duration': 1.121}, {'end': 2018.243, 'text': "And the reason why that didn't work is I had KD key with a lowercase K.", 'start': 2014.362, 'duration': 3.881}, {'end': 2021.224, 'text': "Let's change that to KD key like that and reload it.", 'start': 2018.243, 'duration': 2.981}, {'end': 2026.106, 'text': 'And if I come in here to this guy and hit G and key pressed, you can see G shows up.', 'start': 2021.404, 'duration': 4.702}, {'end': 2029.747, 'text': 'And if I come in and hit one, you can see that key pressed one shows up.', 'start': 2026.246, 'duration': 3.501}, {'end': 2034.109, 'text': 'And you can also see that the mouse enter and mouse leave guys are also working.', 'start': 2030.188, 'duration': 3.921}, {'end': 2037.031, 'text': "So that's a rundown of all the different events we can use.", 'start': 2034.229, 'duration': 2.802}], 'summary': "Debugged lowercase 'k' issue in code, fixed to 'kd key', all events now working", 'duration': 28.169, 'max_score': 2008.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY2008862.jpg'}], 'start': 1795.367, 'title': 'Javascript event handling', 'summary': 'Demonstrates handling various javascript events such as click, double click, copy, paste, focus, model, change, key down, mouse enter, and mouse leave, with examples and troubleshooting.', 'chapters': [{'end': 1924.661, 'start': 1795.367, 'title': 'Handling events in javascript', 'summary': 'Demonstrates handling various events such as click, double click, copy, paste, focus, model, change, key down, mouse enter, and mouse leave in a javascript file, with an example of incrementing a value on clicking and handling keyboard input.', 'duration': 129.294, 'highlights': ['Demonstrated handling of various events such as click, double click, copy, paste, focus, model, change, key down, mouse enter, and mouse leave in JavaScript. The chapter showcases the addition of multiple events to an input box and their structured handling in a JavaScript file.', 'Example of incrementing a value on clicking inside an input box. The example illustrates the behavior of incrementing a value on clicking inside an input box, showcasing the functionality of the click event.', 'Explanation of handling keyboard input in JavaScript, converting key codes to characters and numbers for display. The chapter explains the handling of keyboard input in JavaScript, including the conversion of key codes to characters and numbers for proper display on the screen.']}, {'end': 2029.747, 'start': 1925.001, 'title': 'Event handling in javascript', 'summary': 'Covers event handling in javascript, including click, double click, change, copy, paste, cut, focus, key pressed, mouse enter, and mouse leave events, with examples and troubleshooting.', 'duration': 104.746, 'highlights': ['The chapter covers various event handling in JavaScript, including click, double click, change, copy, paste, cut, focus, key pressed, mouse enter, and mouse leave events.', 'The speaker demonstrates the functionality of these events with examples, such as typing in text and observing the change event firing seven times.', 'The transcript includes troubleshooting instances, such as correcting the event key name to display the expected key pressed output, showcasing practical problem-solving in event handling.', 'Examples of event handling include mouse enter, mouse leave, mouse down, mouse move, mouse over, and mouse up, providing a comprehensive overview of event handling capabilities in JavaScript.']}], 'duration': 234.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY1795367.jpg', 'highlights': ['Demonstrated handling of various events such as click, double click, copy, paste, focus, model, change, key down, mouse enter, and mouse leave in JavaScript.', 'The chapter covers various event handling in JavaScript, including click, double click, change, copy, paste, cut, focus, key pressed, mouse enter, and mouse leave events.', 'The chapter showcases the addition of multiple events to an input box and their structured handling in a JavaScript file.', 'The speaker demonstrates the functionality of these events with examples, such as typing in text and observing the change event firing seven times.', 'Example of incrementing a value on clicking inside an input box.', 'The example illustrates the behavior of incrementing a value on clicking inside an input box, showcasing the functionality of the click event.', 'The transcript includes troubleshooting instances, such as correcting the event key name to display the expected key pressed output, showcasing practical problem-solving in event handling.', 'Explanation of handling keyboard input in JavaScript, converting key codes to characters and numbers for display.']}, {'end': 2411.772, 'segs': [{'end': 2057.226, 'src': 'embed', 'start': 2030.188, 'weight': 0, 'content': [{'end': 2034.109, 'text': 'And you can also see that the mouse enter and mouse leave guys are also working.', 'start': 2030.188, 'duration': 3.921}, {'end': 2037.031, 'text': "So that's a rundown of all the different events we can use.", 'start': 2034.229, 'duration': 2.802}, {'end': 2040.974, 'text': "Now I'm going to show you how you can enable as well as disable different elements.", 'start': 2037.271, 'duration': 3.703}, {'end': 2044.957, 'text': "I'm going to clean up all the code here a little bit so we don't need to display all that at once.", 'start': 2040.994, 'duration': 3.963}, {'end': 2048.199, 'text': "And I'm going to create a new scope variable.", 'start': 2045.557, 'duration': 2.642}, {'end': 2051.322, 'text': "And it's going to be called disable button.", 'start': 2048.518, 'duration': 2.804}, {'end': 2055.123, 'text': "And I'm going to give it a default value of true just to start it off.", 'start': 2051.822, 'duration': 3.301}, {'end': 2057.226, 'text': "And I'm going to jump back over inside of here.", 'start': 2055.143, 'duration': 2.083}], 'summary': "Demonstrated enabling and disabling elements using scope variable 'disable button'.", 'duration': 27.038, 'max_score': 2030.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY2030188.jpg'}, {'end': 2301.188, 'src': 'embed', 'start': 2276.142, 'weight': 4, 'content': [{'end': 2284.781, 'text': "and this is going to be the guy we're going to be changing And we'll define this as ngClass is going to be equal to whatever the value of text styling is going to be equal to.", 'start': 2276.142, 'duration': 8.639}, {'end': 2287.382, 'text': "And we'll just make this some random text.", 'start': 2284.801, 'duration': 2.581}, {'end': 2289.723, 'text': 'Blue text and bold text like that.', 'start': 2287.642, 'duration': 2.081}, {'end': 2290.664, 'text': 'And reload it.', 'start': 2290.043, 'duration': 0.621}, {'end': 2291.504, 'text': 'Blue text.', 'start': 2290.904, 'duration': 0.6}, {'end': 2292.304, 'text': "See it's blue.", 'start': 2291.744, 'duration': 0.56}, {'end': 2293.165, 'text': 'Bold text.', 'start': 2292.584, 'duration': 0.581}, {'end': 2294.065, 'text': "Now it's bold.", 'start': 2293.505, 'duration': 0.56}, {'end': 2301.188, 'text': 'Okay, So, whatever you give the value for text styling here in this select box or how you would change the model in any way,', 'start': 2294.285, 'duration': 6.903}], 'summary': 'Using ngclass to change text styling in angularjs.', 'duration': 25.046, 'max_score': 2276.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY2276142.jpg'}], 'start': 2030.188, 'title': 'Angularjs events and dynamic elements', 'summary': 'Covers mouse enter and mouse leave events, enabling/disabling elements, and showing/hiding elements with ng-disabled and ng-hide in angularjs. it also demonstrates dynamic content creation, class manipulation, and binding classes on even and odd elements using ngclass and ng-repeat.', 'chapters': [{'end': 2153.308, 'start': 2030.188, 'title': 'Angularjs events, enable/disable and show/hide elements', 'summary': 'Covers how to use mouse enter and mouse leave events, enable and disable elements using ng-disabled, and hide or show elements based on conditions using angularjs, with examples demonstrating the functionality and changes in the webpage.', 'duration': 123.12, 'highlights': ['Demonstrating mouse enter and mouse leave events functionality in AngularJS The chapter covers how to use mouse enter and mouse leave events, which are demonstrated to be working in the provided code.', 'Enabling and disabling elements using ng-disabled in AngularJS The chapter demonstrates enabling and disabling a button using ng-disabled, with a checkbox controlling the state. The example shows the button being initially disabled and then enabled upon clicking the checkbox.', 'Showing and hiding elements based on conditions in AngularJS The chapter explains how to show or hide elements based on conditions, such as day or night, and demonstrates using a scope variable to control the visibility of elements, including tables.']}, {'end': 2411.772, 'start': 2153.789, 'title': 'Angularjs dynamic elements and classes', 'summary': 'Demonstrates creating dynamic content using ng-hide, changing classes dynamically with ngclass, and binding classes on even and odd elements using ng-repeat, showcasing the functionality of angularjs in manipulating elements and styling.', 'duration': 257.983, 'highlights': ['The chapter demonstrates creating dynamic content using ng-hide, changing classes dynamically with ngClass, and binding classes on even and odd elements using ng-repeat This summarizes the key points of the entire transcript, showcasing the main functionalities of AngularJS in manipulating elements and styling.', 'The tutorial shows using ng-hide to display different paragraphs based on the checkbox status and using ngClass to dynamically change element classes based on a select box value Demonstrates the usage of ng-hide to display different content based on a checkbox status, and ngClass to dynamically change element classes based on select box value.', 'The chapter illustrates binding classes on even and odd elements using ng-repeat, providing different styling for each element based on its position Illustrates the usage of ng-repeat to cycle through elements and bind different classes for even and odd elements, providing distinct styling for each element based on its position.']}], 'duration': 381.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OPxeCiy0RdY/pics/OPxeCiy0RdY2030188.jpg', 'highlights': ['Covers mouse enter and mouse leave events, enabling/disabling elements, and showing/hiding elements with ng-disabled and ng-hide in AngularJS.', 'Demonstrates creating dynamic content using ng-hide, changing classes dynamically with ngClass, and binding classes on even and odd elements using ng-repeat.', 'Enabling and disabling elements using ng-disabled in AngularJS.', 'Showing and hiding elements based on conditions in AngularJS.', 'The chapter demonstrates using ng-hide to display different paragraphs based on the checkbox status and using ngClass to dynamically change element classes based on a select box value.', 'Illustrates binding classes on even and odd elements using ng-repeat, providing different styling for each element based on its position.', 'Demonstrating mouse enter and mouse leave events functionality in AngularJS.', 'The tutorial shows using ng-hide to display different paragraphs based on the checkbox status and using ngClass to dynamically change element classes based on a select box value.', 'The chapter illustrates binding classes on even and odd elements using ng-repeat, providing different styling for each element based on its position.']}], 'highlights': ['The tutorial emphasizes the importance of having a specific folder structure for HTML and JavaScript files, to ensure proper organization and functionality.', 'The chapter demonstrates the process of importing AngularJS via CDN, and the placement of the script tag near the end of the HTML file for its usage.', 'The ng-app directive is used to define the AngularJS module, referenced in the JavaScript file and placed either in the HTML tag or in the body.', "The ng-init directive initializes application data by assigning different values to variables, exemplified by assigning values to 'person' and 'capitals' variables.", 'The chapter covers the basics of AngularJS data binding, controllers, and multiple views, demonstrating how to create and update values on the screen, perform calculations, bind data to HTML, use expressions, and work with ngRepeat to cycle through a list of information.', 'The tutorial demonstrates creating arrays and manipulating array data in AngularJS. The speaker creates an array of different grocery objects and demonstrates ways to manipulate them, such as checking if an item is purchased and displaying the number of items in the grocery list.', 'The chapter demonstrates creating an HTML grocery list with AngularJS, utilizing both ordered and unordered lists and employing ng repeat to automatically generate grocery items.', 'Demonstrated handling of various events such as click, double click, copy, paste, focus, model, change, key down, mouse enter, and mouse leave in JavaScript.', 'Covers mouse enter and mouse leave events, enabling/disabling elements, and showing/hiding elements with ng-disabled and ng-hide in AngularJS.']}