目前分類：angular (2)

瀏覽方式： 標題列表 簡短摘要

Services : These are singleton objects which are instantiated only once in in app. AngularJS comes with several built-in services such as $http to make XMLHttpRequests.

Data-binding : It helps in automatic synchronization of data between model and view components.

Scope : These are objects that refer to the model. Scope acts as a glue between controller and view.

Controller : These are JavaScript functions bound to a particular scope

Filters : These select a subset of items from an array and returns a new array.

Directives : Directives are markers on DOM elements such as element, attribute, css, and more. They can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives such as ngBind, ngModel etc.

Templates : These are the rendered views with information from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials.

Routing : It is about the concept of switching views.

Model View Whatever : MVW is a design pattern for dividing an application into different parts called Model, View, and Controller, each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View- ViewModel). The Angular JS team refers to it humorously as Model View Whatever.

Deep Linking : Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Dependency Injection : AngularJS has a built-in dependency injection subsystem that helps developer, understand, and test the applications easily.

 

Useful Resources:

 

Angularjs training in chennai

 

Angular 5 Features

 

Angular Official

文章標籤
Angularjs Chennai Course Training

saravanagumar 發表在 痞客邦 留言(0) 人氣()

▲top

First thing first, let’s start with the main objective of this post. Do not worry when you will complete this blog, you will have an intermediate level of expertise on AngularJS modules & controllers. 

In the  previous AngularJS Tutorial, titled Data-binding in AngularJS, you might have noticed  the source code similar to the one mentioned  below:

angular.module(name, [requires], [configFn]);

Parameter
name: name of the module.
requires:  is an optional parameter, if mentioned the new module get created. If not, an existing module is being retrieved.
configFn:  is an optional parameter, execute function on module load

The universal way to create or register the module with Angular is Parameter. It has a suite of services, controllers, services, configuration & directives. In other words, you can consider it as a main() function to initialize and get chained with variable and methods for an application. 

Sample code:

Var MyNewapp = angular.module(“MyNewApp”, []);

Code simplification:  We are using an Angular object to create the module. Here you will also find two parameters of angular.module, the first parameter is the name of a module and second refers to a blank array. 

Remember, there could be a scenario when your custom module will be dependent on another module. In that situation, you can pass that module over Angular module function as a parameter and utilize their resources.

Use: To bootstrap an Angular application, declare ng-app name on your page. 

  <!DOCTYPE html>
  <html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <body>
  <div ng-app=”myApp ">
  <p>Myself {{ firstname }}</p>
  </div>
  </body>
  </html>
  /*New App Declaration*/
  <script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
  $scope.firstname = "Jaywant Topno";
  });
  </script>
view rawangular-module-controller.html hosted with ❤ by GitHub

In above source code, the <div ng-app=”myApp "> section will start bootstrapping (initializing/ resource gathering) process. It tells the browser that this is an Angular app. Here you can also see <p> tag have {{firstname}}. The browser will look for Angular variable and print the value in the view.

Now let’s move to the controller (new app declaration). A controller is nothing but a JavaScript constructor function, which is responsible for building a model (data) so that the same data could be displayed in a view. It has the ability to perform some operation or initializing the variable or getting the data from endpoint URL. 

In other words, when you work on decoupled website, the job of a controller is to get the data from web services. Hope this information is clear and helpful. Let’s view the basic syntax code and explanation of the code.

Syntax: 

  
    
var ControllerName  =  function ($scope) {
   /* variable initialization goes here */
}

Explanation: In the above source code, we are creating an anonymous function and assigning back to a variable. Note that it has one parameter, called $scope, which is an angular object pass to the controller. ControllerName is the name of the controller. Using the AngularJS Data binding methods, we can fetch the data in the view. Here we are also assigning ValueAproperty to  $scope object. 

         $scope.ValueA = "100 INR"; 

Once the controller has been created. The next step would be to Register the controller with the newly created module (myApp).  

Syntax: 

      Module object.Controller(“NewControllerName”, Controller-Function)

Sample:

 
   
Myapp.controller(“'myCtrl'”, function($scope) {   
   $scope.firstname = "Jaywant Topno";
});


Follow the above steps to:

1. Create a controller and register it with the app.
2. Avoid unnecessary variable storage by declaring and then referring.

  var NewApp = angular.module("NewApp,[]");
  var NewController = function ($scope) {
  $scope.ValueA = "100 INR";
  }
  var newApp.controller("NewController",NewController);
  /* Alternate way to write controller */
  var NewApp = angular.module("NewApp,[]");
  var newApp.controller("NewController", function ($scope) {
  $scope.ValueA = "100 INR";
  });
view rawangular-module-controller1.js hosted with ❤ by GitHub

In case the name of controller gets changed then you need to make the similar changes in view also. Else view won’t be able to recognize your variable. 

Sample code:

  var ControllerName = function($scope) {
  $scope.ValueA = "100 INR";
  }
  Var NewApp.Controller("NewController", function($scope) {
  $scope.ValueA = "100 INR";
  }
view rawangular-module-controller.js hosted with ❤ by GitHub

So far we have created a module, a controller and registered that newly created controller.

Now let’s have a look how to pull up model to view using ng-app and ng-controller.

  <!DOCTYPE html>
  <html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <body>
  <div ng-app="NewApp">
  <p>Myself {{ firstName }}</p>
  </div>
  <div ng-controller=" NewController ">
  <p>Myself {{ ValueA }}</p>
  </div>
  </body>
  </html>
view rawangular-module-controller1.html hosted with ❤ by GitHub

Points to remember:

1. View data won’t work outside scope until the controller is declared in the self <div> directory.
2. Create and register controller within single code to reduce unwanted memory allocation.

Phew! That was quite a ride. Remember, before building an application, it is necessary to have an intermediate level knowledge of AngularJS. Modules and controllers are building blocks of a newly created module where controller helps to initialize variable and perform an operation. Further, using ng-app we can tell the view to use specific app and ng-controller for the scope of the variable.

Resources:

Angular Training in chennai

Angular Official

saravanagumar 發表在 痞客邦 留言(0) 人氣()

▲top