AngularJS 学习笔记2

最新推荐文章于 2022-12-09 16:14:24 发布

原创最新推荐文章于 2022-12-09 16:14:24 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

Angular-JS 同时被 2 个专栏收录

5 篇文章

订阅专栏

Javascript

4 篇文章

订阅专栏

本文探讨AngularJS中的三个核心指令：ng-app、ng-init和ng-model，并着重讲解ng-app的作用及其如何定义AngularJS应用的根元素。通过示例说明ng-app如何自动初始化应用程序以及如何手动启动多个ng-app实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚学会用Markdown, 现在用这个工具写第二篇博客
接下来主要讨论的内容是三个Angular Directive — ng-app, ng-init，和ng-model。本篇博客主要focus在ng-app。引用W3School的定义

The ng-app Directive

The ng-app directive defines the root element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

其中心思想就是这个ng-app定义了一个启动点。打个不太恰当的比喻，它就像是java里面的main()函数。但是区别在于，对于一个app，java里面只允许一个main()函数，但是AngularJS里面允许多个np-app。但第二和第三个ng-app需要手动启动。比如，

<body>
    <div id="app1" ng-app="FirstApp">
        <div ng-controller="MyCtrl">
            <span></span>
        </div>
    </div>
    <div id="app2" ng-app="SecondApp">
        <div ng-controller="MyCtrl">
            <span></span>
        </div>
    </div>
</body>

相对应的手动启动为如下

/**
 * The first App, don't bootstrap it, otherwise will have exceptions.
 * @type {[type]}
 */
var myModule1 = angular.module("FirstApp", []);
...;
// angular.element(document).ready(function() {
//     angular.bootstrap(app1, ['FirstApp']);
// });

/**
 * The second App
 * @type {[type]}
 */
var myModule2 = angular.module("SecondApp", []);
...
angular.element(document).ready(function() {
    angular.bootstrap(app2, ['SecondApp']);
});