Category Archives: AngularJs
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
AngularJs ng-repeat
AngularJs ng-repeat directive : AngularJs ng-repeat directive is used to iterate for each element in collection.
Syntax : AngularJs ng-repeat
{{a}}
Note you can give your ng-app name.
Let us understand with simple example
AngularJs ng-model
AngularJs ng-model directive : AngularJs ng-model directive is used to associate the Html controls (variables) with the application
Syntax : AngularJs ng-model
Enter value of a
Enter value of a
Multiplication of aXb = {{a*b}}
Note you can give your ng-app name.
Let us understand with simple example
AngularJs ng-app
AngularJs ng-app directive : AngularJs ng-app directive is used to define the root of the application. It is used to initialize the application automatically when the page loads
Syntax : AngularJs ng-app
Note you can give your ng-app name .
Example
Let us understand with simple example
AngularJs Directives Intro
AngularJs Directives : AngularJs Directives are extended html attributes used in angularJs.
AngularJs Directives
AngularJs Directives starts with ng- prefix.
There are following common directives in AngularJs
1. ng-app : Is used to initialize the application.
2. ng-init : Is used to initialize the application data.
3. ng-model : Is used to bind the value of HTML with the application data.
Let us understand with simple example
AngularJS Arrays
AngularJS Arrays : AngularJS arrays are same as the javaScript arrays. You can perform operation same as the javaScript arrays.
AngularJS Arrays simple Example using Expressions
You can access array elements same as javaScript.
{{myArr[0] + " , " +myArr[1]}}
Example of AngularJS Arrays with ng-bind
AngularJS Objects
AngularJS Objects : AngularJS Objects are same as the javaScript Objects. You can perform operation same as the javaScript Objects.
AngularJS Objects simple Example using Expressions
Hi This is {{myobj.str1 + " From " + myobj.str2}}
Example of Objects with ng-bind
AngularJS Strings
AngularJS Strings : AngularJS String works same as the javaScript strings. You can perform operation same as the javaScript string.
AngularJS Strings simple Example using Expressions
Hi This is {{str1 + " From " + str2}}
