Tag Archives: angularjs tutorial with examples
AngularJs Modules
AngularJs Modules : AngularJs Modules works as container for controllers. Controllers are associated with modules.
Example for AngularJs Modules
Let us understand with the following example.
We have created an application named as “myApp” which have the controller named as “myController”.
Name :
Name :
Name : {{ name }}
Email : {{ email }}
Now let us create module
AngularJs Modules Full Example
Output :
AngularJs Modules
Note : You can keep your module and controller javaScript code in external js file. Example module.js and controller.js. Include these file such as
Example
myApp.js will have following code.
var myApp = angular.module("myApp", []);
myController.js will have following code.
myApp.controller("myController", function($scope) {
$scope.name = "Tani";
$scope.email = "tanib@yopemail.com";
});
AngularJs Tables
AngularJs Tables : Tables in AgularJs are created using the ng-repeat directives. You can create tables and add
css styles to them.
AngularJs Tables : Syntax
Example
......
|
Add Css In Table
You can add css directly in table tr and td tags or you can add it by adding custom classes.
AngularJs $even and $odd Example
AngularJs Tables
Angularjs Http Get Method
Angularjs Http Get Method : AngularJs Http Get is used to perform get request. The $http is basically core angular service that provides communication with remote HTTP services via the XMLhttpRequest object or via JSONP. You can use this method to communicate with sever using the get method. We are going to cover this method with example and demo.
Angularjs Http Get Method Syntax
Here is syntax of Http get method –
$http.get('Url').then(Callback);
Url : Thet Url from where you want to load data.
Callback : Callback function after success. Returns object.
Angularjs Http Get Method Sample Data
Sample data for http get method is given below which is used in get method example.
{"users":[{"id":"1","name":"John","email":"johnk@yopemail.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kellyk@yopemail.com","phone":"121212122"},{"id":"3","name":"Ryan","email":"ryank@yopemail.com","phone":"22222212"},{"id":"4","name":"Kojo","email":"kojao@yopemail.com","phone":"12144444"},{"id":"5","name":"Kinjal","email":"kinjal@yopemail.com","phone":"22555212"},{"id":"6","name":"Tani","email":"tanya@yopemail.com","phone":"121334444"},{"id":"7","name":"Brak","email":"barak@yopemail.com","phone":"2444444512"},{"id":"8","name":"Uman","email":"uman@yopemail.com","phone":"12334444"}]}
Below is example of Http Get method which reads data in JSON format from the url : http://runtest.tutorialsplane.com/json/getUsers.php. You can use your server path which will return data in JSON format. Run the below example to see output.
If you run the above example it will produce output like this-
Angularjs Http Get Method
Try Video Demo – All In One Video for this method –
AngularJs Http Get Method Video Demo –
AngularJs Filter Example
AngularJs Filter Example : It Selects subset of array and returns as a new array
AngularJs Filter Example with Syntax
In Html Template
{{ filter_expression | filter : expression : comparator}}
In Javascript
$filter('filter')(array, expression, comparator)
array : Input array as source
expression : Can be string, Object or function used for selecting items from array.
comparator : Used to determine the actual and Expected Value.
Let us understand with very basic example and demo.
Note: Please Make you take proper ng-model name not any invalid name like : search-str Or search_str. Avoid dash, underscore and space in ng-model name.
The above example will look like this :
AngularJs Filter Example
When we search the “Maya” keyword it show the result as below:
AngularJs Filter Example Result
AngularJs Controllers
AngularJs Controllers : Are used for controlling the application data. Controllers are defined in ng-controller directive. Controllers are basically javaScript objcts.
Syntax : AngularJs Controllers
Lets understand with following example and demo.
If want to try the example by your own just copy and paste on .html file and run to see the ouput
AngularJs Controllers Example
The Application is ng-app=”myApp” under which the application will run. ng-Controller =”myController” is angularJs directive. The above example shows the function in the controller code , this functions has a $scope object which is used to set the name in the field “name”. The value for the “name” filed is associated with the model “ng-model” named as “name” in input field.
The main application ng-app=”myApp” is main body of the application under which complete applications runs.
The objects are initialized when applications runs. The controller named as “myController” controls the flow of the
application and plays the important role in application handling.
You can create a separate file to keep the controller code.
Example : Create a myController.js file put in (for example “js”) directory you wish. You can Include it as it :
Enter Name
{{name}}
Now you can add your controller code in the above file.
You can also add the variables in the ng-init directive to use it in the angularJs application. Controllers can interact with the external files also. You can load data from external file and use it in your application for processing. You can load data in json format and xml format.
The Output of the above demo will be :
Angularjs controller example
