ANGULARJS Foundation (vi)

AngularJS HTML DOM
ANGULARJS provides instructions for binding application data to the attributes of an HTML DOM element.

ng-disabled directive
The ng-disabled directive binds directly to the disabled attribute that applies the data to the HTML.
Instance:
<div ng-app= "" ng-init= "Myswitch=true" >
<p>
<button ng-disableled= "Myswitch" > Point me! </button>
</p>
<p>
<input type= "checkbox" Ng-model = "myswitch" > button
</p>
<p>
{{Myswitch}}
<p>
</div>
Example Explanation:
The ng-disabled directive binds the application data "myswitch" to the disabled property of the HTML.
The ng-model directive binds "myswitch" to the contents of the HTML input checkbox element (value).
If Myswitch is true, the button will not be available.
<p>
<button disabled> point me! </button>
</p>
If Myswitch is false, the button is available:
<p>
<button> i!</button>.
</p>

Ng-show directive
The ng-show directive hides or displays an HTML element.
Instance
<div ng-app= "" >
<p ng-show= "True" > I was visible </p>
<p ng-show= "false" > I am invisible </p>
</div>
The ng-show directive displays (hides) HTML elements based on value values.
You can use an expression to evaluate a Boolean value (True or FALSE):
Instance:
<div ng-app= "" >
<p ng-show= "Hour >" > I am visible </p>
</div>

Ng-hide directive
The ng-hide directive is used to hide or display HTML elements.
Instance
<div ng-app= "" >
<p ng-hide= "true" > I am invisible </p>
<p ng-hide= "false" > I am visible </p>
</div>

AngularJS Events
AngularJS has its own HTML event directive

Ng-click directive
The Ng-click directive defines ANGULARJS click events
Instance:
<div ng-app= "" ng-controller= "Myctrl" >
<button ng-click= "Count = Count +1" > Point me! </button>
<p>{{Count}}</p>
</div>

Hide HTML Elements
Ng-hide instructions for designing the application part is visible
Ng-hide= "true" setting HTML element is not visible,
Ng-hide= "false" setting HTML element is not visible.
Instance:
<div ng-app= "myApp" ng-controller= "Personctrl" >
<button ng-click= "Toggle ()" >> Hide/Show </button>
<p ng-hide= "MyVar" >
Name: <input type= "text" ng-model= "FirstName" >
Name: <input type= "text" ng-model= "LastName" >
Full Name:{{firstname + "" +lastname}}
</p>
</div>
<script>
var app = Angular.module (' myApp ', []);
App.controller (' Personctrl ', function ($scope) {
$scope. FirstName = "John",
$scope. Lastname= "Doe"
$.scope.myvar = false;
$scope. Toggle = function () {
$scope. MyVar =! $scope. MyVar;
}
})
</script>
Application Analysis:
The first section PersonController is similar to the controller chapter.
The app has a default property: $scope. MyVar = false;
Ng-hide instruction settings <p> elements and two input fields are visible, depending on the value of MyVar (True or false) to set whether it is visible
The toggle () function Toggles the value of the MyVar variable (true and False)
Ng-hide= "true" to make the element invisible.

The

display HTML element
ng-show directive can be used to set whether part of the center of the app is visible.
Ng-show= "false" to set the HTML element to be invisible.
Ng-show= "True" to set the HTML element to be visible.
Instance:
<div ng-app= "myApp" ng-controller= "Personctrl";
<button Ng-click = "Toggle ( ) "> Hide/Show </button>
<p ng-show =" MyVar ";
Name: <input type=" text "ng-model=" Firstnam　　　　　　　　　　E ";
Last Name: <input type=" text "ng-model=" LastName ";
Name: {{firstName +" + LastName}}
　　　　　　　　　　　　</p>
</div>
<script>
var app = Angular.module (' myApp ', []);
App.controller (' Personctrl ', function ($scope) {
$scope. firstName = "John",
$s　　　　　　　　　　　　　　　　Cope.lastname = "Doe"
$scope. MyVar = true;
　　　　　　　　　　　　　　　　$scope. Toggle = function () {
$scope. MyVar =! $scope. MyVar;
}
})
</script>

AngularJS Module
The module defines an application.
A module is a container for different parts of an application.
The module is the container for the application controller.
The controller usually belongs to a module.

Create a module
<div ng-app= "MYAPP" >...</div>
<script>
var app = Angular.module ("myApp", []);
</script>
The "myApp" parameter corresponds to the HTML element that executes the app.
Now you can add controllers, directives, filters, etc. in the ANGULARJS application.

Add Controller
You can use the Ng-controller directive to add an app's controller.
Instance:
<div ng-app= "myApp" ng-controller= "Myctrl" >
{{firstName + "" +lastname}}
</div>
<script>
var app= angular.module ("myApp", []);
App.controller ("Myctrl", function ($scope) {
$scope. FirstName = "John";
$scope. LastName = "Doe";
})
</script>

Add directive
AngularJS provides a number of built-in commands that you can use to add functionality to your app.
Instance:
<div ng-app= "MYAPP" runoob-directive></div>
<script>
var app = Angular.module ("myApp", []);
App.directive ("Runoobdirective", function () {
return{
Template: "I created it in the command builder!" "
}；
})
</script>

Modules and controllers are included in the JS file
Typically ANGULARJS applications include modules and controllers in JavaScript documents
<! DOCTYPE html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ></script>
<body>

<div ng-app= "myApp" ng-controller= "Myctrl" >
{{firstName + "" + LastName}}
</div>
<script src= "Myapp.js" ></script>
<script src= "Myctrl.js" ></script>
</body>
Myapp.js
var app = Angular.module ("myApp", []);
In the module definition, the [] parameter is used to define the dependency of the module.
The brackets [] indicate that the module is not dependent, and if there is a dependency, it will be written in brackets depending on the module name.
Myctrl.js
App.controller ("Myctrl", function ($scope) {
$scope. FirstName = "John";
$scope. LastName = "Doe";
})

function affects the global namespace
You should avoid using global functions in JavaScript. Because they are easily overwritten by other script files.
The AngularJS module avoids the problem by allowing all functions to be scoped to the module.

when to load storage?
In our example, all the ANGULARJS libraries are loaded in the header of the HTML document.
For HTML applications, it is generally recommended that all scripts be placed at the very bottom of the <body> element.
will increase the load speed of the Web page, because HTML loading is not subject to script loading.
In our multiple ANGULARJS instances you will see that the ANGULARJS library is loaded in the In our example, Angularjs is loaded in the Another solution loads the Angularjs library in the <body> element, but must be placed in front of your Angularjs script:
Instance
<! DOCTYPE html>
<meta charset= "Utf-8" >
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ></script>
<body>
<div ng-app= "myApp" ng-controller= "Myctrl" >
{{firstName + "" + LastName}}
</div>
<script>
var app = Angular.module ("myApp", []);
App.controller ("Myctrl", function ($scope) {
$scope. FirstName = "John";
$scope. LastName = "Doe";
});
</script>
</body>

ANGULARJS Foundation (vi)