AngularJS

AngularJS

1 lesson

• To start with:
• In app.js, we created a new module named MyApp. A module contains the different components of an AngularJS app.
• Then, in index.html we added. The ng-app is called a directive. It tells AngularJS that the MyApp module will live within the element, termed the application's scope. In other words, we used the ng-app directive to define the application scope.
• In MainController.js we created a newcontroller named MainController. Acontroller manages the app's data. Here we use the property title to store a string, and attach it to $scope.
• Then, in index.html, we added. Like ng-app, ng-controller is a directive that defines the controller scope. This means that properties attached to $scope inMainController become available to use within .
• Inside we accessed$scope.title using {{ title }}. This is called anexpression. Expressions are used to display values on the page.
• The value of title showed up when we viewed the app in the browser.

typical workflow

• So far this is our typical workflow when making an AngularJS app:
• Create a module, and use ng-app in the view to define the application scope.
• Create a controller, and use ng-controller in the view to define the controller scope.
• Add data to $scope in the controller so they can be displayed with expressions in the view.
• In the controller, you can use an object to group together related data about a product, i.e. Then in the view, you can use dot notation to display the values.

Filters

• The product price changed from a number to a formatted currency. How does it work?
• AngularJS gets the value of product.price.
• It sends this number into the currency filter. The pipe symbol (|) takes the output on the left and "pipes" it to the right.
• The filter outputs a formatted currency with the dollar sign and the correct decimal places.
• In this way, filters help to separate the content in the controller from its presentation in the view.
• AngularJS comes with a few more built-in filters.
• A quick review:
• A module contains the different components of an AngularJS app
• A controller manages the app's data
• An expression displays values on the page
• A filter formats the value of an expression

Slide 5

• Well done! You got both books in$scope.products to show up in the view. How does it work?
• In the controller, we used products to store an array containing two objects.
• Then in the view, we added. Like ng-app and ng-controller, the ng-repeat is a directive. It loops through an array and displays each element. Here, the ng-repeat repeats all the HTML inside for each element in the products array.In this way, ng-repeat shows both products in the$scope.products array. Instead of writing the same HTML twice as before, we just use ng-repeatto generate the HTML twice.
• We've used a few directives so far - ng-app,ng-controller, ng-repeat, and ng-src. What can we generalize about directives?
• Directives bind behavior to HTML elements. When the app runs, AngularJS walks through each HTML element looking for directives. When it finds one, AngularJS triggers that behavior (like attaching a scope or looping through an array).
• So far we've made a static AngularJS app by adding properties in the controller and displaying them in the view. AngularJS is a framework for building dynamic web apps, so let's start to make this app interactive.

Slide 6

• Great! Each time you click on the number of likes, the number goes up. How does it work?
• The ng-click is a directive. When
• is clicked, ng-click tells AngularJS to run the plusOne() function in the controller.
• The plusOne() function gets the index of the product that was clicked, and then adds one to that product's likes property.
• Notice that the plusOne() doesn't interact with the view at all; it just updates the controller. Any change made to the controller shows up in the view.
• Congratulations! You built an AngularJS app from scratch. What can we generalize so far?
• A user visits the AngularJS app.
• The view presents the app's data through the use of expressions, filters, and directives. Directives bind new behavior HTML elements.
• A user clicks an element in the view. If the element has a directive, AngularJS runs the function.
• The function in the controller updates the state of the data.
• The view automatically changes and displays the updated data. The page doesn't need to reload at any point.

2 lesson : directives

• What did we just do? We wrote code to teach the browser a new HTML element , and used it in the view to display each app's details.
• First in js/directives/appInfo.js, we made a newdirective. We used app.directive to create a new directive named 'appInfo'. It returns an object with three options:
• restrict specifies how the directive will be used in the view. The 'E' means it will be used as a new HTML element.
• scope specifies that we will pass information into this directive through an attribute namedinfo. The = tells the directive to look for an attribute named info in the element, like this: app-info info="shutterbugg">/app-info>
• The data in info becomes available to use in the template given by templateURL.
• 4. templateUrl specifies the HTML to use in order to display the data in scope.info. Here we use the HTML injs/directives/appInfo.html.
• Looking at js/directives/appInfo.html, we define the HTML to display details about an app, like its title and price. We use expressions and filters to display the data.
• Then in index.html we use the new directive as the HTML element . We pass in objects from the controller's scope ($scope.shutterbugg) into the element's info attribute so that it displays.
• Why is creating your own directives useful?
• Readability. Directives let you write expressive HTML. Looking at index.html you can understand the app's behavior just by reading the HTML.
• Reusability. Directives let you create self-contained units of functionality. We could easily plug in this directive into another AngularJS app and avoid writing a lot of repetitive HTML.

