angular 学习笔记1
2016-10-03 本文已影响35人
black白先森
- 一个页面 引用多个 控制器
<div ng-app="app1" ng-controller="myController">
{{name}}
</div>
<div id="app2" ng-app="app2" ng-controller="myController1">
{{name1}}
</div>
<div id="app3" ng-app="app3" ng-controller="myController3">
{{name3}}
</div>
<script src="../node_modules/angular/angular.js"></script>
<script>
// 第一个模块
var app = angular.module('app1',[]);
app.controller('myController',function($scope){
$scope.name = '追梦';
});
// 第二个模块
var app2 = angular.module('app2',[]);
app2.controller('myController1',function($scope){
$scope.name1 = "懦夫";
});
// 这行代码 启动多个 ng-app
angular.bootstrap(document.getElementById("app2"), ['app2']);
// 第二个模块
var app3 = angular.module('app3',[]);
app3.controller('myController3',function($scope){
$scope.name3 = "懦夫232";
});
// 这行代码 启动多个 ng-app
angular.bootstrap(document.getElementById("app3"), ['app3']);
</script>
- 一个控制器 里面 控制多个模块
<body ng-app="app">
<h1>可以再一个主模块中创建多个子模块</h1>
<!-- 第一个 -->
<div ng-controller="myController">
{{name}}
</div>
<!-- 第二个 -->
<div ng-controller="myController1">
{{name2}}
</div>
<script src="../node_modules/angular/angular.js"></script>
<script>
// 创建主模块
var app = angular.module('app',['suna','sunb']);
// 创建模块1
var sunapp1 = angular.module('suna',[]);
// 创建控制器
sunapp1.controller('myController',function($scope){
$scope.name = "AAA";
});
var sunapp2 = angular.module('sunb',[]);
// 创建模块2
sunapp2.controller('myController1',function($scope){
$scope.name2 = "sadas";
});
</script>
</body>
- 关于 $log 打印 和解决闪烁问题
// ng-bind 有局限性，ng-cloak会在加载完后被清除，所以建议这个,如果有多个子元素，
ng-cloak就要放在 父元素上面
// 还有一个方法，把angular.js 的引用提前，因为出现表达式，是因为angular没有被加载
.ng-cloak {display:none;} // 重要
<body ng-app="app" ng-controller="myController">
// 解决闪烁第一种方法
<p ng-bind="name"></p><!-- 里面不放内容 -->
<p class="ng-cloak">{{name}}</p>
{{name}}
<script src="../node_modules/angular/angular.js"></script>
<script>
// 创建模块
var app = angular.module('app',[]);
// 控制器
//这里 controller 第二个参数传递数组形式，为了解决代码压缩问题
app.controller('myController',['$log','$scope',function($log,$scope){
$scope.name = "name";
$log.log('.log')
}]);
</script>
</body>
