The content of this article is about the basic introduction to angularjs. It has a certain reference value. Now I share it with you. Friends in need can refer to it.
Front-end JS framework: It encapsulates the use of JS to develop front-end repetitive functions, extends HTML, and is mainly used for page operation and display.
Core: MVC, modularization, two-way data binding, dependency injection, semantic tags, expressions, etc. [Recommended related video tutorials: angularjs video tutorial]
Introducing related js files
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--匿名应用模块--> <p ng-app=""> <input ng-model="username" name="username"/> <input ng-model="username"/> <p>{{username}}</p> <p ng-bind="username"></p> </p> </body> </html> Copy after login |
form element to the Angularjs internal variable.
ng-bind: The function is equivalent to expression, but the usage is different. Generally used to bind non-form elements and display variables. The difference between ng-bind and {{}}: the former will replace all the contents of the tag's sub-tags with the contents of the variable, while the latter just displays the contents of the variable at the current position. Based on modularized MVC (MVVM)View: mainly refers to HTML static page data tags, mainly used for display. Model: Mainly only fills in some data of the view and logical processing. For example, json, variable control: some js code, write logic. Mainly to get the model, populate the view, get data from the view, and populate the model. Conversion between m and vm: For example, variables:var username=”XiaoQi”; $scope.username=username;
On the page: {{username}}
Note: $scope cannot be added to Angularjs variables on the page.
If the variable is changed by internal js such as timer, then by default Angularjs cannot implement two-way data binding display, and $.digest needs to be used to force notification (refresh) Example of initializing content when the page is opened:If you define named application modules and controllers, you must use js initialize it!
Dependency Injection DI
##Button Event Binding
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入Angularjs--> <script type="text/javascript" src="../js/angular.min.js" ></script> </head> <body> <!--视图--> <p ng-app="myApp" ng-controller="myCtrl"> <table border="1"> <tr> <th>序号</th> <th>商品编号</th> <th>商品名称</th> <th>商品价格</th> </tr> <tr ng-repeat="product in products"> <td>{{$index+1}}</td> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> </tr> </table> </p> <!--控制器--> <script type="text/javascript"> angular.module("myApp",[]) .controller("myCtrl",["$scope",function($scope){ //json数组 $scope.products=[ {"id":1001,"name":"电视机","price":998}, {"id":1002,"name":"洗衣机","price":988898} ]; }]) </script> </body> </html>
Underlying implementation: realized through # (anchor) in html.
Official example:
Writing: url # Sub-path (to be displayed in the middle)
Introduce the routing module:
<!--引入路由模块--> <script type="text/javascript" src="../js/angular-route.min.js" ></script>
ng-view: used to display the content of routing results |
template:html, supports html tags
Related recommendations:
Download all versions of AngularJS
The difference between angularjs and angular4. Why use angular4
The above is the detailed content of Introduction to the basics of AngularJS. For more information, please follow other related articles on the PHP Chinese website!