Basic introduction and practice of AugularJS

Foreword

## Front-end

AngularJS is designed to overcome the shortcomings of HTML in building applications. (Quote from Baidu Encyclopedia)

AngularJS uses a different approach. It tries to make up for the shortcomings of HTML itself in building applications. AngularJS enables browsers to recognize the new syntax by using structures we call

directives. (Quote from Baidu Encyclopedia) 　　

　For example:

　　　　 Use double curly brackets {{}} syntax for data binding ；

Use DOM control structures to iterate or hide DOM fragments;

Support forms and form validation;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 wanted should be associated:

This study mainly has two parts:

①【AngularJS common instructions】

②【AngularJS’s mvc】

　　　　　

1. AngularJS common instructions

【Common commands】
1.na-app: Declare the area governed by angularjs, usually written in the body or HTML. In principle, only write one on each side.
#& Lt; body ng-apg = "" & gt; & lt;/body & gt;
2.ng-Model instructions bind the elemental value (such as the value of the input domain) to the application.
                                                                                                                                                                                                   
                           not not have been more relevant?
                                                                                                                                                                           Since The ng-init directive initializes AngularJS application variables.
                                                                                                                                                                                   ​Numbers, operators and variables. But the expression will see {{}} when the web page is loaded, so you can use ng-bind=" instead
{{5+""+5+',Angular'}}




[Basic Thoughts]

Instructions: In AngularJS, functions are provided by extending the attributes of HTML ↓↓↓↓ (original words in the novice tutorial)
AngularJS instructions are extended HTML Attributes with prefix NG-. The element value (such as the value of the input field) is bound to the application. mvc

for AngularJS

　　
[mvc three-tier framework]

            1. Model: the part of the application that handles attributes. (Save or modify data to database, variables, etc.). The characteristics of the Model in AugularJS are: data
                                                                                                                                                                    . Responsible for reading data from views, controlling user input, and sending data project-wide.

2. Working principle: The user sends a request from the view layer. After receiving the request, the controller forwards it to the corresponding model for processing. After the medle processing is completed, the result is returned to the controller and fed back to the user in the view.

Create an Angular module, that is, parts bound by NG-APP, you need to pass two parameters:
① the module name, that is, the name that Ng-APP needs to be bound to . ng-app="myApp";
② Array: The name of the module that needs to be injected. It can be empty if not required.

var app = Angular.module ("MyApp", []);

On the Angular module, creating a controller Controller needs to pass two parameters.
① ng-controller="myCtrl"
② Controller's constructor: The constructor can pass in multiple parameters, including $scope/$roatScope and various system built-in objects
   
                                     Scope】
①$scope: local scope, properties and methods declared on $scope can only be used in the current Controller;
②$rootScope: root scope, declared on $rootscope Familiarity and methods can be used in any area contained by ng-app (whether or not it agrees with the controller, or is in the controller's containing scope).
                                                                                                                                                                                                                        # , then this variable will be bound to the $scope of the current Controller by default
2. If ng-model is not in any ng-controller, this variable will be bound to $rootScope.

The rendering is as follows:

##The code is as follows:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title></title> 6         <style type="text/css"> 7             .div1{ 8                 width: 300px; 9                 height: 100px;10                 background-color: #00BFFF;11             }12         </style>13     </head>14     <body ng-app="myApp">15         <div ng-controller="myCtrl">16             <input type="text" ng-model="name"/>17             <div ng-bind="name" class="div1"></div>18             <div ng-bind="age" class="div1"></div>19             <div ng-bind="classes" class="div1"></div>20             <div ng-bind="classes.name" class="div1"></div>21             <div ng-bind="classes.age" class="div1"></div>22             <div ng-bind="classes.sex" class="div1"></div>23             24         </div>25         <div ng-controller="myCtrl1">26             <input type="text" ng-model="name"/>27             <div ng-bind="name" class="div1"></div>28             <div ng-bind="age" class="div1"></div>29         30         </div>31             32     </body>33     <script language="JavaScript" src="angular-1.5.6/angular.js?1.1.11"></script>34     <script type="text/javascript">35         var app = angular.module("myApp",[]);    
36         app.controller("myCtrl",function($scope){37             $scope.name = "帅哥" ;38             $scope.age = "18岁";39             $scope.classes = {40                     name:"张三",41                     age:"16岁",42                     sex:"男"43                 44             };45             46         });47         48         app.controller("myCtrl1",function($rootScope){49             $rootScope.name = "hahaha" ;50                     });51         52     </script>53 </html>

There may be some mistakes in the notes taken while studying. Your criticism and advice are welcome.

Reflect, review, and gain something every day------------------------looking forward to a better self

The above is the detailed content of Basic introduction and practice of AugularJS. For more information, please follow other related articles on the PHP Chinese website!