Thursday, October 26, 2017

Angularjs Dersleri 2 - İlk örnek, ilk binding, expression

1.1 Örnek:

<!DOCTYPE html>
<html ng-app>
<head>
   <title>Hello World, AngularJS - ViralPatel.net</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
   Write some text in textbox:
   <input type="text" ng-model="sometext" />
   <h1>Hello {{ sometext }}</h1>
</body>
</html>
1.2 We will create our first binding now!!
We are going to connect an input field with an expression that will automatically display whatever we type in.
Minimal Hello User
The Hello World examples are usually quite boring as they are one-way. Just display some string that was part of the code. In this example we have an input element in which we declare the ng-model with a value name.
<input ng-model="name">
Once we do that we can use the name attribute in Angular expressions: {{ name }} for example in order to show the content:
examples/angular/minimal_hello_user.html
  1. <script src="angular.min.js"></script>
  2. <div ng-app>
  3.  <input ng-model="name">
  4.  <h1>Hello, {{name}}</h1>
  5. </div>
If you open this example, you'll see an input box. As you type in the input box the text you type in will also appear after the word Hello.
With this we see how can we bind input elements to attributes of AngularJS that can be used in expressions.
Full Hello User example
The above was probably the smallest possible example using data binding in AngularJS. A full, or at least "fuller" example can be found here:
examples/angular/hello_user.html
  1. <!DOCTYPE html>
  2. <html ng-app>
  3.  <head>
  4.    <meta charset="utf-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  6.    <title></title>
  7.    <script src="angular.min.js"></script>
  8.  </head>
  9.  <body>
  10.      <input ng-model="name" type="text" placeholder="Your name please">
  11.      <h1>Hello, {{name}}</h1>
  12.  </body>
  13. </html>
In this version we have a "real" HTML 5 page, the ng-app marks the whole html file to be our Angular Application, and theinput element is also better described with type and a placeholder to give a hint to the user what to do with the HTML form.

2 - ng-app

Add ng-app to one of the HTML elements in our page. Anything within this element will be seen as part of our AngularJS code. We can add this to the html element, to the body, or even a div as it has been done in our first example.
Sayfamızdaki HTML element'lerden birine ng-app eklersek, bu element içerisindeki her şey Angular.js kodu olarak çalışır. ng-app şu html element'lere eklenebilir. Ama tabii hepsi bu değildir:
<html   ng-app> <body  ng-app> <div  ng-app>

3 - AngularJS expression

{{ "World" }} is an expression which is a code snipped wrapped in {{ }}
Hello World with AngularJS
hello_world.html
  1. <script src="angular.min.js"></script>
  2. <div ng-app>
  3.  Hello {{ "World" }}
  4. </div>
In this example, the expression is a hard-coded string. The result is Hello World. Bu örnekte ekrana Hello World yazılır.
Simple AngularJS expression
In our next example, the expression is a hard-coded computation.
first_expression.html
  1. <script src="angular.min.js"></script>
  2. <div ng-app>
  3.  Hello Angular {{ 19 + 23 }}
  4. </div>
The result is Hello Angular 42.
Angular executed the expression and displayed the result.
Remember, this runs in the browser, so if you click on "view source", you'll see the code as it was in the html file as shown below:
Variables in AngularJS expressions
In the next example, we assign values to variables, and then we use those variables in the expression.
Note: we don't use the var for variable assignment here because these are actually attributes on an internal object of AngularJS.
variables_in_expressions.html
  1. <script src="angular.min.js"></script>
  2. <div ng-app>
  3.  {{ x = 23; y= 19; x + y }}
  4. </div>
Separate variable assignment and usage into two expressions
We can even have the assignment in one expression and use those variables in another expression. Not only that, but the location of those expressions in the HTML file does not matter. As we can see in the following example, we can use the variables even before the assignment:
assignment_and_expression.html
  1. <script src="angular.min.js"></script>
  2. <div ng-app>
  3.  <div>
  4.  Result
  5.  {{ x + y }}
  6.  </div>
  7.  <div>
  8.    Assignment:
  9.    {{ x = 23; y= 19 }}
  10.  </div>
  11.  <div>
  12.    Result
  13.    {{ x + y }}
  14.  </div>
  15. </div>
The result will be:
Result 42
Assignment: 19
Result 42
There is a slight problem though, the last result of the expression where we had the assignment is also displayed. That's why we see the 19 on the page.
The solution is to add another statement to the assignment expression that does not return any visible value. It can be null or '' (the empty string).
examples/angular/assignment_and_expression_fixed.html
  1. <script src="angular.min.js"></script>
  2. <div ng-app>
  3.    <div>
  4.    Result
  5.    {{ x + y }}
  6.    </div>
  7.  <div>
  8.    Assignment:
  9.    {{ x = 23; y= 19; null}}
  10.  </div>
  11.  <div>
  12.    Result
  13.    {{ x + y }}
  14.  </div>
  15. </div>
The result will be:
Result 42
Assignment:
Result 42


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)