angularJS的启动方法

最新推荐文章于 2023-08-22 18:13:12 发布

fengxfengx

最新推荐文章于 2023-08-22 18:13:12 发布

阅读量740

点赞数

分类专栏： AngularJs 文章标签： javascript 开发工具操作系统 ViewUI

本文链接：https://blog.csdn.net/fengxfengx/article/details/84792627

版权

AngularJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

angular的三种启动方式

方式1: 自动启动

Angular会自动的找到ng-app，将它作为启动点，自动启动

<!DOCTYPE html>
<html ng-app="myModule">

<head>
    <title>New Page</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../../vendor/bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="./02.boot1.js"></script>
</head>

<body>
    <div ng-controller="MyCtrl">
        <span></span>
    </div>
</body>
</html>

var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Puppet";
    }
]);

方式2: 手动启动

在没有ng-app的情况下，只需要在js中添加一段注册代码即可

<body>
    <div ng-controller="MyCtrl">
        <span></span>
    </div>
</body>

var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Puppet";
    }
]);

/**
 * 这里要用ready函数等待文档初始化完成
 */
angular.element(document).ready(function() {
    angular.bootstrap(document, ['myModule']);
});

方式3:多个ng-app

ng中，angular的ng-app是无法嵌套使用的，在不嵌套的情况下有多个ng-app，他默认只会启动第一个ng-app，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)

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

/**
 * 第一个APP
 * @type {[type]}
 */
var myModule1 = angular.module("myModule1", []);
myModule1.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Puppet";
    }
]);
// angular.element(document).ready(function() {
//     angular.bootstrap(app1, ['MyModule1']);
// });

/**
 * 第二个APP
 * @type {[type]}
 */
var myModule2 = angular.module("myModule2", []);
myModule2.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Vincent";
    }
]);
angular.element(document).ready(function() {
    angular.bootstrap(app2, ['myModule2']);
});

fengxfengx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS的启动方法

angular的三种启动方式方式1: 自动启动Angular会自动的找到ng-app，将它作为启动点，自动启动&lt;!DOCTYPE html&gt;&lt;html ng-app="myModule"&gt;&lt;head&gt; &lt;title&gt;New Page&lt;/title&gt; &lt;meta charset="
复制链接

扫一扫