Charming features of AngularJS and IONIC , Hybrid Apps framework
Sources: This writing is based on study various tutorials and some practical project development for mobile and web with AngularJS and IONIC , a popular hybrid apps development platform
What you may get from this writing:
o As per my understanding some charming features of angularJS which fascinated me for which I am sharing to impress others for it.
o It may be very helpful for those are taking preparation for the AngularJS Interview
o Comparative orientational Knowledge
This writing is not for :
o It will not cover the angularJS from A to Z even it will not guide anyone to create a hello world angularJS example sequentially.
Before mentioning the charming features I would like to give some basic idea on AngularJS:
What is angularJs
AngularJS is an open-source web application framework mainly maintained by Google . It is basically JavaScript MVC based powerfull framework.
When it started
AngularJS version 1.0 was released in 2012. Miško Hevery, a Google employee, started to work with AngularJS in 2009. The idea turned out very well, and the project is now officially supported by Google.
The second version of the AngularJS web framework. AngularJS 2 takes a web component-based approach to building powerful applications for the web. It is used along with TypeScript which provides support for ECMAScript 5, ECMAScript 6, and ECMAScript 7.
How it works
I struggled first time to get an overall idea how all it fits all together
Why we should learn AngularJS
• AngularJS extends HTML with new attributes.
• AngularJS is perfect for Single Page Applications (SPAs).
• Structured and maintainable
• Easy to learn
• Easy to test.
The Charming features of angularJS
What is directive, where and how directive is used:
AngularJS has a set of built-in directives which offers functionality to your applications. AngularJS also lets you define your own directives.
You can see that as I type it automatically binds it, and that’s pretty damned easy, right?
• Include the ng-app
• Include the ng-model
• Bind to that model
Also we have option to make custom directive. We will discuss it later.
What is module and how it is created:
A module is a container for the different parts of our app – controllers, services, filters, directives, etc.
The angular.module is a global place for creating, registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.
<html ng-app=”modulename”>
In above example you can see I called my module
demoApp. You might wonder what exactly is the empty array for? I know I did the first time I saw it.
The answer is this is where dependency injection comes in because your module might actually rely on other modules to get data.
So we can say Modules are container.
// Create a new module
var myModule = angular.module('myModule', []);
// register a new service
myModule.value('appName', 'MyCoolApp');
// configure existing services inside initialization blocks.
myModule.config(['locationProvider) {
// Configure existing providers
$locationProvider.hashPrefix('!');
}]);
What about $scope , controller and View:
$scope is the glue (ViewModel) between a controller and view.
When I say it’s the glue, it literally is the thing that ties the controller to the view. The view doesn’t have to know about the controller, and the controller definitely doesn’t want to know about the view
What are filters: Filters are used to change modify the data and can be clubbed in expression or directives using pipe character. Commonly used filters like uppercase,lowercase,orderby,currency,filter
Filtered list views : Having views that display objects filtered by a certain criteria.
What about routes:
Pushing changes to the browser url hash and listening for changes to act accordingly.
AngularJS $watch() , $digest() and $apply():
Objects that can be observed for changes.Understanding $watch(), $digest() and $apply() is essential in order to understand AngularJS.
$watch
watch(function() {}, function() {} );
The first function is the value function and the second function is the listener function.
$digest()
The digest() function iterates through all the watches in the $scope object, and its child $scope objects (if it has any). When apply()
The apply() function takes a function as parameter which is executed, and after that digest() is called internally. That makes it easier for you to make sure that all watches are checked, and thus all data bindings refreshed. Here is an $apply() example:
apply(function() {
$scope.data.myVar = "Another value";
});
The function passed to the $apply() function as parameter will change the value of $scope.data.myVar. When the function exits AngularJS will call the digest() function so all watches are checked for changes in the watched values.
Factory ,Services, value and Provider
Factory :
Factories are the most popular way to create and configure a service
Syntax: module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.
Services :
Simply while looking at the services think about the array prototype. A service is a function which instantiates a new object using the 'new' keyword. You can add properties and functions to a service object by using the this keyword. Unlike a factory, it doesn't return anything (it returns an object which contains methods/properties).
Syntax: module.service( 'serviceName', function );
Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService().
In AngularJS, Service is nothing but a singleton JavaScript object which can store some useful methods or properties. This singleton object is created per ngApp(Angular app) basis and it is shared among all the controllers within current app. When Angularjs instantiate a service object, it register this service object with a unique service name. So each time when we need service instance, Angular search the registry for this service name, and it returns the reference to service object. Such that we can invoke method, access properties etc on the service object. You may have question whether you can also put properties, methods on scope object of controllers! So why you need service object? Answers is: services are shared among multiple controller scope. If you put some properties/methods in a controller's scope object , it will be available to current scope only. But when you define methods, properties on service object, it will be available globally and can be accessed in any controller's scope by injecting that service.
Value :
A value is just a way to get for instance a config value. A simple example of this you’ll see on the Angular site is you might just want the version of a particular script.
Providers :
A provider is used to create a configurable service object. You can configure the service setting from config function. It returns a value by using the $get() function. The get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.
Providers have the advantage that they can be configured during the module configuration phase.
Provide() function is the another way for creating services. Let we are interested to create a service which just display some greeting message to the user. But we also want to provide a functionality such that user can set their own greeting message. In technical terms we want to create configurable services. How can we do this ? There must be a way, so that app could pass their custom greeting messages and Angularjs would make it available to factory/constructor function which create our services instance. In such a case provide() function do the job. using provide() function we can create configurable services.
How does provider syntax internally work?1.Provider object is created using constructor function we defined in our provide function.
var serviceProvider = new serviceProviderConstructor();
2.The function we passed in app.config(), get executed. This is called config phase, and here we have a chance to customize our service.
configureService(serviceProvider);
3.Finally service instance is created by calling get()
Only provider will be available in config phase of angular, while service & factory are not.
" Hello world " example with factory / service / provider
var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!";
}
}
};
this.setName = function(name) {
this.name = name;
};
});
//hey, we can configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
$scope.hellos = [
helloWorld.sayHello(),
helloWorldFromFactory.sayHello(),
helloWorldFromService.sayHello()];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
{{hellos}}
</div>
</body>
Output : ["Hello, World!","Hello, World!","Hello, World!"]
View bindings
Using observable objects in views, having the views automatically refresh when the observable object change.
Two way bindings :
Having the view push changes to the observable object automatically, for example a form input.
Partial views : Views that include other views.
Dependency injection
Dependency injection is basically providing the objects that an object needs (its dependencies) instead of having it construct them itself. It's a very useful technique for testing, since it allows dependencies to be mocked or stubbed out.
Dependencies can be injected into objects by many means (such as constructor injection or setter injection). One can even use specialized dependency injection frameworks (e.g Spring) to do that, but they certainly aren't required. You don't need those frameworks to have dependency injection. Instantiating and passing objects (dependencies) explicitly is just as good an injection as injection by framework.
Directive :
AngularJS lets you extend HTML with new attributes called Directives. It has a set of built-in directives which offers functionality to your applications.
AngularJS also lets you define your own directives (Custom Directive).
Directives are what makes AngularJS so powerful and responsive. Directives are the root of AngularJS and how we as developers interact with AngularJS.
That is to say, we pick one of the four methods for invoking a directive:
• As an attribute : <span my-directive ng-model="name" ></span>
• As a class : <span class="my-directive: expression;" ng-model="name" ></span>
• As an element : <my-directive ng-model="name" ></my-directive>
• As a comment : <!-- directive: my-directive expression -->
We can config restrict option like restrict: “EA”
• 'A' - <span my-directive></span>
• 'E' - < my-directive ></ my-directive >
• 'C' - <span class=" my-directive "></span>
• 'M' - <!-- directive: my-directive -->
app.directive('myDirective', function() {
return {
restrict: 'A',
require: '^ngModel',
transclude: true,
template: '<div class="testclass"></div>'
}
});
We can use templateUrl: 'templates/mytest-template.html'
^ -- Look for the controller on parent elements, not just on the local scope
? -- Don't raise an error if the controller isn't found
• transclude:true, which will take the content of the directive and place it in the template
• transclude:‘element’, which will take the entire defined element including the lower priority directives.
How directives are born (compilation and instantiation)
When the DOM is done loading and the AngularJS process starts booting up, the first process that happens is the HTML is parsed by the browser as a DOM tree. This tree is then parsed using AngularJS’s $compile() method. $compile runs through the DOM tree and looks for directive declarations for the different DOM elements. Once all directive declarations are found for each DOM element and sorted (by priority, which we’ll get into shortly), the directive’s compile function is run and is expected to return a link() function. The $compile() function will return a linking function that wraps all of the containing DOM element’s directives’ linking functions.
Finally, the linking function is invoked with the containing scope that attaches all of the associated directives to that scope. This is where we’ll do most of the work when building directives, as this is where we can register listeners, set up watches, and add functionality. The result of this process is why the live data-binding exists between the scope and the DOM tree.
AngularJS Validation Properties
• $dirty
• $invalid
• $error
Understanding Components of Angular 2
In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.
This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style of application architecture.
Advantages of Components:
• simpler configuration than plain directives
• promote sane defaults and best practices
• optimized for component-based architecture
• writing component directives will make it easier to upgrade to Angular 2
When not to use Components:
• for directives that rely on DOM manipulation, adding event listeners etc, because the compile and link functions are unavailable
• when you need advanced directive definition options like priority, terminal, multi-element
• when you want a directive that is triggered by an attribute or CSS class, rather than an element
I tried to write some fascinated activities and magical features of IONIC , a popular hybrid apps development platform. But I could not do that as it has already got larger and anybody can get tired to finish. I hope I will write about IONIC on next writing or will update it InshaAllah.
ing here...
Hey,
This is Hadiya Barakahea from Sharjah UAE,
I have hired developer recently for website and the team of developers forced me to let us create my site frontend using Angularjs i was confuse that <a href=“http://www.escape-advertising.com/”>website designing companies dubai</a> usually create sites with bootstrap for frontend that is why we were confuse then we were agree to have site frontend with Angularjs but after website creation now our site is working smoothly I really like node site mean i want other to have site with Angularjs not bootstrap which is kind a old technology what you think ?
Thanks
Hadiya