Slide 8

• We know that AngularJS comes with a few built-in directives like ng-repeat and ng-click.
• We've seen that AngularJS makes it possible to create your own custom directives, such as.
• We can use Angular's built-in directives together with custom directives to create more readable apps.
• For reference, here's how to use ng-repeat:
• {{ product.name }}
• The directive contains the three optionsrestrict, scope, and templateUrl that we saw before in the 'appInfo' directive.
• It also contains a fourth option link. The linkis used to create interactive directives that respond to user actions.
• The template uses Angular's built-in ng-clickdirective. When the button is clicked, ng-click will tell AngularJS to run the download() function in the directive.
• The download() function uses the scope.installedproperty to check if an app is installed. When an app is installed, download() does three things:
• toggles the .btn-active class
• changes the button text to "Uninstall"
• changes scope.installed to true
• Directives are a powerful way to create self-contained, interactive components. Unlike jQuery which adds interactivity as a layer on top of HTML, AngularJS treats interactivity as a native component of HTML.

3 lesson : services

• So far we've made AngularJS apps by adding data to a controller, and then displaying it in a view.
• But what happens when the data contains hundreds of items, or if it's constantly changing like weather or financial data? Hardcoding data into a controller won't work anymore.
• A better solution is to read the live data from a server. We can do this by creating a service.
• Why are services useful? Instead of filling the controller with code to fetch weather data from a server, it's better to move this independent logic into a service so that it can be reused by other parts of the app.
• What can we generalize so far?
• Directives are a way to make standalone UI components, like <app-info>
• Services are a way to make standalone communication logic, like forecast which fetches weather data from a server

4 lesson : routes

• So far we've made AngularJS apps that display data in a single view index.html.
• But what happens when the app grows and needs to display more information? Stuffing more code to a single view will quickly make things messy.
• A better solution is to use multiple templates that display different pieces of data based on the URL that the user is visiting. We can do this with Angular's application routes.
• Great! A gallery of images shows up. How does it work?
• In app.js inside the app.config() method, we use Angular's $routeProvider to define the application routes.
• We used .when() to map the URL / to to the controller HomeController and the templatehome.html. The HomeController uses the service js/services/photos.js to fetch the array of all photos fromhttps://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.jsonand stores it into $scope.photos. Thehome.html uses ng-repeat to loop through each item in the photos array and display each photo.
• Otherwise if a user accidentally visits a URL other than /, we just redirect to / using.otherwise().
• Now when a user visits /, a view will be constructed by injecting home.html into the<div ng-view></div> in index.html.

Slide 11

• What did we just do?
• In app.js, we mapped a URL toPhotoController and photo.html. We added a variable part named id to the URL, like this:/photos/:id.
• In PhotoController, we used Angular's$routeParams to retrieve id from the URL by using $routeParams.id. Notice that we injected both $routeParams and the photosservice into the PhotoController dependency array to make them available to use inside the controller.
• Then to fetch an individual photo, we first used the photos service to fetch the array of photos from the server, and then used$routeParams.id to access the specific photo by its index.
• As before, any properties attached to $scopebecome available to use in the view. This means in photo.html, we can display the photo's detail using expressions as done before.
• Notice that when you click on links, the app doesn't do a full reload. Only the part of the view specified by <div ng-view></div> changes.
• Why are routes useful? Instead of filling a single view with more code than needed, routes let us map URLs to self-contained controllers and templates. Furthermore, now that the app has URLs, users can easily bookmark and share the app's pages.
• What can we generalize so far?
• Directives are a way to make standalone UI components, like <app-info>
• Services are a way to make standalone communication logic, like forecast which fetches weather data from a server
• Routes are a way to manage apps containing more views.