Learning Angular

  1. https://www.codecademy.com/courses/learn-angularjs/lessons/your-first-app/exercises/your-first-app-workflow?action=lesson_resume

  3. In app.js, we created a new module named myApp. A module contains the different components of an AngularJS app.
  4. Then, in index.html we added <body ng-app="myApp">. The ng-app is called a directive. It tells AngularJS that the myAppmodule will live within the <body> element, termed the application's scope. In other words, we used the ng-appdirective to define the application scope.
  5. In MainController.js we created a new controller named MainController. A controller manages the app's data. Here we use the property title to store a string, and attach it to $scope.
  6. Then, in index.html, we added <div class="main" ng-controller="MainController">. Like ng-app, ng-controller is a directive that defines the controller scope. This means that properties attached to $scope in MainController become available to use within <div class="main">.
  7. Inside <div class="main"> we accessed $scope.titleusing {{ title }}. This is called an expression. Expressions are used to display values on the page.
  8. The value of title showed up when we viewed the app in the browser.

So far this is our typical workflow when making an AngularJS app:
  1. Create a module, and use ng-app in the view to define the application scope.
  2. Create a controller, and use ng-controller in the view to define the controller scope.
  3. Add data to $scope in the controller so they can be displayed with expressions in the view.
  • 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
  1. In the controller, we used products to store an array containing two objects.
  2. Then in the view, we added <div ng-repeat="product in products">. 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 <div class="col-md-6"> 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-repeat to generate the HTML twice.


  1. The ng-click is a directive. When <p class="likes"> is clicked, ng-click tells AngularJS to run the plusOne()function in the controller.
  2. The plusOne() function gets the index of the product that was clicked, and then adds one to that product's likesproperty.
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.


  1. A user visits the AngularJS app.
  2. The view presents the app's data through the use of expressions, filters, and directives. Directives bind new behavior HTML elements.
  3. A user clicks an element in the view. If the element has a directive, AngularJS runs the function.
  4. The function in the controller updates the state of the data.
  5. The view automatically changes and displays the updated data. The page doesn't need to reload at any point.


First in js/directives/appInfo.js, we made a new directive. We used app.directive to create a new directive named 'appInfo'. It returns an object with three options:
  1. restrict specifies how the directive will be used in the view. The 'E' means it will be used as a new HTML element.
  2. scope specifies that we will pass information into this directive through an attribute named info. The = tells the directive to look for an attribute named info in the <app-info> element, like this:
    
<app-info info="shutterbugg"></app-info>
    The data in info becomes available to use in the template given by templateURL.
  3. templateUrl specifies the HTML to use in order to display the data in scope.info. Here we use the HTML in js/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 <app-info>. We pass in objects from the controller's scope ($scope.shutterbugg) into the <app-info> element's info attribute so that it displays.

Why is creating your own directives useful?
  1. Readability. Directives let you write expressive HTML. Looking at index.html you can understand the app's behavior just by reading the HTML.
  2. 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.
ng-repeat

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 <app-info>.
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:

<div ng-repeat="product in products">
  <img ng-src="{{ product.cover }}">
  <p class="title">{{ product.name }}</p>
</div>










INTERACTIVE DIRECTIVE







    

  • The directive contains the three options restrict, scope, and templateUrl that we saw before in the 'appInfo' directive.
    • 



    

  • It also contains a fourth option link. The link is used to create interactive directives that respond to user actions.
    • 



    

  1. scope refers to the directive's scope. Any new properties attached to $scope will become available to use in the directive's template.
    2. 



    

  1. element refers to the directive's HTML element.
    2. 



    

  1. attrs contains the element's attributes.
    2. 






Inside the link function, there are two properties buttonText and installed, and the function download(). We'll use these in the directive's template next.









We used app.directive to create a new directive named 'installApp'.








    












The link function takes three inputs:







    











Inside the link function, there are two properties buttonText and installed, and the function download(). We'll use these in the directive's template next.






    

  • 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.
    • 




WEB SERVICES









    

  1. First in js/services/forecast.js, we made a new service. We used app.factory to create a new service named forecast
    2. 

  2. The forecast service needs to use AngularJS's built-in $http to fetch JSON from the server. Therefore, we add $http to the forecast service as a dependency, like this:
    
['$http', function($http) {
   // ...
 }]
    

    
Now $http is available to use inside forecast.
    3. 

  3. Then, inside forecast, we use $http to construct an HTTP GET request for the weather data. If the request succeeds, the weather data is returned; otherwise the error info is returned.
    4. 

  4. Next in the controller, we used the forecast service to fetch data from the server. First we added forecastinto MainController as a dependency so that it's available to use. Then within the controller we used forecast to asynchronously fetch the weather data from the server and store it into $scope.fiveDay
    5. 

  5. As before, any properties attached to $scope become available to use in the view. This means in index.html, we can display the city_name using an expression as done before.
    6. 






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
    • 




ROUTING














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.











ROUTING - VIEWS






    

  1. In app.js inside the app.config() method, we use Angular's $routeProvider to define the application routes.
    2. 

  2. We used .when() to map the URL / to to the controller HomeController and the template home.html. The HomeController uses the service js/services/photos.js to fetch the array of all photos from https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json and stores it into $scope.photos. The home.html uses ng-repeat to loop through each item in the photosarray and display each photo.
    3. 

  3. Otherwise if a user accidentally visits a URL other than /, we just redirect to / using .otherwise().
    4. 

  4. Now when a user visits /, a view will be constructed by injecting home.html into the <div ng-view></div> in index.html.
    5. 


















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.
    •

Comments

Post a Comment