The basic operation process of templates and data is as follows:
User requests application start page
The user's browser initiates an http connection to the server, and then loads the index.html page, which contains the template
Angular is loaded into the page, waits for the page to load, and looks for the ng-app directive, which is used to define the boundaries of the template
Angular traverses the template to find the specified and binding relationships, which will trigger a series of actions: registering listeners, performing some DOM operations, and obtaining initialization data from the server. Finally, the application will start and convert the template into a DOM view
Connect to the server to load other data that needs to be displayed to the user
Show text
One uses the {{}} form, such as {{greeting}} and the second ng-bind="greeting"
Use the first method. Unrendered pages may be seen by users. It is recommended to use the second method for index pages. The remaining pages can use the first method
Form input
In some cases, we don’t want to take immediate action as soon as there is a change, but we have to wait. For example:
非表单提交型的交互,以click为例
列表、表格以及其他迭代型元素
ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下:
{{$index 1}} | {{student.name}} | {{student.score}} |
隐藏与显示
ng-show和ng-hide功能是等价的,但是运行效果正好相反。
css classes and styles
Both ng-class and ng-style can accept an expression. The result of the expression execution may be one of the following values:
A string representing css class names, separated by spaces
css class name array
Mapping of css class name to boolean value
The code example is as follows:
Mapping of css class names to Boolean values
The sample code is as follows: