ng-naras

singular, Plural and Angular

Navigation

Constant and Value

What is Constant?
Registers a value/object that can be accessed by providers and services.
What is Value?
Registers a value/object that can only be accessed by services, not providers.

You can create a Constant or Value and access from anywhere in the application.
Usually you can define Application setting values namely Name, Version and copy right info of the Application.
Now we can see how we use Constant and Value to our existing Application to get the Name of the Application.
There will no change on your Services and App.js.

Service

What is a Service?
Register a service constructor, which will be invoked with new to create the service instance. This is short for registering a service where its provider’s $get property is the service constructor function that will be used to instantiate the service instance.
More info, visit Angular site.

We will see our previous Factory example, how we incorporate Service.
Here we change Student Factory and Enrollment Factory into Student Service and Enrollment Service.
Change the Student and Enrollment Controllers to use Service instead of Factory.
Change the Index view to use the Service js files instead of Factory js files.
There will be no change in App.js and views

Factory

What is a Factory?
An Angular service is a singleton object created by a service factory.
Registers a service factory function, fn, that will be wrapped in a service provider object, whose $get property will contain the given factory function.
More info, visit Angular site
In Factory, you can reuse your code and share your code between controllers.

We will see our previous example, how we incorporate Factory.
Here we move the data and methods from Controller into Factory.

Route

From Angular site:
$route is used for deep-linking URLs to controllers and views.
ngRoute is a module and add this separate script file.   <script src=”https://code.angularjs.org/1.2.28/angular-route.js“></script>
Reference ngRoute into our module as  angular.module(‘StudentApp’, [‘ngRoute’]);

Module

What is a Module? (from Angular site)
You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

We can call our module as StudentApp and first create our module and add our StudentController to our module StudentApp.

Controller

Angular is based on ModelViewController design pattern.
MVC components in angular:  (from AngularJS site)

  • Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings.
  • View — The template (HTML with data bindings) that is rendered into the View.
  • Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values.

$scope is the “glue” (ViewModel) between a controller and a view(From Dan Wahlin).

Now we can use the same example using Controller.


Starting with Angular

First we will see a simple code to get your name as input and display your name with and without using AngularJs.

What is AngularJS? ( from Angular.org)
AngularJS is a structural framework for dynamic web applications and a complete client-side solution.

ng-stands for angular directive and already built-on with angular.
Here we reference the AngularJS script <strong>script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js”></script></strong>
Add the ng-app directive as <html ng-app> and it is very important directive and it is used to initialize angular app using the above script.
Add the ng-model directive as <input type=”text” ng-model=”name” /> and  ng-model directive is going a add a property called “name” in memory called $scope.
{{ name }} – is data binding expression.

Here ng-model does a magic, two-way data binding,  that is when user updates the data, the property value is updated immediately and vice-versa.(see the example With magic Angular).

What is Directive ? (from Angular.org)

Angular teaches the browser new syntax through a construct we call directives. Examples include:

  • Data binding, as in {{}}.
  • DOM control structures for repeating/hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching new behavior to DOM elements, such as DOM event handling.
  • Grouping of HTML into reusable components.

If you are new to AngularJS, first you should watch Dan Wahlin’s AngularJS Fundamentals in 60-ish Minutes.

You can also view the same contents in pdf format through AngularJS Fundamentals in 60-ish Minutes eBook.

There are no more results.