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

#EF : DbEntityValidationException - How can I easily tell what caused the error?

While calling  SaveChanges  on my  DbContext , I get the following exception: System.Data.Entity.Validation.DbEntityValidationException: Validation failed for one or more entities. See 'EntityValidationErrors' property for more details. This is all fine and dandy, but I don't want to attach a debugger every time this exception occurs. More over, in production environments I cannot easily attach a debugger so I have to go to great lengths to reproduce these errors. How can I see the details hidden within the  DbEntityValidationException ? Answer :  The easiest solution is to override SaveChanges on your entities class. You can catch the DbEntityValidationException, unwrap the actual errors and create a new DbEntityValidationException with the improved message. Create a partial class next to your SomethingSomething.Context.cs file. Use the code at the bottom of this post. That's it. Your implementation will automatically use the overriden Save...
Post a Comment
Read more

#MVC Authorize Attribute

Authorization is the process of determining the rights of an authenticated user for accessing the application's resources. The Asp.Net MVC Framework has a AuthorizeAttribute filter for filtering the authorized user to access a resource. Authorize Attribute Properties Properties Description Roles Gets or sets the roles required to access the controller or action method. Users Gets or sets the user names required to access the controller or action method. Filtering Users by Users Property Suppose you want to allow the access of AdminProfile to only shailendra and mohan users then you can specify the authorize users list to Users property as shown below. [ Authorize ( Users = "Raj,Deena,Siva,Gow" )] public ActionResult AdminProfile () { return View (); } Filtering Users by Roles Property Suppose you want to allow the access of AdminProfile action to only Admin and SubAdmin roles then you can specify the authorize roles...
Post a Comment
Read more