Notes About Angularjs Webinar
Hello everybody,
few notes about some details of AngularJS.
1. What is $scope?
$scope is something where we can store information which is needed for page. Also data for changes of which we need to track.
2. How can we react on some changes in $scope? In other words if something at page modified something in model, how can we react on it? Or in another words, how to track changes in some member?
Imagine following scenario. Inside of your scope there is a member message like this:
$scope.message = "Your message";
You can track it like this:
$scope.$watch("message", function(newValue, oldValue) {
//here you can do something
});
newValue as you probaly guessed is new value, oldValue as you sure is oldValue.
3. What is module?
In AngularJS you work with modules. If you want to do something, you always work with modules. Module is a set of controllers, directives, filters, services, resources.
4. What is filters?
filters is everything that permits to do some actions with data. Filters always are written after | symbol. Some examples of filters:
{{message | uppercase }} - converts message to upper case.
5. How to write your filter:
in your module declaration add .filter('nameOfYourFilter');
angular.module('app', [])
.controller('somecontroller', somecontroller) .filter('toUpper', function() { return function(value) { return //some modification of your value } });
6. How to deal with minification or bundling in AngularJS?
For example like this:
MainController.$inject = ['$scope'];
Another way is to use Jamine.
7. How to repeat some items in list?
you can use for this purpose directive ng-repeat. Imagine you have array like this
$scope.list = [1, 2, 3, 4, 5, 6, 7, 8];
you can display it like this:
<ul>
<li ng-repeat="value in list">{{ value }} </li>
</ul>
Another example. Imagine you have following in your controller declaration:
$scope.list = {
'Ukraine': 'Kyiv',
'USA': 'Washington DC',
'UK': 'London'
}
If you use previous template you'll see only values, and not the keys.
<ul>
<li ng-repeat="(key,value) in list">{{ value }}, {{ key }} </li>
</ul>
it will give you nice list of capitals with countries separated by comma.
8. How to work with routing in AngularJS?
- as dependencies add ngRoute
- add function config with $routeProvider
- mapp url to html template.
Check the following example:
angular.module('app', ['ngRoute'])
.config(function($routeProvider) {
//here we can describe which actions should be executed at some urls. $routeProvider.when('/', {
controller: 'Cntr',
templateUrl: 'someHtmlFile.html',
controllerAs: 'Cntr'
}).otherwise(
controller: 'Cntr',
templateUrl: 'someHtmlFile.html',
controllerAs: 'Cntr'
)
})
.controller('Cntr', Cntr)
And then in html the place where we want to insert template content we need to write attribute ng-view.
9. Is it possible to have more then one module?
yes. We can have multiple modules. For example like this:
angular.module('main', [])
.controller('MainController', MainController);
angular.module('app', ['ngRoute', 'main'])
. // etc
in the described case module app will depend not only from ngRoute but also from main module.
10. Why do I need modules?
You can split your app into different modules, and then make your app from small modules.
11. What are directives?
It's something that can help to extend html. For example ng-click is directive.
let's say that you want write in your html code the following:
<div capitals-list>
</div>
and you expect that browser displayed capitals which you have in your list. You can achieve it with directives. For example like this:
function CapitalsController($scope) {
$scope.list = {
'Ukraine': 'Kyiv',
'USA': 'Washington DC',
'UK': 'London'
}
}
angular.module('app', [])
.controller('CapitalsController', CapitalsController)
.directive('capitalsList', function() {
return function() {
//return needed html
}
});
but what if you want without div ?
then like this:
function CapitalsController($scope) {
$scope.list = {
'Ukraine': 'Kyiv',
'USA': 'Washington DC',
'UK': 'London'
}
}
angular.module('app', [])
.controller('CapitalsController', CapitalsController)
.directive('capitalsList', function() {
return {
restrict: 'EA',
link: function() {
//return needed html
}
}
});
Now puzzle time. What is E? E means that our directive will be available as html element. What means A ? A is attribute. Also there is C, which means class name.
Yet one more complete way:
function CapitalsController($scope) {
$scope.list = {
'Ukraine': 'Kyiv',
'USA': 'Washington DC',
'UK': 'London'
}
}
angular.module('app', [])
.directive('capitals', function() {
return {
restrict: 'EA',
controller: CapitalsController,
templateUrl: 'html file which knows how to parse list of countries',
link: function() {}
}
});
12. How not delete existing content?
Add in directive declaration transculde: true and in html code of template add div at the top with attribute ng-transclude
13. How to create new scope in directive?
just write scope : { }
14. How to get into new scope something from top scope?
scope: {
something : "@something"
}
or
scope: {
something : "=something"
}
15. How to sync scopes of directives automatically?
There is no way. But there is a workaround. You can create your parent directive, inside of your parent directive you can have child directives which will read values from your parent directive.
16. What kind of events available in AngularJS?
$scope.$on - listens to generated events
$scope.$emit - events which buble to the top containers
$scope.$broadcast - events which will be bubled to all child containers. To all children, to all children of all children