AngularJS : First Application
Learn how to build your first application using AngularJS
AngularJS : First Application
The easiest way to understand AngularJS accurately is by using it you own application. In this chapter we will go through the developement process of the building an Application using AngularJS.
AngularJS : Initiating the Project
We will begin with a basic wireframe of the project, using HTML elements.The application is called Bill Payment and named as billPay.html
Example: AngularJS MVC ExampleGive it a TRY! » Note: The file has no functionality and is just a static wireframe.
AngularJS : Applying AngularJS to your File
Next logical step is to add AngularJS files to the HTML document, simply use script element to add angular.js files.
Next we create a Angular JS Module and apply attribute to html element. Any AngularJS application comprises of one or multiple modules, to create a module call the method angular.module
The arguments of the angular.module method is the name of the module to be created and an array of modules to needed in the application in future.
Example: Angular JS Applying AngularJS to your Files
Example: Angular JS Applying AngularJS to your FilesGive it a TRY! » Note: Any given AngularJS Application is made up of number of modules working in combination
AngularJS : Creating a Data Model
In the Application, the variable modelData contains data which was earlier displayed using HTML code, the property items contains an array of object describing bills to be paid.
Example: Angular JS Creating a Data Model
Example: Angular JS Creating a Data ModelGive it a TRY! » Note: The property customer defines the name of the customer/user
AngularJS : Creating a Controller
In MVC terminology, a controller is used to specify the business logic required to create a view, infact the controller contains a set of logic not defining the view but what should be left out from the data model to create a required view.
Both the model and view have their own logic and task of controller is acts a connector between the two.It can update the data in model and also help create a view as per user demand.
To create a controller call the method controller on the module object which is returned by angular.module method.The arguments of the controller are the new controller name and a function to be used to define the tasks of the controller.
Example: Angular JS Creating a Controller
Example: Angular JS Creating a Controller.Give it a TRY! » Note: The controller function has an argument $scope, the symbol $ denotes built-in AngularJS features.
AngularJS : Creating the View of Application
In AngularJS a view for the user is created by putting together data recieved from the controller with HTML elements and then displaying it in the browser, or any other user agent.
The HTML elements in the view are get the data from the model via a process called data binding Step to create views are as given below:
Putting the Model Values
So inorder to access property model.customer, the binding expression is billpay.customer, because the model object is assigned to property $scope.billpay
Execution of the Expression
In the demo we want to display the number of items in the array, to let the viewer know the total number of bills to be paid.
Using Directives for View
In AngularJS directives also makes use of expression, it specifies how the content can be processed.
In the Demo, the attribute ng-repeat hold a directive instructing AngularJS to generate the element within which it is used and the contents within it, for each and every object within the collection.
The value of the attribute ng-repeat is the form of name in collection