Skip to main content

AngularJS - 02 (Intro Coding)


AngularJS is distributed as a JavaScript file,
 and can be added to a web page with a script tag:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

 <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

 Example explained:

 AngularJS starts automatically when the web page has loaded.

 The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

 The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

 --------------------------------------------------------------------------------------------------------------------

Steps to create AngularJS Application

<div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Step 1 − Load framework

Being a pure JavaScript framework, It can be added using <Script> tag.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Step 2 − Define AngularJS Application using ng-app directive

<div ng-app = "">
   ...
</div>

Step 3 − Define a model name using ng-model directive

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 3 − Bind the value of above model defined using ng-bind directive.


<p>Hello <span ng-bind = "name"></span>!</p>
-----------------------------------------------------------------------------------------------------------------------

 
<!DOCTYPE html>
<html lang="en">


<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">

<div ng-controller="HelloController" >
    <h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "World, AngularJS";
    } );
</script>
</body>
</html>

In this example the "view" is this part:
<div ng-controller="HelloController" >

    <h2>Hello {{helloTo.title}} !</h2>

</div>

Notice the ng-controller attribute. This attribute tells AngularJS what controller to use with this view. Notice also the {{helloTo.title}} text. This is part of AngularJS's template system. This tells AngularJS to write the "model" value named helloTo.title to the HTML at this location.

The "controller" is this part:
<script>
angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "World, AngularJS";
    });
</script>

This code registers a controller function named "HelloController" in the angular module named "myapp". Angular modules will be explained later in this tutorial.
The $scope parameter passed to the controller function is the "model". The controller function adds ahelloTo JavaScript object, and in that object it adds a title field. It is this helloTo.title value from the model which the view writes into the HTML.





















Comments

Post a Comment

Popular posts from this blog

Use Log4Net in C# windows form Application

we are going to learn on how to use the Log4Net library for creating logs. Create a new windows form application in VS. Install Log4Net library Add to AssemblyInfo.cs  Configure in  App.config Use in code  Install Log4Net library Then install the Log4Net library from the Nuget Package library.           log4net by The Apache software foundation 2.0.8 (i installed the latest). Add to AssemblyInfo.cs  After installing this package, open up AssemblyInfo .cs file under the Properties folder and add the log4net assembly information into it (under the other assembly information.).    [assembly: log4net.Config.XmlConfigurator(Watch= true )]  Configure in  App.config Now, open the App.config file and enter required details for LogNet to work. <configSections>       <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net, Version=1.2....
1 comment
Read more

#MVC : Why does Html.Label() not work with periods? or Why is @Html.Label() removing some characters

You are misusing the  Html.Label  method. It is for: Returns an HTML label element and the  property name of the property  that is represented by the specified expression. That's why it gets confused if you have a point  .  in the first parameter because it expects a property expression there. However, you can use the second overload: @Html . Label ( "" , String . Format ( "{0}. someText" , 1 )) Or just write out the HTML: <label> @String . Format ( "{0}. someText" , 1 )</ label > or <label class="WelcomeText" style="float: left">Welcome @Html.Label("", Model.USERID + " ( " + Model.ROLE + " )", new { @class = "WelcomeText" })</label> 
Post a Comment
Read more

#SQL CTE(Common Table expressions)

SQL Server 2005 and on wards, a very powerful feather has been added for the programmers' benefit called CTE. CTE is again a temporary result set derived from the underling definition.  Common Table Expressions offer the same functionality as a view, but are ideal for one-off usages where you don't necessarily need a view defined for the system. CTE offers the advantages of improved readability and ease in maintenance of complex queries . The query can be divided into separate, simple, logical building blocks. These simple blocks can then be used to build more complex, interim CTEs until the final result set is generated. Common Table Expression Syntax A Common Table Expression contains three core parts: The CTE name (this is what follows the WITH keyword) The column list (optional) The query (appears within parentheses after the AS keyword) The query using the CTE must be the first query appearing after the CTE. Syntax : WITH expression_name [ ( column_n...
Post a Comment
Read more