Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Google Angular 2 finally arrives

In 2010 Google and its developers introduced cool web development JavaScript framework AngularJS to world; it quickly became one of the hottest web technologies. Last night (on 15 Sep 2016) finally Google released most awaiting and excited version of Angular 2 rewritten with Microsoft's TypeScript, offers payload size and performance enhancements.

 

Some cool features

1.  Speed & performance.
2.  Supports all platforms and all browsers.
3.  Change detection.
4.  Extensible with existing code and tools.
5.  Quite easy and simple to create new web applications.
6.  You can create more secure code than old versions.
7.  Improvement in routing and dependency injections.
8.  Improvements in design and style section than older version.

Announcements:

1.   New release after every 6 months so the next one would be around February with Angular 2

2.  In next release more concentration on animation and improvements mobile web app development.

3.  Angular developer team will also move to releasing Angular updates through three channels (major, minor and patch).

The team now also recommends that developers use Microsoft developed TypeScript to write their apps.

Angular 2 details and references required for developers

Official website
https://angular.io/
Code available at github
https://github.com/angular/angular
Angular 2.0 developer documentation
https://angular.io/docs/ts/latest/guide/
Report issues with Angular 2.0 team
https://github.com/angular/angular/issues

Contributions

I shared some developer’s names those worked hard and contributed with angular 2 developer community you can all details with blog http://angularjs.blogspot.in/2016/09/angular2-final.html



 धन्यवाद मित्रानोआपला प्रत्येक दिवस आनंदी आणि सुखी जावो  


AngularJS Routing

Introduction

When I started writing on AngularJS I shared following tow posts on AnjularJS 

http://codechef4u.com/post/2016/04/02/angularjs-introduction
http://codechef4u.com/post/2016/04/01/why-you-should-use-angularjs

In both posts I mentioned AngularJS is a Single Page Applications(SPA) framework,

I think that is a wrong assumption you can use AnjularJS for creating multi page applications also easily and efficiently.

AngularJS is a Single Page Applications (SPA) framework is only Hype?

AngularJS does not enforce developers to create SPAs. It makes it easy to write SPAs, hence people created hype about AngularJS it is Single Page Applications (SPA) framework.

You can create easily AngularJS choose Multi Pages Applications (MPAs) using $Route Module,routing service provider $routeProvider, ng-View directive and  inbuilt AngularJS Dependency Injection feature.

Always choosing single page application is not good- especially if you are looking into highly complex, Module based, pluggable UI architecture in that case my suggestions Is choose Multi Pages Application (MPA).

MPAs Required Terms Explained:

ngRoute Module

The ngRoute module provides routing and deeplinking services and directives for angular apps.

Syntax:

angular.module('YourModule', ['ngRoute'])

$routeProvider

Provider is Used for configuring routes, Requires the ngRoute module to be installed.
Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser.

$Route

$route is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition

The $route service is typically used in conjunction with the ngView directive and the $routeParams service.

 ng-View Directive

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Syntax

  <[html tag]  ng-view>your html view code</[html tag]>

AngularJS Multi Pages Application Example

I will create sample AngularJS application with two views,

1. employee.html

2. contact.html

And I will explain this example following steps.

Step 1:

A. Create a module named mainApp and load ngRoute as a dependent module.

B. Configure the routes using $routeProvider.

C. We use three paths in the example, /home ,/viewEmplyees,/viewContacts with EmployeeController and

    ContactController this is initialized with an array of employees and a contact message.

E. We will be showing the message in the home page and the employees list in employee page, and contact details in contact page.

F. Save this file as AppRouteExample.js.

AngularJS Controller and Model code

var mainApp = angular.module("mainApp", ['ngRoute']);
 
mainApp.config(function ($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'EmployeeController'
        })
        .when('/viewEmployees', {
            templateUrl: 'employees.html',
            controller: 'EmployeeController'
        })
 
        .when('/viewContacts', {
            templateUrl: 'contact.html',
            controller: 'ContactController'
        })
 
        .otherwise({
            redirectTo: '/home'
        });
});
 
mainApp.controller('EmployeeController', function ($scope) {
    $scope.employees = [
        { name: 'Shourya Kendre',designation:'CEO',company:'CodeChef4u', city: 'Pune' },
        { name: 'Sanskruti Kendre', designation: 'Director', company: 'Aditya Enterprises', city: 'Riagad' },
        { name: 'Anushka Kendre', designation: 'Chairman', company: 'KCS', city: 'Latur' }
    ];
 
    $scope.message = "Click on the hyper link to view the employess list.";
});
 
mainApp.controller('ContactController', function ($scope) {
    $scope.message = 'Please contact us at www.codechef4u.com contact page or admin@codechef4u.com';
});

Step 2:

Now we can create our views and save as home.html, employee.html, contact.html

Home.html

<div class="container">
          <div class="row">
          <div class="col-md-3">
              <ul class="nav">
                  <li><a href="#/viewEmployees"> View Employees List</a></li>
                  <li><a href="#/viewContacts"> Contact Us </a></li>
               </ul>
           </div>
      </div>
  </div>

Employees.html

<div class="container">
    <h2> View Employees </h2>
    Search:
    <br/>
        <input type="text" ng-model="name" />
    <br