Angularjs Concept

Angularjs Note

1. usage of select options

Angular support the usage of select and options. we can see the official document select, ngOptions .

Note: Matching model and option values
if the value attribute of the option is specified, it will be treated as string. that means, the model should also be string, otherwise, miss matching will occur.
if the model is a object or other non-string , we can use these ways:

. the ngOptions directive
. the ngValue directive, which allows arbitrary expressions to be option values (Example)
. model $parsers / $formatters to convert the string value (Example)

For the Sample code refer link1, link2.

2. Services

we should make clear about the service and services, the first is an instance of the second. Now, we can see the definition of services: we can use services to orginaze and share your code accross your app..
refer document of Services.
Key points:
. Lazy instantiated.
. Singletons.

How to use the services, two steps: 1. register or definition 2. DI . For step1, we can call factory or service function to register or define the service.
the difference for factory and service is, in factory, only things under return will be validate, for service, we don't need return, this is the all content.
we can register a service over a module by calling factory or service function, or we can register it in the config function of a module by calling factory or service function over $prvider injected into the config function.
Detail, we can refer the link here.
we have a lot of build-in services like: $http, $q....

3. Controllers

The Controller is used to argument the scope by the js contructor function. when a controller is instanced, a new child scope will be created and injected into the contructor of the controller by the parameter $scope,
if we specify the controllerAs property, the instance of controller will be assign to the $scope through the name of controllerAs, if not we can call $ctrl directly.
official document here.

Best pratise for usage of controller,
. Set up the initial state of the $scope object.
. Add behavior to the $scope object.

Document of ngController

4. Components and Directives

Component Doc Directive Doc
Generally to say, component is a special kind of directive, which use simpler configuration.
for definition of component, just call component function with two params: componnetName,configuration object. for directive, we need to call the facotory function to return the configuration object.
For the difference of component and directive, we can refer the table in the above link.

Best Pratice for Component base architecture.
. Components only control their own View and Data
. Components have a well-defined public API - Inputs and Outputs : one-way or two-ways binding, =,<,&
. Components have a well-defined lifecycle:$onInit()...
.An application is a tree of components

Directives