{"id":400,"date":"2017-04-04T03:27:16","date_gmt":"2017-04-04T03:27:16","guid":{"rendered":"http:\/\/kaizen-koka.com\/?p=400"},"modified":"2017-04-04T03:28:16","modified_gmt":"2017-04-04T03:28:16","slug":"angularjs-1-0","status":"publish","type":"post","link":"https:\/\/kaizen-koka.com\/?p=400","title":{"rendered":"AngularJS 1.0"},"content":{"rendered":"

\n\t– <\/strong>AngularJS is a single page application framework
\n\t–<\/strong> AngularJS provides a robust 'SPA' framework for building robust client-centric applications.
\n\t–<\/strong> Views, Controllers & Scope
\n\t– <\/strong>Modules, Routes, and Factories
\n\t– <\/strong>AngularJS is a one core library – no dependencies on others.<\/span><\/span>\n<\/p>\n

\n\tWhat is SPA?<\/strong>
\n\t– Where we will have a shell page and loads multiple views into that.<\/span><\/span>\n<\/p>\n

\n\tFeatures:<\/strong>
\n\t– Two-way data binding
\n\t– MVC concepts support
\n\t– Routing techniques
\n\t– Testing
\n\t– JqLite(jquery for DOM manipulation)
\n\t– Support for templates(when we go for data binding)
\n\t– Share code(reusability) through factories and other services
\n\t– Databinding with ViewModels
\n\t– Directives, Validations, Dependency Injections
\n\t– Key Features<\/strong> like Directives, two-way data binding, views, controllers, scope, modules, and routes.<\/span><\/span>\n<\/p>\n

\n\tDirectives <\/strong>– It's a way to teach html new tricks
\n\tng-app : it initializes the angular app
\n\tng-model : binds an input to a property on the scope using ngModel Controller.
\n\tdatabinding expression : {{}}
\n\tng-init ="names=[‘siva’,’kamal’]"
\n\tng-repeat : Instantiates a template once per item from a collection.
\n\tng-bind : Used to replace the text context of the html element with value of a given expression.
\n\tng-controller : Attaches the controller class to the view.
\n\tng-view : placeholders for view.<\/span><\/span>\n<\/p>\n

\n\tFilters:<\/strong> Selects a subset of items from array & returns it as a new array using pipe operator(|)
\n\t{{filter-expression | filter:expression:comparator}}
\n\torderBy, uppercase, limitTo, number, date, currency<\/span><\/span>\n<\/p>\n

\n\tView, Controllers & Scope<\/strong>(viewModel – integrate between view & controller)
\n\t-$scope is the glue(viewModel) between a controller and a view.
\n\t<div data-ng-controller="SimpleController">
\n\t <li data-ng-repeat="cust in customers">  – Accessing the $scope<\/span><\/span>\n<\/p>\n

\n\t <script>
\n\t function SimpleController($scope){
\n\t $scope.customers =[{name:’Koka’, City:’VA’},{name:’siva’, city:’az’}]
\n\t }<\/span><\/span>\n<\/p>\n

\n\t\"\"<\/a> \"\"<\/a>\n<\/p>\n

\n\t
\n\tModules, Routes,  Factories & Services<\/strong>
\n\t-Module can have config function & this config can be used to define different routes. 
\n\t-Two things can be defined in Route, view & controller
\n\t-Controller can have factory or services to get the data, manipulate the data, CRUD operations.
\n\t-On views, we have directives to support.<\/span><\/span>\n<\/p>\n

\n\t<html ng-app="moduleName"> 
\n\t var demoApp = angular.module('demoApp',[]);
\n\t   [] is where you can add dependency modules(dependency injection) like helper module.<\/span><\/span>\n<\/p>\n

\n\tDefining Routes<\/strong> :<\/span><\/span>\n<\/p>\n

\n\tvar demoAPP = angular.module('demoApp',[]);
\n\tdemoApp.config(function($routeProvider)){
\n\t    $routeProvider
\n\t    .when('\/',
\n\t         {
\n\t         controller:'SimpleController',
\n\t         templateUrl:'view1.htm'
\n\t         })
\n\t    .when('\/partial',
\n\t         {
\n\t         controller:'SimpleController',
\n\t         templateUrl:'view2.htm'
\n\t         })
\n\t     .otherwise({
\n\t         redirectTo:'\/'
\n\t     })    
\n\t});
\n\tdemoApp.controller('simpleController', function($scope)){
\n\t    $scope.customers =[{name:koka,city:va},{name:siva,city:va}]});<\/span><\/span>\n<\/p>\n

\n\tFactory, Service & Providers <\/strong>
\n\t  – Allows us to encapsulate common functionalities. Difference is the way & which they get the data from backend system.
\n\t  – Factory injected in to the controller at runtime.
\n\t  var demoApp = angular.module('demoApp',[])
\n\t  .factory('simpleFactory',function(){
\n\t  var factory = {};
\n\t  var customers = […];
\n\t  factory.getCustomers = function(){
\n\t    return customers;};
\n\t  return factory;})
\n\t  .controller('simpleController', function($scope, simpleFactory){
\n\t    $scope.customers = simpleFactory.getCustomers();
\n\t  })<\/span><\/span>\n<\/p>\n

\n\t
\n\t$rootscope : rootScope avaliabile globally
\n\t$scope : only avaliable to the controller that has created and its children.<\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

– AngularJS is a single page application framework – AngularJS provides a robust 'SPA' framework for building robust client-centric applications. – Views, Controllers & Scope – Modules, Routes, and Factories […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[22],"tags":[],"class_list":["post-400","post","type-post","status-publish","format-standard","hentry","category-ui"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p70lnf-6s","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=400"}],"version-history":[{"count":1,"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=\/wp\/v2\/posts\/400\/revisions"}],"predecessor-version":[{"id":403,"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=\/wp\/v2\/posts\/400\/revisions\/403"}],"wp:attachment":[{"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kaizen-koka.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}