Angular JS 1 Tutorial

Angular Js 

Controller Responsibilities
--------------------------------
1.Fetching the right data from the server for the current UI
2 Deciding which parts of that data to show to the user
3 Presentation logic, such as how to display elements, which parts of the UI to show, how to style them, etc.
4 User interactions, such as what happens when a user clicks something or how a text input should be validated

Angular Js Life Cycle
-------------------------

1. The HTML is loaded. This triggers requests for all the scripts that are a part of it.
2. After the entire document has been loaded, AngularJS kicks in and looks for the ng-app directive.
3. When it finds the ng-app directive, it looks for and loads the module that is specified and attaches it to the element.
4. AngularJS then traverses the children DOM elements of the root element with the ng-app and starts looking for directives and bind statements.
5. Each time it hits an ng-controller or an ng-repeat directive, it creates what we call a scope in AngularJS. A scope is the context for that element. The scope dictates what each DOM element has access to in terms of functions, variables, and the like.
6. AngularJS then adds watchers and listeners on the variables that the HTML ac‐cesses, and keeps track of the current value of each of them. When that value changes, AngularJS updates the UI immediately.
7. Instead of polling or some other mechanism to check if the data has changed, An‐gularJS optimizes and checks for updates to the UI only on certain events, which can cause a change in the data or the model underneath. Examples of such events include XHR or server calls, page loads, and user interactions like click or type.


a.ng-class:
The ng-class directive is used to selectively apply and remove CSS classes from elements. There are multiple ways of using ng-class, and we will talk about what we feel is the most declarative and cleanest option. The ng-class directive can take strings or objects as values. If it is a string, it simply applies the CSS classes directly.
If it is an object (which we are returning from the function in the controller), An‐gularJS takes a look at each key of the object, and depending on whether the value for that key is true or false, applies or removes the CSS class.

b.ng-show
There are two directives in AngularJS that deal with hiding and showing HTML elements: ng-show and ng-hide. They inspect a variable and, depending on the truthiness of its value, show or hide elements in the UI, respectively. In this case,we say show the assignee span if note.assignee is true. AngularJS treats true,nonempty strings, nonzero numbers, and nonnull JS objects as truthy. So in this case, we get to see the assignee span if the note has an assignee.


Form States:
-----------
a.$invalid :AngularJS sets this state when any of the validations (required, ng-minlength, and others) mark any of the fields within the form as invalid.

b.$valid: The inverse of the previous state, which states that all the validations in the form are currently evaluating to correct.

c.$pristine: All forms in AngularJS start with this state. This allows you to figure out if a user has started typing in and modifying any of the form elements. Possible usage: disabling the reset button if a form is pristine.

d.$dirty :The inverse of $pristine, which states that the user made some changes (he can revert it, but the $dirty bit is set).

e.$error: This field on the form houses all the individual fields and the errors on each form element. We will talk more about this in the following section.

Built-in Angular Js Validators:
-------------------------------
a.required :As previously discussed, this ensures that the field is required, and the field is marked invalid until it is filled out.

b.ng-required: Unlike required, which marks a field as always required, the 

c.ng-required directive allows us to conditionally mark an input field as required based on a Boolean condition in the controller.

d.ng-minlength: We can set the minimum length of the value in the input field with this directive.

e.ng-maxlength: We can set the maximum length of the value in the input field with this directive.

f.ng-pattern: The validity of an input field can be checked against the regular expression pattern specified as part of this directive.
    type="email" :Text input with built-in email validation.
    type="number" :Text input with number validation. Can also have         additional attributes for min and max values of the number itself.
   type="date" :If the browser supports it, shows an HTML datepicker. Otherwise, defaults to a text input. The ngmodel that this binds to will be a date object. This expects the date to be in yyyy-mm-dd format (e.g.,
2009-10-24).
       type="url" :Text input with URL validation.

Common AngularJS Services
---------------------------
1.$window:
The $window service in AngularJS is nothing but a wrapper around the global win‐dow object. The sole reason for its existence is to avoid global state, especially in tests. Instead of directly working with the window object, we can ask for and work with $window. In the unit tests, the $window service can be easily mocked out (avail‐able for free with the AngularJS mocking library).
2.$location:
The $location service in AngularJS allows us to interact with the URL in the
browser bar, and get and manipulate its value. Any changes made to the $location service get reflected in the browser, and any changes in the browser are immediately captured in the $location service. The $location service has the following functions, which allow us to work with the URL:
a.absUrl
A getter that gives us the absolute URL in the browser (called $location.
absUrl()).
b.url
A getter and setter that gets or sets the URL. If we give it an argument, it will set the URL; otherwise, it will return the URL as a string.
c.path
Again, a getter and setter that sets the path of the URL. Automatically adds the forward slash at the beginning. So $location.path() would give us the current path of the application, and $location.path("/new") would set the pathto /new.
d.search
Sets or gets the search or query string of the current URL. Calling $location.search() without any arguments returns the search parameter as an object. Calling $location.search("test") removes the search parameter from the URL, and calling $location.search("test", "abc"); sets the search pa
rameter test to abc.
3.$http

Config function :
------------------
• The config function executes before the AngularJS app executes. So we can be assured that this executes before our controllers, services, and other functions.
• The config function follows the same Dependency Injection pattern, but gets providers injected in. In this case, we ask for the ItemServiceProvider.
• At this point, we can now call functions and set values that the provider exposes.
We are able to the call the disableDefaultItems function that we defined in the
provider.
• The config function could also set up URL endpoints, locale information, routingconfiguration for our application, and so on: things that need to be executed and initialized before our application starts.
• We can try changing the value of shouldHaveDefaults to true (this would come from the server or URL, or some other way usually) to see the effect it has on ourapplication.

Directives :

AngularJS directives are what controls the rendering of the HTML inside an AngularJS application. 

myapp = angular.module("myapp", []);

myapp.directive('div', function() {

    var directive = {};

    directive.restrict = 'E'; /* restrict this directive to elements */

    directive.template = "My first directive: {{textToInsert}}";

    return directive;

});

$watch()

The $scope.watch() function creates a watch of some variable. When you register a watch you pass two functions as parameters to the $watch() function:

• A value function
• A listener function

Here is an example:

$scope.$watch(function() {},

              function() {}

             );