Home > Developer > Web Develop
The previous article learned some of Angularjs's simple uses, and continues to follow the rest of the story.
This article continues to study the remaining content of Angularjs according to w3cschool.cc, including:
1 events
2 Modules
3 form
4 Data validation
5 Bootstrap CSS Style
6 include other pages
7 Applications
8 Reference Manual
First look at the HTML event
The article gives three examples of HTML events, which are clicked, hidden, and displayed. The use method is basically the same:
First look at the click of the example, click the button, will trigger the method within the Ng-click, to accumulate plus one:
<div ng-app= "" ng-controller= "Mycontroller" ><button ng-click= "Count = Count + 1" > Point me! </button><p>{{Count}}</p></div>For the same principle as the ng-hide and Ng-show, both specify a bool value, TRUE or false.
At the beginning of the MyVar value is false, so it is not hidden, each click MyVar will change to the opposite value, to achieve the actual hidden effect.
<div ng-app= "" ng-controller= "PersonController" ><button ng-click= "toggle ()" > Hide/Show </button><p Ng-hide= "MyVar" >Name:<input type= "text" ng-model= "Person.firstname" ><br>Surname:<input type= "text" ng-model= "Person.lastname" ><br><br>Name: {{Person.firstname+ " " +Person.lastname}}</p></div><script>functionPersonController ($scope) {$scope. person={firstName:"John", LastName:"Doe" }; $scope. MyVar=false; $scope. Toggle=function() {$scope. MyVar= !$scope. MyVar; };}</script>
Ng-show using the same method
<div ng-app= "" ng-controller= "PersonController" ><button ng-click= "toggle ()" > Hide/Show </button><p ng-show= "MyVar" >Name:<input type= "text" ng-model= "Person.firstname" ><br>Surname:<input type= "text" ng-model= "Person.lastname" ><br><br>Name: {{Person.firstname+ " " +Person.lastname}}</p></div><script>functionPersonController ($scope) {$scope. person={firstName:"John", LastName:"Doe" }; $scope. MyVar=true; $scope. Toggle=function() {$scope. MyVar= !$scope. MyVar; };}</script>
About the Angularjs module
The module defines the user's application, and all the controllers belong to a module. The previously used Ng-app is the definition of the module.
For example, the following code defines the module MyApp for an application, and defines a controller Myctrl:
<body><div ng-app= "myApp" ng-controller= "Myctrl" >+ "+ LastName}}</div>< Script src= "//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js" ></script><script src= "MyApp.js" ></script><script src= "Myctrl.js" ></script></body>
For controllers, the declaration can also be defined through a module:
+ "+ LastName}}</div> <script>var app = Angular.module ("myApp", []); App.controller (function($scope) { = "John"; = "Doe";}); </script></body>However, you should load the Angularjs script in advance so that angular.module in script can be used. Or in front of this sentence to load JS.
About Angularjs FormsForms are an important part of the web, as shown in the following example, which makes it easy to get to the data in a form
<div ng-app= "" ng-controller= "Formcontroller" > <form novalidate> First Name:<br > <input type= "text" ng-model= "User.firstname" ><br> last Name:<br> < Input type= "text" ng-model= "User.lastname" > <br><br> <button ng-click= "reset ()" > reset</button> </form> <p>form = {{user}}</p> <p>master = {{Master}} </p></div><script>function formcontroller ($scope) { = {firstName: " John ", LastName:" Doe "}; function () { = angular.copy ($scope. master); }; $scope. Reset ();}; </script>ANGULARJS provides a number of verification mechanisms, such as mailboxes.
<! DOCTYPE html>name= "MyForm" novalidate><p>username:<br> <input type= "text" name= "user" ng-model= "user" required> & Lt;span style= "color:red" ng-show= "Myform.user. $dirty && myform.user. $invalid" > <span ng-show= " Myform.user. $error. Required ">username is required.</span> </span></p><p>email:<br > <input type= "email" name= "email" ng-model= "email" required> <span style= "color:red" ng-show= " Myform.email. $dirty && myform.email. $invalid "> <span ng-show=" Myform.email. $error. Required ">email is required.</span> <span ng-show= "Myform.email. $error. Email" >invalid Email address.</span> </ Span></p><p> <input type= "Submit"ng-disabled= "myform.user. $dirty && myform.user $invalid | | Myform.email. $dirty && myform.email. $invalid"></p></form><script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js "></ Script><script>functionValidatectrl ($scope) {$scope. User= ' John Doe '; $scope. Email= ' [email protected] ';}</script></body>can be verified by. $dirty. $invalid.
Add Bootstrap StyleBootstrap CSS files can be loaded first
<link rel= "stylesheet" href= "//apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" >
Sample Code Reference:
<! DOCTYPE html>View CodeAbout the include contains additional HTMLYou can include other Web pages through Ng-include:
<body><div class= "Container" > <div ng-include= "' myusers_list.htm '" ></div> < Div ng-include= "' myusers_form.htm '" ></div></div></body>
About the applicationCreating ANGULARJS Applications
<div ng-app= "Mytodoapp" ng-controller= "Mytodoctrl" >
And finally the angular filter reference.Ng_app Defining an Application
Ng_bind binding Data
Ng_click defining Element Click Behavior
Ng_controller Defining Controller Objects
Ng_disabled Defining HTML tags available
Ng_init Initializing data
Ng_model Binding Application Data
Ng_repeat Implementing Loops
Ng_show Displaying HTML tags
Currency Convert to Currency
Filter Select a subset from the array
Lowercase formatted string to lowercase
Uppercase formatted string to uppercase
Sort by order
"AngularJS"--2 First Knowledge AngularJS (cont.)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
