AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
##Core Features##
Data binding # sync data between the model and the view
MVC Architecture
Model # the data shown to the user in the view and with which the user interacts
View # what the user sees (the DOM)
Controller # the business logic behind views
Modules # a container for the different parts of an app including controllers, services, filters, directives which configures the Injector
Scope # context where the model is stored so that controllers, directives and expressions can access it
Templates # HTML with additional markup
Expressions # access variables and functions from the scope
Directives # extend HTML with custom attributes and elements
Filters # formats the value of an expression for display to the user
HTML compiler # parses the template and instantiates directives and expressions
Dependency injection # Creates and wires objects and functions
Services & Factories # reusable business logic independent of views
Interpolation
Form validation
Routing
History
Testing
##SPA##
in standarad web page where you click on a button or link and the whole page reloads, with spa we can load different views or you can think of them as kind of mini parts of a screen into a shell page. shell page is like a main page which has the div is a container that we can actually use to load in a view. we can load different views dynamically into the shell page with out reloading the entire page. it loads very fast very fluid and responds very quickly to the user inputs just like a desktop like experience. spa's also maintain a history so if the user clicks on the back button we can make it so that the current view goes away and they go back to the previous view and that provides a really nice way to track what the user has been doing without then having to worry about it.
##writing AngularJS application##
1) load the AngularJS script into the html page # using CDN or loading it from locally downloaded path
2) add an ng-app directive # it tells angularjs this is an angular application it should be scanneed for other angular functionality
3) bind data using directives # ng-model is a directive which acts like a model object to hold the data, {{}} used to output the data
##scope##
scope is a place/context where the data/model is stored so that controllers, directives and expressions can access it.
#When the controller has the data and we need to get that data into the view and we do that using something called the $scope.
$scope acts like a glue that holds the data from logic side to UI side
##Data Binding##
Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. The way that AngularJS implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.
##Modules##
modules are just containers that holds components you build for your applications such as controllers, routes, Factories/services, Directives, Filters.
Using modules you can organize your application code.
##Routes##
Routes will determin which view gets loaded, a route is actually a path that you see up in the URL of your browser and that route determines which view gets loaded, now a view is obviously a web page but it also needs some data.
##Views##
views gets data and binds the data provided by a controller via the $scope object.
views can have directives & Filters which enhance HTML and render data.
##Controllers##
Controllers can have business logic, they interacts with a factory or service and get some data and using the scope they can then bind that data into the view using directives that are defined in the view
##Directives##
extend HTML with custom attributes and elements
##Factories/Services##
we can actually share data between multiple controllers using services/factories
we can write or handle custom logic and things that are reusable into the factories/services
So, when the application grows it is a good practice to move view-independent logic from the controller into a service, so it can be reused by other parts of the application as well.
moreover, We can make RESTful calls.
Factories/services are Sigletons that's why once you create one of these, anything can share it and they provide a great way to encapsulate reusable functionality
##Diff between Factory/Service/Provider & value/Constant##
They are very similar. The difference between Factory/Service/Provider is the way in which they create the object that goes and gets the data.
Provider - there's a $get function you define and it can be used to get the object that returns the data.
Note that angular only “gets” the value once, no matter how many times the provider is injected. That means it calls $get() only once ever, stores the value provided by $get(), and gives you that same stored value every time. provider was accessible from the configuration phase (using module.config())
Factory - With a factory you just provide the function body or a object constructor, so no need of creating $get(), just return the function body which creates the object. Using Factory you can pass the data before creating the object.
Service - you actually just have a standarad function that uses the this keyword to define functions, no need of creating constructor functions like in factory.
So in summary, provider, factory, and service are all providers. A factory is a special case of a provider without implementing the $get() function. It allows you to write it with less code. A service is a special case of a factory when you want to return an instance of a new object, with the same benefit of writing less code.
provider was accessible from the configuration phase, but service and factory were not.
and the same for value and constant. constant is available from the configuration phase and value is not.
#When to use what#
value #You are providing a simple literal value.
constant #You need to be able access that value during the configuration phase. (using .config())
factory #The value/object you are providing needs to be calculated/created based on other data.
service #You are returning an object with methods.
provider #You want to be able to configure, during the config phase, the object that is going to be created before it is created.
<!-- http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/ -->
##Dependency Injection##
Dependency Injection (DI) is a software design pattern that deals with how objects and functions get created and how they get a hold of their dependencies. Everything within AngularJS (directives, filters, controllers, services, ...) is created and wired using dependency injection. Within AngularJS, the DI container is called the injector.
AngularJS uses array syntax to define the dependencies so that the DI also works after minifying the code, which will most probably rename the argument name of the controller constructor function to something shorter like a.
##Core Features##
Data binding # sync data between the model and the view
MVC Architecture
Model # the data shown to the user in the view and with which the user interacts
View # what the user sees (the DOM)
Controller # the business logic behind views
Modules # a container for the different parts of an app including controllers, services, filters, directives which configures the Injector
Scope # context where the model is stored so that controllers, directives and expressions can access it
Templates # HTML with additional markup
Expressions # access variables and functions from the scope
Directives # extend HTML with custom attributes and elements
Filters # formats the value of an expression for display to the user
HTML compiler # parses the template and instantiates directives and expressions
Dependency injection # Creates and wires objects and functions
Services & Factories # reusable business logic independent of views
Interpolation
Form validation
Routing
History
Testing
##SPA##
in standarad web page where you click on a button or link and the whole page reloads, with spa we can load different views or you can think of them as kind of mini parts of a screen into a shell page. shell page is like a main page which has the div is a container that we can actually use to load in a view. we can load different views dynamically into the shell page with out reloading the entire page. it loads very fast very fluid and responds very quickly to the user inputs just like a desktop like experience. spa's also maintain a history so if the user clicks on the back button we can make it so that the current view goes away and they go back to the previous view and that provides a really nice way to track what the user has been doing without then having to worry about it.
##writing AngularJS application##
1) load the AngularJS script into the html page # using CDN or loading it from locally downloaded path
2) add an ng-app directive # it tells angularjs this is an angular application it should be scanneed for other angular functionality
3) bind data using directives # ng-model is a directive which acts like a model object to hold the data, {{}} used to output the data
##scope##
scope is a place/context where the data/model is stored so that controllers, directives and expressions can access it.
#When the controller has the data and we need to get that data into the view and we do that using something called the $scope.
$scope acts like a glue that holds the data from logic side to UI side
##Data Binding##
Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. The way that AngularJS implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.
##Modules##
modules are just containers that holds components you build for your applications such as controllers, routes, Factories/services, Directives, Filters.
Using modules you can organize your application code.
##Routes##
Routes will determin which view gets loaded, a route is actually a path that you see up in the URL of your browser and that route determines which view gets loaded, now a view is obviously a web page but it also needs some data.
##Views##
views gets data and binds the data provided by a controller via the $scope object.
views can have directives & Filters which enhance HTML and render data.
##Controllers##
Controllers can have business logic, they interacts with a factory or service and get some data and using the scope they can then bind that data into the view using directives that are defined in the view
##Directives##
extend HTML with custom attributes and elements
##Factories/Services##
we can actually share data between multiple controllers using services/factories
we can write or handle custom logic and things that are reusable into the factories/services
So, when the application grows it is a good practice to move view-independent logic from the controller into a service, so it can be reused by other parts of the application as well.
moreover, We can make RESTful calls.
Factories/services are Sigletons that's why once you create one of these, anything can share it and they provide a great way to encapsulate reusable functionality
##Diff between Factory/Service/Provider & value/Constant##
They are very similar. The difference between Factory/Service/Provider is the way in which they create the object that goes and gets the data.
Provider - there's a $get function you define and it can be used to get the object that returns the data.
Note that angular only “gets” the value once, no matter how many times the provider is injected. That means it calls $get() only once ever, stores the value provided by $get(), and gives you that same stored value every time. provider was accessible from the configuration phase (using module.config())
Factory - With a factory you just provide the function body or a object constructor, so no need of creating $get(), just return the function body which creates the object. Using Factory you can pass the data before creating the object.
Service - you actually just have a standarad function that uses the this keyword to define functions, no need of creating constructor functions like in factory.
So in summary, provider, factory, and service are all providers. A factory is a special case of a provider without implementing the $get() function. It allows you to write it with less code. A service is a special case of a factory when you want to return an instance of a new object, with the same benefit of writing less code.
provider was accessible from the configuration phase, but service and factory were not.
and the same for value and constant. constant is available from the configuration phase and value is not.
#When to use what#
value #You are providing a simple literal value.
constant #You need to be able access that value during the configuration phase. (using .config())
factory #The value/object you are providing needs to be calculated/created based on other data.
service #You are returning an object with methods.
provider #You want to be able to configure, during the config phase, the object that is going to be created before it is created.
<!-- http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/ -->
##Dependency Injection##
Dependency Injection (DI) is a software design pattern that deals with how objects and functions get created and how they get a hold of their dependencies. Everything within AngularJS (directives, filters, controllers, services, ...) is created and wired using dependency injection. Within AngularJS, the DI container is called the injector.
AngularJS uses array syntax to define the dependencies so that the DI also works after minifying the code, which will most probably rename the argument name of the controller constructor function to something shorter like a.