首页 > 代码库 > AngularJs学习笔记(1)——ng-app
AngularJs学习笔记(1)——ng-app
众所周知:
ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要要一个根元素。
HTML 文档中只允许有一个 ng-app
指令,如果有多个 ng-app
指令,则只有第一个会被使用,一个页面会自动加载第一个ng-app。
使用ng-app声明Angular的边界,你可以用ng-app 指令告诉Angular 应该管理页面中的哪一块,可以是整个HTML,也可以是某个div
一个ng-app可以有多个controller
$scope的范围局限于每一个controller中
问题来了:
我就是想要多个ng-app,虽然这样做不知道有什么用???
有例子如下:
<!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <body> <div id="app1" ng-app="App1"> <span ng-controller="myCtrl" ng-init="firstName=‘John‘ ; lastName=‘DoeDoe‘">{{ firstName + " " + lastName }}</span> <br> <span ng-controller="yourCtrl">{{ secondName + " " + thirdName}}</span> </div> <br> <div id="app2" ng-app="App2" ng-controller="yourCtrl"> {{ secondName + " " + thirdName }} </div> <script> var app = angular.module("App1", []); app.controller("myCtrl", function($scope) { // $scope.lastName = "Doe"; }); app.controller("yourCtrl", function($scope) { $scope.secondName = "小米1"; $scope.thirdName = "大米1"; }); var app1 = angular.module(‘App2‘, []); app1.controller("yourCtrl", function($scope) { $scope.secondName = "小米4"; $scope.thirdName = "小米5"; }); //默认加载app1,通过下面的代码显示启动app2,但是必须写在app2申明之后 angular.bootstrap(document.getElementById("app2"), [‘App2‘]); </script> </body> </html>
AngularJs学习笔记(1)——ng-app
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。