1.AngularJs默認只加載一個ng-app，並且是第一個
問題來源：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字：<input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="init" ng-init="firstName='John'">
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>
</body>
</html>發現上述代碼輸出結果爲：
Hello 輸入
姓名爲而不是輸出：
Hello 輸入
姓名爲 John如果需要加載多個ng-app，需要手動加載，具體方法看https://www.zhihu.com/question/34972098
2.一個模塊對應一個應用，應用擁有控制器
...
<script type="text/javascript">
var = app.module("myApp" , []);
app.controller("myController" , function($scope){...});
</script>
<body ng-app="myApp" ng-controller="myController">
</body>
....碰到的一個疑問？
...
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p>名字：<input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>
</body>
...爲何輸出爲？
Hello {{name}}
姓名爲3.記得初始化
<table datatable="" width="100%" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" data-order='[[ 0, "desc" ]]'
class="table table-striped table-bordered table-hover">
</table>
比如：$scope.dtInstance={}4.作用域scope
1)作用域的嵌套，一般會進行作用域的繼承
2)一些會創建一個子作用域情況
5.插值字符串
定義：像佔位符，可以用值來替代它
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myController',function($scope,$interpolate){
$scope.emailBody = '';
$scope.$watch('emailBody',function(body){
var template = $interpolate(body);
$scope.previewText = template({to : $scope.to}) ;
});
});
</script>
<body>
<div ng-app='myApp' ng-controller='myController'>
<input ng-model='to' type='text' placeholder='Recipient'/>
<textarea ng-model='emailBody'></textarea>
<pre>{{previewText}}</pre>
</div>
</body>
</html>這樣emailBody中的{{to}}，就會被input當中輸入的值給代替，記得先往input當中輸入值
6.自定義指令
<!doctype html>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
angular.module('myApp',[]).directive('myDirective' , function(){
return {
restrict: 'E',
template: '<a href="https://www.baidu.com">Click me to go to baidu</a>'
};
});
</script>
<body>
<my-directive></my-directive>
</body>
</html>- 在HTML使用my-directive聲明指令，因此指令定義必須以myDirective爲名字（駝峯命名）
- restrict指定可以以何種方式來調用指令（E代表元素、A代表屬性、C代表類、M代表註釋），可以多個相結合restrict:’EACM’
- template指定嵌套在HTML中的代碼
- 指令最好使用屬性方式來聲明
<div my-directive></div>，這樣兼容性好
7.隔離作用域(只能在指令的方法中或者指令的模板字符串中使用且指令模板就無法訪問外部作用域)
<!doctype html>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
angular.module('myApp',[]).directive('myDirective' , function(){
return {
restrict: 'A',
//a標籤替換div標籤
replace:true,
scope: {
myUrl:'@',
myLinkText:'@'
},
template: '<a href="{{myUrl}}">{{myLinkText}}</a>'
};
});
</script>
<body>
<div my-directive my-url='http://google.com' my-link-text='Click me to go to Google'></div>
</body>
</html>8.angularjs接受參數
<body ng-app="app">
<a href="#/?name=xll&hello=abc">School Buddy</a>
<a href="#/schools">Schools</a>
<a href="#/classrooms">Classrooms</a>
<a href="#/activities">Activities</a>
<div ng-view></div>
</body>在控制其中注入$location，之後通過如下方法獲取：
var name = $location.search()['name'];
var hello = $location.search()['hello'];