title
Angularjs Tutorial for Beginners - learn Angular.js using UI-Router

description
Working Angularjs Code Sample on Plunkr: http://plnkr.co/edit/YJvbrV2AFq2r6LjSKeQU?p=preview This tutorial will teach you how to build a single page javascript application using Angular.js from Google. Angular is an amazing framework for rapid development and building stable apps with little effort. I'm using UI-Router (https://github.com/angular-ui/ui-router) for this example, as I really like the way that functions over angular's built-in router. Once you get used to "the angular way", you'll be building an angular.js application in no time. Angular's templating, two-way data binding, and great way of separating concerns makes it an all-around great javascript framework. Next up: Learn Angular Directives! http://www.youtube.com/watch?v=0r5QvzjjKDc NOTE: At 30:15, there's an error because I forgot to change the Home Controller to match the new service syntax on line 5: Friends.get().then(function(data) { $scope.friends = data; }); -~-~~-~~~-~~-~- Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device" https://www.youtube.com/watch?v=fgOO9YUFlGI -~-~~-~~~-~~-~-

detail
{'title': 'Angularjs Tutorial for Beginners - learn Angular.js using UI-Router', 'heatmap': [{'end': 613.368, 'start': 579.85, 'weight': 0.73}, {'end': 1203.06, 'start': 1185.084, 'weight': 1}], 'summary': 'This tutorial covers angular.js basics, routing, sp app development, data binding issues, using angular resolve, real-time friend editor, conditional styling, and service implementation, providing a comprehensive understanding of angular.js for beginners.', 'chapters': [{'end': 233.508, 'segs': [{'end': 28.625, 'src': 'embed', 'start': 1.135, 'weight': 0, 'content': [{'end': 4.236, 'text': 'Hey there, we are going to be learning Angular.js.', 'start': 1.135, 'duration': 3.101}, {'end': 8.377, 'text': 'Angular is basically an MV star, whatever.', 'start': 5.056, 'duration': 3.321}, {'end': 13.239, 'text': "It's one of the ways of making a single page web app in JavaScript.", 'start': 8.437, 'duration': 4.802}, {'end': 15.28, 'text': "So with no further ado, let's just get into it.", 'start': 13.399, 'duration': 1.881}, {'end': 19.361, 'text': "I'm going to assume you know a decent bit about JavaScript already.", 'start': 15.38, 'duration': 3.981}, {'end': 27.184, 'text': "Once I'm done with this, I'll probably do a beginner level intro video for people who are not familiar with javascript already.", 'start': 19.801, 'duration': 7.383}, {'end': 27.584, 'text': 'so kind of.', 'start': 27.184, 'duration': 0.4}, {'end': 28.625, 'text': 'the premise here is.', 'start': 27.584, 'duration': 1.041}], 'summary': 'Introduction to learning angular.js for single page web apps in javascript.', 'duration': 27.49, 'max_score': 1.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1135.jpg'}, {'end': 115.35, 'src': 'embed', 'start': 41.737, 'weight': 2, 'content': [{'end': 42.578, 'text': 'what we got here?', 'start': 41.737, 'duration': 0.841}, {'end': 45.903, 'text': 'just kind of importing a basic style sheet, Nothing fancy.', 'start': 42.578, 'duration': 3.325}, {'end': 47.824, 'text': "I'm importing jQuery, Angular.", 'start': 45.963, 'duration': 1.861}, {'end': 57.268, 'text': "And I'm going to be using Angular UI Router, which is kind of an add-on routing system, which is definitely, so far anyway the way to go with Angular.", 'start': 47.844, 'duration': 9.424}, {'end': 63.17, 'text': "And the only JS file I'm including is app.js so far, and then some bootstrap stuff.", 'start': 58.068, 'duration': 5.102}, {'end': 67.892, 'text': "So what we're going to do is we're going to say that this is what we want our app to be.", 'start': 63.75, 'duration': 4.142}, {'end': 71.453, 'text': 'The first thing you do is you define ng app.', 'start': 68.132, 'duration': 3.321}, {'end': 76.431, 'text': "equals and then the name of the module that you're going to be using for your Angular app.", 'start': 72.549, 'duration': 3.882}, {'end': 79.813, 'text': "So we'll just call it app to make it simple.", 'start': 76.451, 'duration': 3.362}, {'end': 81.174, 'text': 'ngApp equals app.', 'start': 80.374, 'duration': 0.8}, {'end': 85.296, 'text': 'So now Angular is going to instantiate on this element.', 'start': 81.234, 'duration': 4.062}, {'end': 90.059, 'text': 'What we are going to do then is we need to define a view for the UI router.', 'start': 86.077, 'duration': 3.982}, {'end': 94.262, 'text': 'So we will do a div, and we will go UIView.', 'start': 90.319, 'duration': 3.943}, {'end': 98.424, 'text': "So that tells us pop whatever view we're loading right in there.", 'start': 95.022, 'duration': 3.402}, {'end': 101.945, 'text': 'Okay, so, basically, when Angular sees an app,', 'start': 99.164, 'duration': 2.781}, {'end': 108.187, 'text': "what it's going to do is it's going to evaluate everything inside of it and it uses that as your templating.", 'start': 101.945, 'duration': 6.242}, {'end': 115.35, 'text': "So, basically, you'll see a lot of the Angular way is.", 'start': 109.147, 'duration': 6.203}], 'summary': 'Setting up angular app with ui router for routing, importing basic style sheet and necessary js files.', 'duration': 73.613, 'max_score': 41.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w41737.jpg'}, {'end': 199.961, 'src': 'embed', 'start': 174.876, 'weight': 5, 'content': [{'end': 180.518, 'text': "When you're first defining a module, you have to at least include a blank array for dependencies.", 'start': 174.876, 'duration': 5.642}, {'end': 181.798, 'text': 'Otherwise it will break.', 'start': 180.658, 'duration': 1.14}, {'end': 185.859, 'text': "So I'm going to, my only dependency is ui.router.", 'start': 182.638, 'duration': 3.221}, {'end': 190.441, 'text': 'Make sure ui.router has loaded before my app fires.', 'start': 187.52, 'duration': 2.921}, {'end': 196.499, 'text': "And now we've got an app and you'll notice that It's instantiated, and I'm loading in my navigation.", 'start': 191.161, 'duration': 5.338}, {'end': 197.72, 'text': "I'm going to go back to my index.", 'start': 196.519, 'duration': 1.201}, {'end': 199.961, 'text': "I'm also going to add in a footer.", 'start': 198.6, 'duration': 1.361}], 'summary': 'Defining a module with ui.router as the only dependency to ensure proper loading of the app, including navigation and footer.', 'duration': 25.085, 'max_score': 174.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w174876.jpg'}], 'start': 1.135, 'title': 'Angular.js basics, setup, and module', 'summary': 'Covers the basics of angular.js, emphasizing its use in single page web apps in javascript. it discusses angular app setup, views, and module setup, including defining dependencies and avoiding unterminated quote errors.', 'chapters': [{'end': 63.17, 'start': 1.135, 'title': 'Learning angular.js basics', 'summary': 'Introduces the basics of angular.js, highlighting its use in developing single page web apps in javascript, and emphasizes the importance of understanding javascript concepts before delving into angular.js. it also mentions the use of angular ui router for routing with angular and the inclusion of jquery and bootstrap in the project.', 'duration': 62.035, 'highlights': ['The chapter introduces the basics of Angular.js, highlighting its use in developing single page web apps in JavaScript. Angular.js is presented as a means of creating single page web apps in JavaScript.', 'Emphasizes the importance of understanding JavaScript concepts before delving into Angular.js. It is assumed that the audience has a decent understanding of JavaScript prior to learning Angular.js.', 'Mentions the use of Angular UI Router for routing with Angular and the inclusion of jQuery and bootstrap in the project. Angular UI Router is highlighted as the recommended routing system for Angular. Additionally, the use of jQuery and bootstrap in the project is mentioned.']}, {'end': 144.37, 'start': 63.75, 'title': 'Angular app setup and views', 'summary': 'Explains the setup of an angular app, including defining ng app, creating views with ui router, and using ng include to include html files for templating.', 'duration': 80.62, 'highlights': ['Angular app setup involves defining ng app and instantiating on the element with the module name, such as ngApp equals app.', 'Creating views for the UI router is achieved by using a div with UIView to load the desired view.', 'Using ng include allows for the inclusion of HTML files for templating, such as ng include templates nav.html.']}, {'end': 233.508, 'start': 147.251, 'title': 'Angular app module setup', 'summary': 'Discusses the setup of an angular app module, including defining dependencies, loading navigation and adding a footer, while ensuring the ui.router dependency is included and avoiding unterminated quote errors.', 'duration': 86.257, 'highlights': ['Defining an app module by including the ui.router dependency is crucial for ensuring the app functions properly.', 'Loading navigation and adding a footer are essential components of setting up the Angular app module.', 'Ensuring the avoidance of unterminated quote errors by correctly evaluating JavaScript strings within the app module setup process.']}], 'duration': 232.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1135.jpg', 'highlights': ['The chapter introduces the basics of Angular.js for single page web apps in JavaScript.', 'Emphasizes the importance of understanding JavaScript concepts before delving into Angular.js.', 'Mentions the use of Angular UI Router for routing with Angular and the inclusion of jQuery and bootstrap in the project.', 'Angular app setup involves defining ng app and instantiating on the element with the module name.', 'Creating views for the UI router is achieved by using a div with UIView to load the desired view.', 'Defining an app module by including the ui.router dependency is crucial for ensuring the app functions properly.', 'Loading navigation and adding a footer are essential components of setting up the Angular app module.']}, {'end': 333.749, 'segs': [{'end': 289.22, 'src': 'embed', 'start': 233.548, 'weight': 0, 'content': [{'end': 236.27, 'text': 'So now we have a header, a footer, and absolutely nothing coming in here.', 'start': 233.548, 'duration': 2.722}, {'end': 238.431, 'text': "So let's start defining some routes.", 'start': 236.75, 'duration': 1.681}, {'end': 241.934, 'text': "You'll notice Angular starts off by giving us a hashtag navigation up here.", 'start': 238.491, 'duration': 3.443}, {'end': 246.597, 'text': "And so let's start adding some routes.", 'start': 242.834, 'duration': 3.763}, {'end': 248.218, 'text': 'We have already created the module.', 'start': 246.657, 'duration': 1.561}, {'end': 248.718, 'text': "Now let's go config.", 'start': 248.258, 'duration': 0.46}, {'end': 254.042, 'text': "Config And we're going to do our dependencies.", 'start': 248.738, 'duration': 5.304}, {'end': 260.185, 'text': 'One of the awesome things about Angular is it does dependency injection.', 'start': 254.743, 'duration': 5.442}, {'end': 264.649, 'text': 'If you have not used dependency injection, get ready to fall in love with it.', 'start': 261.147, 'duration': 3.502}, {'end': 269.711, 'text': "We're going to request two dependencies here.", 'start': 266.95, 'duration': 2.761}, {'end': 278.617, 'text': 'And it will insert those two dependencies into my first.', 'start': 273.794, 'duration': 4.823}, {'end': 279.297, 'text': 'Actually, there we go.', 'start': 278.837, 'duration': 0.46}, {'end': 289.22, 'text': 'It will insert those two dependencies into the first two arguments of my function here.', 'start': 280.134, 'duration': 9.086}], 'summary': 'Angular module setup with route configuration and dependency injection.', 'duration': 55.672, 'max_score': 233.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w233548.jpg'}, {'end': 333.749, 'src': 'embed', 'start': 311.452, 'weight': 1, 'content': [{'end': 321.04, 'text': "And the reason we're doing that is because if we didn't do that, when you minify it, these are going to get called like A and B.", 'start': 311.452, 'duration': 9.588}, {'end': 324.203, 'text': "And it's not going to know what dependencies those are.", 'start': 321.04, 'duration': 3.163}, {'end': 327.186, 'text': "So we've kind of got to define what the modules are there.", 'start': 324.283, 'duration': 2.903}, {'end': 333.749, 'text': 'And then you can call them whatever you want, but as a good standard, call them what they actually are.', 'start': 328.268, 'duration': 5.481}], 'summary': 'Defining modules is crucial for proper minification and dependency resolution.', 'duration': 22.297, 'max_score': 311.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w311452.jpg'}], 'start': 233.548, 'title': 'Angular routing and dependency injection', 'summary': 'Delves into configuring routes and utilizing dependency injection in angular, emphasizing the benefits and process of annotating dependencies to avoid issues during minification.', 'chapters': [{'end': 333.749, 'start': 233.548, 'title': 'Angular routing and dependency injection', 'summary': 'Discusses configuring routes and utilizing dependency injection in angular, highlighting the benefits and process of annotating dependencies to avoid issues during minification.', 'duration': 100.201, 'highlights': ['Angular utilizes hashtag navigation for defining routes, and it employs dependency injection, allowing for easy insertion of dependencies into functions.', 'Dependency injection in Angular simplifies the process of managing dependencies, providing a more efficient and organized approach to handling module dependencies.', 'Annotating dependencies in Angular is crucial to ensure proper functionality during minification, preventing issues related to dependency naming conventions.', 'Configuring routes in Angular involves defining the module, specifying dependencies, and annotating the dependencies to avoid complications during minification.']}], 'duration': 100.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w233548.jpg', 'highlights': ['Dependency injection in Angular simplifies managing dependencies efficiently.', 'Annotating dependencies is crucial to ensure proper functionality during minification.', 'Configuring routes in Angular involves specifying dependencies and annotating them to avoid complications during minification.', 'Angular utilizes hashtag navigation for defining routes and dependency injection for easy insertion of dependencies.']}, {'end': 670.473, 'segs': [{'end': 401.179, 'src': 'embed', 'start': 336.49, 'weight': 3, 'content': [{'end': 339.571, 'text': "First move we're going to do is URL router provider otherwise.", 'start': 336.49, 'duration': 3.081}, {'end': 343.892, 'text': "So when you type in anything else, it'll go to slash.", 'start': 341.351, 'duration': 2.541}, {'end': 349.133, 'text': "So now I should be able to go to haha, and it's just going to bounce me back to slash.", 'start': 345.072, 'duration': 4.061}, {'end': 351.313, 'text': 'Test, back to slash.', 'start': 349.953, 'duration': 1.36}, {'end': 353.654, 'text': "Okay, that's all we need to do with the URL router provider.", 'start': 351.333, 'duration': 2.321}, {'end': 358.747, 'text': 'StateProvider is what is given to us by UIRouter.', 'start': 354.605, 'duration': 4.142}, {'end': 364.81, 'text': "StateProvider is where we're going to be defining all of our states, i.e. our routing.", 'start': 359.268, 'duration': 5.542}, {'end': 375.876, 'text': "So StateProvider, state, home state, and we're going to go URL.", 'start': 364.91, 'duration': 10.966}, {'end': 378.277, 'text': "That's this URL we're on now.", 'start': 376.997, 'duration': 1.28}, {'end': 383, 'text': "Template, let's just call it home.", 'start': 378.978, 'duration': 4.022}, {'end': 385.456, 'text': 'I should now see home.', 'start': 384.236, 'duration': 1.22}, {'end': 385.996, 'text': 'There we go.', 'start': 385.596, 'duration': 0.4}, {'end': 401.179, 'text': 'I gave it a template of a string so I could go home and I could also go template URL and That should.', 'start': 386.096, 'duration': 15.083}], 'summary': 'Configured url router and stateprovider for routing and defined home state with url and template.', 'duration': 64.689, 'max_score': 336.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w336490.jpg'}, {'end': 481.805, 'src': 'embed', 'start': 452.073, 'weight': 2, 'content': [{'end': 452.493, 'text': 'There we go.', 'start': 452.073, 'duration': 0.42}, {'end': 456.095, 'text': 'So now if we go to hashtag slash about, we should get about template.', 'start': 452.513, 'duration': 3.582}, {'end': 459.716, 'text': 'And if we go hashtag slash home, home template.', 'start': 456.235, 'duration': 3.481}, {'end': 464.518, 'text': 'So as you can see, we are very quickly creating a single page app that just works.', 'start': 460.036, 'duration': 4.482}, {'end': 470.14, 'text': 'Angular takes care of all the memory cleanup and things that would normally be associated with that.', 'start': 464.958, 'duration': 5.182}, {'end': 473.782, 'text': "Let's go ahead and make these buttons now navigate us.", 'start': 471.221, 'duration': 2.561}, {'end': 475.622, 'text': 'Let me go to nav.html.', 'start': 473.802, 'duration': 1.82}, {'end': 477.903, 'text': 'This is going to go to about.', 'start': 476.523, 'duration': 1.38}, {'end': 480.444, 'text': 'And this is just going to go to slash.', 'start': 478.624, 'duration': 1.82}, {'end': 481.805, 'text': "And we'll make this go to contacts.", 'start': 480.484, 'duration': 1.321}], 'summary': 'Using angular to create a single page app with quick navigation and memory cleanup.', 'duration': 29.732, 'max_score': 452.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w452073.jpg'}, {'end': 613.368, 'src': 'heatmap', 'start': 504.578, 'weight': 0, 'content': [{'end': 513.6, 'text': "You'll notice everything UI router related isn't N G it's UI state ref, and we can just call it about refer to it by name.", 'start': 504.578, 'duration': 9.022}, {'end': 515.741, 'text': 'that also works.', 'start': 514.741, 'duration': 1}, {'end': 517.082, 'text': "They're interchangeable.", 'start': 515.961, 'duration': 1.121}, {'end': 519.741, 'text': "So about and home, we're working great on both.", 'start': 517.741, 'duration': 2}, {'end': 522.722, 'text': 'Oh, might as well just go UIS ref.', 'start': 520.783, 'duration': 1.939}, {'end': 538.368, 'text': 'Okay And then another thing that we can do is start building out these templates some more.', 'start': 522.743, 'duration': 15.625}, {'end': 546.542, 'text': "Let's go ahead and define a controller home.", 'start': 539.048, 'duration': 7.494}, {'end': 553.084, 'text': "so now home as a controller, and let's in the controllers use scope now.", 'start': 546.542, 'duration': 6.542}, {'end': 559.165, 'text': 'so scope is the variables and arguments that are accessible to.', 'start': 553.084, 'duration': 6.081}, {'end': 562.506, 'text': "the template is basically what we're providing.", 'start': 559.165, 'duration': 3.341}, {'end': 577.949, 'text': "so if I go scope, dot title now I can in my home HTML only I can use angular's mustache like template and go title.", 'start': 562.506, 'duration': 15.443}, {'end': 579.85, 'text': 'so now it goes home.', 'start': 577.949, 'duration': 1.901}, {'end': 585.794, 'text': 'or what would be better, do an h1.', 'start': 579.85, 'duration': 5.944}, {'end': 594.34, 'text': 'there we go home and I can also go ul li.', 'start': 585.794, 'duration': 8.546}, {'end': 613.368, 'text': 'let me go back to this and add scope.items equals an array Scope.items.', 'start': 594.34, 'duration': 19.028}], 'summary': 'Using ui state ref for about and home, defining a controller, and building templates and scope variables.', 'duration': 81.216, 'max_score': 504.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w504578.jpg'}, {'end': 670.473, 'src': 'embed', 'start': 636.323, 'weight': 5, 'content': [{'end': 639.885, 'text': "It's kind of basically doing an each and now I can reference it as thing.", 'start': 636.323, 'duration': 3.562}, {'end': 645.396, 'text': 'So you notice now I have a list and I can change this.', 'start': 640.475, 'duration': 4.921}, {'end': 656.519, 'text': 'And my list automatically changes.', 'start': 654.799, 'duration': 1.72}, {'end': 660.44, 'text': 'Angular is really, really fast with development.', 'start': 656.919, 'duration': 3.521}, {'end': 667.542, 'text': "So then let's go ahead and so now you can notice home and about we're getting some drastically different templating options.", 'start': 661.14, 'duration': 6.402}, {'end': 668.862, 'text': "It's lightning quick.", 'start': 667.842, 'duration': 1.02}, {'end': 670.473, 'text': 'It just works.', 'start': 669.412, 'duration': 1.061}], 'summary': 'Angular allows for lightning quick development with drastically different templating options.', 'duration': 34.15, 'max_score': 636.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w636323.jpg'}], 'start': 336.49, 'title': 'Angular sp app development', 'summary': 'Covers using angular to create a sp app, emphasizing efficiency and speed of development. it includes setting up routes, navigation, ui router usage, and template building with controllers and scope variables.', 'chapters': [{'end': 401.179, 'start': 336.49, 'title': 'Uirouter stateprovider overview', 'summary': 'Covers the use of url router provider and stateprovider for defining routing in uirouter, including setting up default routes and templates for different states.', 'duration': 64.689, 'highlights': ['The StateProvider is used for defining all states and routing, including setting up the home state and its URL and template.', 'The URL router provider is used to set up the default route, redirecting any other input to the base URL.']}, {'end': 670.473, 'start': 401.179, 'title': 'Angular single page app development', 'summary': 'Covers the process of creating a single page app with angular, including setting up routes, navigation, ui router usage, and template building with controllers and scope variables, emphasizing the efficiency and speed of development.', 'duration': 269.294, 'highlights': ['Creating single page app with Angular The chapter demonstrates the process of quickly creating a single page app with Angular, showcasing the efficiency and speed of development.', 'Setting up routes and navigation The process of setting up routes for different templates like home and about is explained, enabling navigation between different views.', 'Usage of UI router and UI state ref The usage of UI router and UI state ref for navigation is highlighted, emphasizing their interchangeability and effectiveness in managing app state.', 'Building templates with controllers and scope variables The chapter covers the creation of templates with controllers and scope variables, showcasing the dynamic data binding and efficient development with Angular.']}], 'duration': 333.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w336490.jpg', 'highlights': ['The chapter covers the creation of templates with controllers and scope variables, showcasing the dynamic data binding and efficient development with Angular.', 'The usage of UI router and UI state ref for navigation is highlighted, emphasizing their interchangeability and effectiveness in managing app state.', 'The process of setting up routes for different templates like home and about is explained, enabling navigation between different views.', 'The StateProvider is used for defining all states and routing, including setting up the home state and its URL and template.', 'The URL router provider is used to set up the default route, redirecting any other input to the base URL.', 'The chapter demonstrates the process of quickly creating a single page app with Angular, showcasing the efficiency and speed of development.']}, {'end': 1058.386, 'segs': [{'end': 753.28, 'src': 'embed', 'start': 671.033, 'weight': 0, 'content': [{'end': 673.615, 'text': 'This controller, obviously, this pattern will not work.', 'start': 671.033, 'duration': 2.582}, {'end': 677.038, 'text': "One thing you'll notice that I forgot to do is I forgot to annotate it.", 'start': 674.276, 'duration': 2.762}, {'end': 678.919, 'text': 'I just went controller function.', 'start': 677.598, 'duration': 1.321}, {'end': 686.665, 'text': 'This will work totally fine until you decide to minify your JavaScript, at which point this will just be called once again A,', 'start': 679.119, 'duration': 7.546}, {'end': 689.947, 'text': 'in which case it will not know what A is.', 'start': 686.665, 'duration': 3.282}, {'end': 691.949, 'text': "It's not going to magically know that that's scope.", 'start': 690.027, 'duration': 1.922}, {'end': 700.481, 'text': "So what we're going to do is we're going to annotate that, say, If you've ever used require.js, it's basically like using require.js.", 'start': 692.709, 'duration': 7.772}, {'end': 710.606, 'text': "You just use an array, and the last piece of your array is the function that's executing.", 'start': 700.541, 'duration': 10.065}, {'end': 715.449, 'text': "So, scope there, scope there and now that's going to work great when it minifies,", 'start': 710.726, 'duration': 4.723}, {'end': 722.312, 'text': "because this is going to be called a and these are both going to be called a and it's still going to work just fine.", 'start': 715.449, 'duration': 6.863}, {'end': 730.745, 'text': "So what I'm going to do now is I'm going to break this controller out into home control.", 'start': 723.777, 'duration': 6.968}, {'end': 738.133, 'text': "And that's going to break my code because there is no such thing as home control.", 'start': 733.568, 'duration': 4.565}, {'end': 742.658, 'text': "I'm going to make that file now.", 'start': 738.153, 'duration': 4.505}, {'end': 751.88, 'text': 'Angular module app.', 'start': 750.839, 'duration': 1.041}, {'end': 753.28, 'text': 'This is going to be a part of the same.', 'start': 751.9, 'duration': 1.38}], 'summary': 'Annotating the controller function prevents issues when minifying javascript, ensuring it works effectively.', 'duration': 82.247, 'max_score': 671.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w671033.jpg'}, {'end': 860.971, 'src': 'embed', 'start': 812.296, 'weight': 3, 'content': [{'end': 841.826, 'text': "My app is working Let me just copy and paste this and create an about controller About control I'm gonna save you There we go.", 'start': 812.296, 'duration': 29.53}, {'end': 850.368, 'text': 'And so now about is going to have a controller of about controller.', 'start': 841.886, 'duration': 8.482}, {'end': 857.15, 'text': 'And now the about template just needs to be adjusted to do the same thing.', 'start': 852.749, 'duration': 4.401}, {'end': 860.971, 'text': "Let's make the about template exactly the same as the home template.", 'start': 858.05, 'duration': 2.921}], 'summary': 'App successfully created an about controller, adjusting the about template.', 'duration': 48.675, 'max_score': 812.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w812296.jpg'}, {'end': 916.91, 'src': 'embed', 'start': 891.732, 'weight': 4, 'content': [{'end': 898.477, 'text': "This is one of the awesome, awesome, awesome things about Angular is it's got two-way data binding just completely baked in.", 'start': 891.732, 'duration': 6.745}, {'end': 900.619, 'text': "So let's go to our home control.", 'start': 899.017, 'duration': 1.602}, {'end': 902.74, 'text': "Let's say title is home.", 'start': 900.639, 'duration': 2.101}, {'end': 904.181, 'text': 'Okay, great.', 'start': 902.76, 'duration': 1.421}, {'end': 906.723, 'text': "Let's make an input.", 'start': 905.902, 'duration': 0.821}, {'end': 916.91, 'text': "And this ng-model, what that means is we're going to map it to an item in the scope.", 'start': 909.825, 'duration': 7.085}], 'summary': 'Angular has two-way data binding and utilizes ng-model to map to scope items.', 'duration': 25.178, 'max_score': 891.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w891732.jpg'}, {'end': 1058.386, 'src': 'embed', 'start': 1023.775, 'weight': 5, 'content': [{'end': 1027.016, 'text': 'I could go in home control and I could go scope dot.', 'start': 1023.775, 'duration': 3.241}, {'end': 1034.297, 'text': "And now it's going to automatically make sure home is preselected.", 'start': 1031.215, 'duration': 3.082}, {'end': 1036.91, 'text': "I think it's called selected value.", 'start': 1035.589, 'duration': 1.321}, {'end': 1042.354, 'text': 'There you go.', 'start': 1036.93, 'duration': 5.424}, {'end': 1047.818, 'text': 'Home is now pre-selected whenever I boot up my page.', 'start': 1042.794, 'duration': 5.024}, {'end': 1049.68, 'text': "So it's really, really a cool thing.", 'start': 1048.279, 'duration': 1.401}, {'end': 1051.461, 'text': "Let's talk about some services.", 'start': 1050.02, 'duration': 1.441}, {'end': 1053.222, 'text': "Let's wire in a web service now.", 'start': 1051.521, 'duration': 1.701}, {'end': 1056.565, 'text': "I'm going to go to my app.", 'start': 1053.863, 'duration': 2.702}, {'end': 1058.386, 'text': "One thing that's great.", 'start': 1057.505, 'duration': 0.881}], 'summary': 'Setting home as pre-selected value for improved user experience.', 'duration': 34.611, 'max_score': 1023.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1023775.jpg'}], 'start': 671.033, 'title': 'Angularjs issues and data binding', 'summary': 'Explains the impact of failing to annotate the controller function in angularjs on javascript minification and highlights the importance of annotation. it also discusses breaking a controller into home control, implementing two-way data binding, and creating select inputs based on array information.', 'chapters': [{'end': 715.449, 'start': 671.033, 'title': 'Angularjs minification issue', 'summary': 'Explains how failing to annotate the controller function in angularjs can lead to issues during javascript minification, highlighting the importance of annotation in order to avoid problems when minifying code.', 'duration': 44.416, 'highlights': ['The importance of annotating the controller function in AngularJS to avoid issues during JavaScript minification, as failing to do so can lead to problems when minifying code.', 'Comparison to using require.js, emphasizing that using an array and annotating the last piece of the array is similar to annotating in AngularJS, ensuring proper functionality during minification.']}, {'end': 1058.386, 'start': 715.449, 'title': 'Angular controllers and data binding', 'summary': 'Discusses breaking a controller into home control, creating a new file for home control, adding a controller to the index, implementing two-way data binding in angular, and creating select inputs based on information in an array.', 'duration': 342.937, 'highlights': ['The chapter discusses breaking a controller into home control and creating a new file for home control, which will be a part of the same module.', 'It explains the process of adding a controller to the index and ensuring that the app is working properly after the changes.', 'The chapter focuses on implementing two-way data binding in Angular, allowing automatic updates of scope values and creating select inputs based on information in an array.', 'It also mentions the ability to wire in a web service to the app.']}], 'duration': 387.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w671033.jpg', 'highlights': ['The importance of annotating the controller function in AngularJS to avoid issues during JavaScript minification.', 'Comparison to using require.js, emphasizing that using an array and annotating the last piece of the array is similar to annotating in AngularJS.', 'The chapter discusses breaking a controller into home control and creating a new file for home control, which will be a part of the same module.', 'It explains the process of adding a controller to the index and ensuring that the app is working properly after the changes.', 'The chapter focuses on implementing two-way data binding in Angular, allowing automatic updates of scope values and creating select inputs based on information in an array.', 'Mention of the ability to wire in a web service to the app.']}, {'end': 1175.362, 'segs': [{'end': 1120.53, 'src': 'embed', 'start': 1058.386, 'weight': 0, 'content': [{'end': 1060.168, 'text': "let's say home has a dependency of.", 'start': 1058.386, 'duration': 1.782}, {'end': 1068.087, 'text': 'It needs to hit a service and load up my friends list before it sends me to home.', 'start': 1061.782, 'duration': 6.305}, {'end': 1074.591, 'text': 'Then we can do a resolve And pass in an array and we can have it.', 'start': 1068.087, 'duration': 6.504}, {'end': 1086.14, 'text': 'each item in this resolve object is going to Represent a service call or something that has to happen before it proceeds and loads the controller in the template.', 'start': 1074.591, 'duration': 11.549}, {'end': 1094.937, 'text': "So we're going to resolve friends And we're going to say that this has a dependency of HTTP, which is a built-in Angular thing.", 'start': 1086.14, 'duration': 8.797}, {'end': 1107.006, 'text': "And we're just going to return http.git, API, friends.", 'start': 1099.56, 'duration': 7.446}, {'end': 1112.83, 'text': 'I just have a JSON file, but it would be no different if it was an actual service.', 'start': 1107.346, 'duration': 5.484}, {'end': 1115.652, 'text': 'That is going to return friends.json.', 'start': 1113.751, 'duration': 1.901}, {'end': 1120.53, 'text': 'And so one of the things that it gives you is a response.', 'start': 1117.708, 'duration': 2.822}], 'summary': 'Home has a dependency on hitting a service to load friends list, using resolve with http to get friends.json.', 'duration': 62.144, 'max_score': 1058.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1058386.jpg'}, {'end': 1181.464, 'src': 'embed', 'start': 1154.25, 'weight': 2, 'content': [{'end': 1159.072, 'text': "It's going to parse that here, which there's no real parsing going except for give me the data.", 'start': 1154.25, 'duration': 4.822}, {'end': 1165.934, 'text': "It's kind of the equivalent of a backbone parse is what we're doing for those guys familiar with backbone.", 'start': 1160.572, 'duration': 5.362}, {'end': 1170.656, 'text': "And now it's going to make a friends provider available to this controller if I want it.", 'start': 1166.274, 'duration': 4.382}, {'end': 1175.362, 'text': 'So how we use that then Did I do that on home? Yeah, okay, home.', 'start': 1171.516, 'duration': 3.846}, {'end': 1181.464, 'text': 'So now I can make scope a dependency and I can go friends.', 'start': 1176.523, 'duration': 4.941}], 'summary': 'Creating a friends provider for controller, using scope as a dependency.', 'duration': 27.214, 'max_score': 1154.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1154250.jpg'}], 'start': 1058.386, 'title': 'Angular resolve for dependency', 'summary': "Explains how to use angular resolve to manage dependencies by making service calls before loading the controller and template. it provides an example of resolving friends' list dependency using http service and parsing the response, ultimately making a friends provider available to the controller.", 'chapters': [{'end': 1175.362, 'start': 1058.386, 'title': 'Angular resolve for dependency', 'summary': "Explains how to use angular resolve to manage dependencies by making service calls before loading the controller and template, with an example of resolving friends' list dependency using http service and parsing the response, ultimately making a friends provider available to the controller.", 'duration': 116.976, 'highlights': ['By using Angular resolve, we can specify dependencies that need to be resolved before loading the controller and template, such as making service calls.', "An example is given where the friends' list dependency is resolved using the built-in Angular HTTP service to fetch friends.json and parse the response.", 'The parsed data from the service call is then used to make a friends provider available to the controller.', 'Using resolve in Angular helps in managing dependencies and ensuring that necessary data is available before proceeding to load the controller and template.']}], 'duration': 116.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1058386.jpg', 'highlights': ['Using Angular resolve, we can specify dependencies to be resolved before loading the controller and template.', "An example demonstrates resolving the friends' list dependency using the built-in Angular HTTP service.", 'The parsed data from the service call is used to make a friends provider available to the controller.', 'Resolve in Angular helps in managing dependencies and ensuring necessary data is available before loading the controller and template.']}, {'end': 1599.839, 'segs': [{'end': 1217.265, 'src': 'heatmap', 'start': 1185.084, 'weight': 1, 'content': [{'end': 1186.325, 'text': 'Make the second argument friends.', 'start': 1185.084, 'duration': 1.241}, {'end': 1197.527, 'text': "Let's go friends equals friends.", 'start': 1186.345, 'duration': 11.182}, {'end': 1203.06, 'text': "And now let's make this friend in friends.", 'start': 1200.239, 'duration': 2.821}, {'end': 1208.882, 'text': 'There we go.', 'start': 1208.422, 'duration': 0.46}, {'end': 1217.265, 'text': "Whoops Let's print friend name, colon friend dot age.", 'start': 1209.202, 'duration': 8.063}], 'summary': "Creating a friends list and printing friend's name and age.", 'duration': 32.181, 'max_score': 1185.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1185084.jpg'}, {'end': 1274.114, 'src': 'embed', 'start': 1226.409, 'weight': 0, 'content': [{'end': 1235.945, 'text': 'What I can do this do now is How about for each one of these, instead of doing an li, or instead of doing that, I do an input.', 'start': 1226.409, 'duration': 9.536}, {'end': 1245.348, 'text': 'ngModel equals friendName age.', 'start': 1239.546, 'duration': 5.802}, {'end': 1246.708, 'text': "Let's say we want to change some stuff.", 'start': 1245.468, 'duration': 1.24}, {'end': 1247.408, 'text': 'There we go.', 'start': 1246.968, 'duration': 0.44}, {'end': 1257.411, 'text': 'And now that is real-time changed in the scope.', 'start': 1255.07, 'duration': 2.341}, {'end': 1260.041, 'text': "And so let's do another thing.", 'start': 1258.72, 'duration': 1.321}, {'end': 1262.063, 'text': "Let's make a scope method.", 'start': 1260.101, 'duration': 1.962}, {'end': 1270.27, 'text': "Let's make a save button.", 'start': 1262.083, 'duration': 8.187}, {'end': 1274.114, 'text': 'Clean this up a little bit.', 'start': 1273.233, 'duration': 0.881}], 'summary': 'Demonstrating real-time updates using input instead of li, creating a scope method, and adding a save button.', 'duration': 47.705, 'max_score': 1226.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1226409.jpg'}, {'end': 1525.246, 'src': 'embed', 'start': 1484.263, 'weight': 1, 'content': [{'end': 1487.485, 'text': 'False Now what I can do here is..', 'start': 1484.263, 'duration': 3.222}, {'end': 1491.435, 'text': "we're doing this on home.", 'start': 1490.455, 'duration': 0.98}, {'end': 1492.036, 'text': 'Yes Okay.', 'start': 1491.495, 'duration': 0.541}, {'end': 1503.001, 'text': "What I can do is, if you're not special,", 'start': 1494.637, 'duration': 8.364}, {'end': 1512.845, 'text': 'I can do ng class and now I can pass in an object of the different classes that I would conditionally like to add.', 'start': 1503.001, 'duration': 9.844}, {'end': 1525.246, 'text': "So I'm going to go text muted, which is, uh, Bootstraps way of dimming it out, and that's going to go.", 'start': 1513.446, 'duration': 11.8}], 'summary': 'Demonstrating conditional addition of classes using ng-class in bootstrap.', 'duration': 40.983, 'max_score': 1484.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1484263.jpg'}], 'start': 1176.523, 'title': 'Real-time angularjs friend editor and angular conditional styling', 'summary': 'Covers creating a real-time angularjs friend editor with features like hitting an api, real-time changes using ngmodel, save method creation, http post for posting data, and item deletion. it also delves into conditional styling in angular using ngclass to add classes based on specific conditions.', 'chapters': [{'end': 1443.024, 'start': 1176.523, 'title': 'Real-time angularjs friend editor', 'summary': 'Demonstrates creating a real-time angularjs friend editor, including hitting an api, using ngmodel for real-time changes, creating a save method, posting data with http post, and deleting items from the friends list.', 'duration': 266.501, 'highlights': ['The chapter demonstrates creating a real-time AngularJS friend editor, including hitting an API, using ngModel for real-time changes, creating a save method, posting data with HTTP Post, and deleting items from the friends list.', 'The API hit and making it available, allowing real-time changes in the scope with ngModel, and creating a bootstrap-styled save button with an ng click method.', 'Posting data with HTTP Post and displaying the posted data, including Bob and John, and deleting items from the friends list with the ng click method.']}, {'end': 1599.839, 'start': 1444.205, 'title': 'Angular conditional styling', 'summary': 'Discusses conditional styling in angular using ngclass and demonstrates how to conditionally add classes to html elements based on specific conditions, such as adding a muted class if a friend is not special and a special class with a red background if the friend is special.', 'duration': 155.634, 'highlights': ['The chapter demonstrates using ngClass to conditionally add classes to HTML elements based on specific conditions, such as adding a muted class if a friend is not special and a special class with a red background if the friend is special.', 'The speaker mentions using the Angular feature of ngClass to pass in an object of different classes that can be conditionally added to elements.', 'An example is provided where a muted class is added if a friend is not special, and a special class with a red background is added if the friend is special.']}], 'duration': 423.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1176523.jpg', 'highlights': ['The chapter demonstrates creating a real-time AngularJS friend editor, including hitting an API, using ngModel for real-time changes, creating a save method, posting data with HTTP Post, and deleting items from the friends list.', 'The chapter demonstrates using ngClass to conditionally add classes to HTML elements based on specific conditions, such as adding a muted class if a friend is not special and a special class with a red background if the friend is special.']}, {'end': 1876.029, 'segs': [{'end': 1658.684, 'src': 'embed', 'start': 1622.482, 'weight': 0, 'content': [{'end': 1625.925, 'text': 'So what we would do is we would create a services file.', 'start': 1622.482, 'duration': 3.443}, {'end': 1638.82, 'text': "Friends Let's keep this all for easiness.", 'start': 1629.487, 'duration': 9.333}, {'end': 1641.621, 'text': "I'm going to keep it all registered to the app module.", 'start': 1639.22, 'duration': 2.401}, {'end': 1644.501, 'text': "And we're going to do factory.", 'start': 1643.361, 'duration': 1.14}, {'end': 1651.423, 'text': "As a normal naming convention, if you're creating an Angular service, you're going to start by uppercasing it.", 'start': 1647.102, 'duration': 4.321}, {'end': 1658.684, 'text': 'There we go, friends.', 'start': 1658.044, 'duration': 0.64}], 'summary': 'Creating an angular service file for the app module with uppercase naming convention.', 'duration': 36.202, 'max_score': 1622.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1622482.jpg'}, {'end': 1813.393, 'src': 'embed', 'start': 1742.768, 'weight': 1, 'content': [{'end': 1746.629, 'text': 'Friends now is a service, not a resolve provider.', 'start': 1742.768, 'duration': 3.861}, {'end': 1751.65, 'text': 'So I can go friends.get.', 'start': 1747.669, 'duration': 3.981}, {'end': 1756.74, 'text': 'There you go.', 'start': 1756.38, 'duration': 0.36}, {'end': 1758.462, 'text': "So that's another way that you can do it.", 'start': 1757.101, 'duration': 1.361}, {'end': 1761.805, 'text': 'And now multiple controllers can all share friends.', 'start': 1758.882, 'duration': 2.923}, {'end': 1763.987, 'text': 'About can use friends as a dependency.', 'start': 1762.005, 'duration': 1.982}, {'end': 1772.534, 'text': 'About items can be friends.get.', 'start': 1770.672, 'duration': 1.862}, {'end': 1776.857, 'text': 'And now I can mess with that service.', 'start': 1774.876, 'duration': 1.981}, {'end': 1779.44, 'text': 'I can import HTTP into this.', 'start': 1776.938, 'duration': 2.502}, {'end': 1813.393, 'text': 'So git could now return friends.json, then now that will work.', 'start': 1786.73, 'duration': 26.663}], 'summary': 'Friends is now a service provider, allowing multiple controllers to share friends and use it as a dependency.', 'duration': 70.625, 'max_score': 1742.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1742768.jpg'}], 'start': 1600.459, 'title': 'Angular services implementation', 'summary': "Explores creating a reusable angular service using a factory method, providing a cacheable api and a single method for retrieving a list of friends. it also demonstrates converting a resolve provider into a service, utilizing 'friends' service and 'http' for data manipulation, and suggests further learning resources.", 'chapters': [{'end': 1697.93, 'start': 1600.459, 'title': 'Angular services and factory', 'summary': 'Explains how to create a reusable angular service using a factory method, providing a cacheable api and a single method for retrieving a list of friends.', 'duration': 97.471, 'highlights': ['The chapter discusses creating a reusable Angular service using a factory method, offering a cacheable API and a single method for retrieving a list of friends.', 'The speaker emphasizes the naming convention for Angular services, starting with an uppercase letter, and explains that the returned object from the service defines what users will receive upon loading the module.', 'The transcript highlights the process of creating an Angular service, including the use of a factory method, naming conventions, and returning an object with a method for retrieving data.']}, {'end': 1876.029, 'start': 1701.932, 'title': 'Angularjs service implementation', 'summary': "Demonstrates how to convert a resolve provider into a service, showcasing the usage of 'friends' service and 'http' to retrieve and manipulate data, while also hinting at potential issues with the implementation and suggesting further learning resources.", 'duration': 174.097, 'highlights': ["Converted resolve provider 'friends' into a service, allowing multiple controllers to share and use 'friends' as a dependency, showcasing the versatility of the implementation.", "Discussed the usage of 'HTTP' to retrieve and manipulate data from the 'friends' service, highlighting the practical application of the service implementation.", "Hinted at potential issues with the implementation, indicating a need for debugging or troubleshooting, potentially impacting the functionality of the 'friends' service.", 'Mentioned the availability of additional features and learning resources such as UIRouter, encouraging further exploration and learning beyond the basic service implementation in AngularJS.']}], 'duration': 275.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QETUuZ27N0w/pics/QETUuZ27N0w1600459.jpg', 'highlights': ['The chapter discusses creating a reusable Angular service using a factory method, offering a cacheable API and a single method for retrieving a list of friends.', "Converted resolve provider 'friends' into a service, allowing multiple controllers to share and use 'friends' as a dependency, showcasing the versatility of the implementation.", "Discussed the usage of 'HTTP' to retrieve and manipulate data from the 'friends' service, highlighting the practical application of the service implementation.", 'The speaker emphasizes the naming convention for Angular services, starting with an uppercase letter, and explains that the returned object from the service defines what users will receive upon loading the module.']}], 'highlights': ['The chapter demonstrates creating a real-time AngularJS friend editor, including hitting an API, using ngModel for real-time changes, creating a save method, posting data with HTTP Post, and deleting items from the friends list.', 'The chapter discusses creating a reusable Angular service using a factory method, offering a cacheable API and a single method for retrieving a list of friends.', 'The chapter covers the creation of templates with controllers and scope variables, showcasing the dynamic data binding and efficient development with Angular.', 'Using Angular resolve, we can specify dependencies to be resolved before loading the controller and template.', 'Dependency injection in Angular simplifies managing dependencies efficiently.', 'The importance of annotating the controller function in AngularJS to avoid issues during JavaScript minification.', 'The chapter introduces the basics of Angular.js for single page web apps in JavaScript.', 'Emphasizes the importance of understanding JavaScript concepts before delving into Angular.js.']}