Angular的启动方式

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

香-雪-兰

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

阅读量690

点赞数

分类专栏： JS

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

方式 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>{{Name}}</span>
    </div>
</body>
</html>
JS
var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Puppet";
    }
]);
方式 2：手动启动
在没有ng-app的情况下，只需要在js中添加一段注册代码即可
<body>
    <div ng-controller="MyCtrl">
        <span>{{Name}}</span>
    </div>
</body>


JS

   
   
    
    
    
    
    
    
   
   
/**
 * 第一个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']);
});

香-雪-兰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Angular的启动方式

方式 1：自动启动Angular会自动的找到ng-app，将它作为启动点，自动启动html ng-app="myModule">head> title>New Pagetitle> meta charset="utf-8" /> script type="text/javascript" src="../../vendor/bower_components
复制链接

扫一扫