angular.js Chinese teaching video material sharing

AngularJS is a front-end development framework designed and developed by Google developers to help you simplify the burden of front-end development. AngularJS ranks first among the global front-end frameworks. Currently, there are very few Chinese AngularJS video tutorials in China, so this set of "angular.js Chinese Teaching Video Tutorials" came into being!

AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a good declarative language designed for static text display, but it is weak when it comes to building WEB applications. So I did some work (tricks if you will) to get the browser to do what I wanted.

Usually, we use the following technologies to solve the shortcomings of static web page technology in building dynamic applications:

Class library - A class library is a collection of functions that can help you write WEB applications . It's your code that takes control, and it's you who decides when to use the library. Class libraries include: jQuery and other

frameworks - A framework is a special, already implemented WEB application. You only need to fill it with specific business logic. The framework here plays a leading role, calling your code according to specific application logic. Frameworks include: knockout, sproutcore, etc.

Video playback address: http://www.php.cn/course/644.html

Difficulties in learning this video ：

1. Control the display and hidden state of elements

Call the ng-show, ng-hide, ng-switch instructions on the page to bind the attribute value of the $scope object

On in the ng-switch directive is optional. When on matches multiple or certain elements of the ng-switch-when directive, these elements are displayed. If there is no matching ng-switch-default, it is displayed.

<div ng-show = {{isShow}}> div </div>
<div ng-hide = {{isHide}}>hide</div>
<ul ng-switch on={{switch}}>
    <li ng-switch-when="1">taoguorong</li>
    <li ng-switch -default>more</li>
</ul>

2. Basic form validation function

$pristine: Whether the content of the form or control has not been entered

$dirty: Whether the content of the form or control has been entered

$valid : Whether the form or control content has been verified

$invalid: Whether the form or space content has not been verified

$error: Error message when the form or control is verified

<form name="temp_form" ng-submit="save()">
    <div>
        <input name="t_email" ng-model = "email" type="email" required/>
        <span ng-show="temp_form.t_email.$error.required>            邮件不能为空       </span>
       <span ng-show="temp_form.t_email.$error.email>           邮件格式不对       </span    </div>
     <input type = "button" ng-disabled="temp_form.$invalid" value="提交"/>
</form>

3. The checkbox control and redio control in the form

Bind the properties of the controller through ng-model. Once the binding is completed, the bound value will be used as the initialization state of the control when it is loaded for the first time.

<form name="temp_form" ng-submit="save()">
    <div>
        <input name="t_email" ng-model = "email" type="email" required/>
        <span ng-show="temp_form.t_email.$error.required>            邮件不能为空       </span>
       <span ng-show="temp_form.t_email.$error.email>           邮件格式不对       </span    </div>
    <div>
        <input type="checkbox" ng-model = "a"  ng-true-value="同意" ng-false-value = "不同意">同意    </div>
     <div>
        <input type="rediio" ng-model = "a"  value="男">男        <input type="rediio" ng-model = "a"  value="女">女    </div>
     <input type = "button" ng-disabled="temp_form.$invalid" value="提交"/>
</form>

ng-true-value indicates the value returned after selection, the latter indicates the value returned when not selected, redio will only return the selected value if it is selected.

The above is the detailed content of angular.js Chinese teaching video material sharing. For more information, please follow other related articles on the PHP Chinese website!