AngularJS 学习笔记2

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

御剑飞天

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

阅读量243

点赞数

分类专栏： Javascript Angular-JS 文章标签： angularjs

本文链接：https://blog.csdn.net/MatchstickMan/article/details/50107495

版权

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

5 篇文章 0 订阅

订阅专栏

Javascript

4 篇文章 0 订阅

订阅专栏

刚学会用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']);
});