浏览器如何识别HTML中的AngularJS标签?

7
我们知道HTML是客户端脚本语言,而在使用AngularJS框架时,在HTML标签中我们会包含“ng”。我的问题是浏览器如何识别或确定具有“ng”的HTML标签。请为我的问题提供正确的解决方案。

1
浏览器不理解这些标签。它是angular.js库读取和理解它们的。 - Kai Mattern
5个回答

3
以下几点帮助我理解“浏览器如何理解AngularJS标签”:
- AngularJS的HTML编译器允许开发人员教浏览器新的HTML语法。编译器允许您将行为附加到任何HTML元素或属性,甚至创建具有自定义行为的新HTML元素或属性。AngularJS将这些行为扩展称为指令。 - 有关HTML编译器工作原理的详细信息,请参阅以下链接: https://docs.angularjs.org/guide/compiler

3

Angular1需要在index.html文件中引用angular.js文件,以便将指令转换为浏览器可理解的形式。

而在Angular2中使用TypeScript,其中TypeScript编译器会自动将TypeScript代码编译或翻译成可在屏幕上呈现的浏览器可理解的JavaScript/ECMAScript。

AngularJS将在浏览器中即时运行,而Angular2及以上版本需要预编译或称为JavaScript/ECMAScript翻译。此外,如果在生产版本标志下进行翻译,则翻译后的JavaScript/ECMAScript将是压缩的。


0

浏览器没有内置angular/ng支持。1 必须在页面上包含angular库(angular.js脚本),这就是魔法发生的地方。


1虽然谷歌想改变这一点。


0

Angular旨在教浏览器一些新技能,并在此过程中使浏览器比没有Angular时更加智能。

当您启动Angular应用程序时,Angular会快速遍历DOM,寻找指令(例如ng-options、ng-if等)。这个DOM遍历是由$compile服务完成的。在遍历DOM并识别出指令后,Angular将它们链接到各自的视图并将它们绑定到其作用域。

这些指令封装了浏览器理解的HTML,并在编译过程后向浏览器公开。


0

我们使用 ng-app 指令将应用程序作为 Angular 应用程序引导。一旦您在 HTML 根元素中拥有此指令 (ng-app="myApp"),所有嵌套的 ng 元素都会被识别并编译。

例如:

   angular.module('myApp', []);//module definition in JS File

   <body ng-app="myApp">
   <div ng-controller="myCntrl">
        <input type="text" ng-model="User"/> //this will be recognized and compiled 
    </div>

我希望这是你想要的东西。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接